Bug 1566135 - Remove devtools-separator margin variables; r=ntim

Differential Revision: https://phabricator.services.mozilla.com/D38105

--HG--
extra : moz-landing-system : lando

devtools/client/accessibility/accessibility.css

@@ -20,8 +20,6 @@
   --accessibility-link-color: var(--blue-60);
   --accessibility-link-color-active: var(--blue-70);
   --accessibility-body-background-a90: rgba(255, 255, 255, 0.9);
-  /* Similarly to webconsole, add more padding before the toolbar group. */
-  --separator-inline-margin: 5px;
   --accessibility-code-background: var(--grey-20);
 }
 
@@ -126,6 +124,11 @@ body {
   font-size: var(--accessibility-font-size);
 }
 
+/* Similarly to webconsole, add more padding before the toolbar group. */
+.devtools-toolbar .devtools-separator {
+  margin-inline: 5px;
+}
+
 .devtools-toolbar .help {
   cursor: pointer;
   width: 18px;

devtools/client/responsive.html/index.css

@@ -215,8 +215,8 @@ input:-moz-focusring {
   #toolbar.user-agent {
     background-image: linear-gradient(to bottom,
       transparent var(--toolbar-row-height),
-      var(--separator-border-color) var(--toolbar-row-height),
-      var(--separator-border-color) calc(var(--toolbar-row-height) + 1px),
+      var(--theme-splitter-color) var(--toolbar-row-height),
+      var(--theme-splitter-color) calc(var(--toolbar-row-height) + 1px),
       transparent 0);
   }
 }

devtools/client/themes/toolbars.css

@@ -3,20 +3,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
-:root {
-  --separator-block-margin: 4px;
-  --separator-inline-margin: 1px;
-}
-
-.theme-light {
-  --separator-border-color: rgba(0,0,0,.1);
-}
-
-.theme-dark {
-  --separator-border-color: rgba(100%,100%,100%,.2);
-}
-
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
@@ -68,9 +54,9 @@
  * Some separators may be using a bigger, 6px horizontal margin.
  */
 .devtools-separator {
-  border-inline-start: 1px solid var(--separator-border-color);
-  height: calc(100% - 2 * var(--separator-block-margin));
-  margin: var(--separator-block-margin) var(--separator-inline-margin);
+  border-inline-start: 1px solid var(--theme-toolbar-separator);
+  height: calc(100% - 8px);
+  margin: 4px 1px;
 }
 
 /* In-tools sidebar */

devtools/client/themes/toolbox.css

@@ -213,11 +213,11 @@
 }
 
 #toolbox-buttons-start > .devtools-separator {
-  --separator-inline-margin: 0;
+  margin-inline: 0;
 }
 
 #toolbox-buttons-end > .devtools-separator {
-  --separator-inline-margin: 5px;
+  margin-inline: 5px;
 }
 
 #toolbox-close::before {

devtools/client/themes/variables.css

@@ -29,6 +29,7 @@
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: var(--grey-20);
   --theme-toolbar-hover-active: var(--grey-20);
+  --theme-toolbar-separator: var(--grey-90-a10);
 
   /* Buttons */
   --theme-button-background: rgba(12, 12, 13, 0.05);
@@ -135,6 +136,7 @@
   --theme-toolbar-background-alt: var(--grey-85);
   --theme-toolbar-hover: #232327;
   --theme-toolbar-hover-active: #252526;
+  --theme-toolbar-separator: var(--grey-10-a20);
 
   /* Buttons */
   --theme-button-background: rgba(249, 249, 250, 0.1);

devtools/client/themes/webconsole.css

@@ -651,7 +651,6 @@ a.learn-more-link.webconsole-learn-more-link {
 }
 
 .devtools-toolbar.webconsole-filterbar-secondary {
-  --separator-inline-margin: 5px;
   display: flex;
   align-items: center;
   align-self: stretch;
@@ -660,6 +659,10 @@ a.learn-more-link.webconsole-learn-more-link {
   min-height: var(--primary-toolbar-height);
 }
 
+.devtools-toolbar.webconsole-filterbar-secondary .devtools-separator {
+  margin-inline: 5px;
+}
+
 .split-console-close-button-wrapper {
   min-height: var(--primary-toolbar-height);
   /* We will need to display the close button in the right-top always. */