Bug 1465644 - Part 2. Introduce the emphasized splitter style. r=nchevobbe
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Wed, 22 Aug 2018 16:07:53 +0900
changeset 432795 6ff5e06dccdcf88c9673c5035bd8f86bf6974066
parent 432794 e1296c1105fbf9f34a7b54018d1767d56a6d5847
child 432796 fd86a6388333a146b2ca7dcea00f3e3343aae139
push id34488
push usernerli@mozilla.com
push dateWed, 22 Aug 2018 16:28:54 +0000
treeherdermozilla-central@d6e4d3e69d4c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1465644
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1465644 - Part 2. Introduce the emphasized splitter style. r=nchevobbe
devtools/client/shared/components/splitter/SplitBox.css
devtools/client/themes/splitters.css
devtools/client/themes/variables.css
devtools/client/webconsole/test/mochitest/browser_webconsole_split.js
--- a/devtools/client/shared/components/splitter/SplitBox.css
+++ b/devtools/client/shared/components/splitter/SplitBox.css
@@ -43,41 +43,47 @@
   box-sizing: border-box;
 
   /* Positive z-index positions the splitter on top of its siblings and makes
      it clickable on both sides. */
   z-index: 1;
 }
 
 .split-box.vert > .splitter {
-  min-width: calc(var(--devtools-splitter-inline-start-width) +
-    var(--devtools-splitter-inline-end-width) + 1px);
+  min-width: var(--devtools-vertical-splitter-min-width);
 
   border-inline-start-width: var(--devtools-splitter-inline-start-width);
   border-inline-end-width: var(--devtools-splitter-inline-end-width);
 
   margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
   margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width));
 
   cursor: ew-resize;
 }
 
 .split-box.horz > .splitter {
-  min-height: calc(var(--devtools-splitter-top-width) +
-    var(--devtools-splitter-bottom-width) + 1px);
+  /* Emphasize the horizontal splitter width and color */
+  min-height: var(--devtools-emphasized-horizontal-splitter-min-height);
+
+  background-color: var(--theme-emphasized-splitter-color);
 
   border-top-width: var(--devtools-splitter-top-width);
   border-bottom-width: var(--devtools-splitter-bottom-width);
 
   margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
   margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
 
   cursor: ns-resize;
 }
 
+/* Emphasized splitter has the hover style. */
+.split-box.horz > .splitter:hover {
+  background-color: var(--theme-emphasized-splitter-color-hover);
+}
+
 .split-box.disabled {
   pointer-events: none;
 }
 
 /**
  * Make sure splitter panels are not processing any mouse
  * events. This is good for performance during splitter
  * bar dragging.
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -3,26 +3,40 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* This file is loaded by both browser.xul and toolbox.xul. Therefore, rules
    defined here can not rely on toolbox.xul variables. */
 
 /* Splitters */
 
 :root {
+  /* Draggable splitter element size */
+  --devtools-splitter-element-size: 1px;
+  --devtools-emphasized-splitter-element-size: 2px;
+
   /* Define the widths of the draggable areas on each side of a splitter. top
      and bottom widths are used for horizontal splitters, inline-start and
      inline-end for side splitters.*/
 
   --devtools-splitter-top-width: 2px;
   --devtools-splitter-bottom-width: 2px;
+  --devtools-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
+                                                  var(--devtools-splitter-bottom-width) +
+                                                  var(--devtools-splitter-element-size));
+  --devtools-emphasized-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
+                                                             var(--devtools-splitter-bottom-width) +
+                                                             var(--devtools-emphasized-splitter-element-size));
 
   /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
   --devtools-splitter-inline-start-width: 1px;
   --devtools-splitter-inline-end-width: 4px;
+
+  --devtools-vertical-splitter-min-width: calc(var(--devtools-splitter-inline-start-width) +
+                                               var(--devtools-splitter-inline-end-width) +
+                                               var(--devtools-splitter-element-size));
 }
 
 #appcontent[devtoolstheme="light"] {
   /* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */
   --devtools-splitter-color: #dde1e4;
 }
 
 #appcontent[devtoolstheme="dark"] {
@@ -43,31 +57,41 @@ splitter.devtools-horizontal-splitter,
   box-sizing: border-box;
 
   /* Positive z-index positions the splitter on top of its siblings and makes
      it clickable on both sides. */
   z-index: 1;
 }
 
 splitter.devtools-horizontal-splitter {
-  min-height: calc(var(--devtools-splitter-top-width) +
-    var(--devtools-splitter-bottom-width) + 1px);
+  min-height: var(--devtools-horizontal-splitter-min-height);
 
   border-top-width: var(--devtools-splitter-top-width);
   border-bottom-width: var(--devtools-splitter-bottom-width);
 
   margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
   margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
 
   cursor: ns-resize;
 }
 
+#toolbox-deck ~ splitter.devtools-horizontal-splitter {
+  min-height: var(--devtools-emphasized-horizontal-splitter-min-height);
+}
+
+/**
+ * Emphasized splitter has the hover style.
+ * This emphasized splitter affect splitter console only.
+ */
+#toolbox-deck ~ splitter.devtools-horizontal-splitter:hover {
+  background-color: var(--theme-emphasized-splitter-color-hover);
+}
+
 .devtools-side-splitter {
-  min-width: calc(var(--devtools-splitter-inline-start-width) +
-    var(--devtools-splitter-inline-end-width) + 1px);
+  min-width: var(--devtools-vertical-splitter-min-width);
 
   border-inline-start-width: var(--devtools-splitter-inline-start-width);
   border-inline-end-width: var(--devtools-splitter-inline-end-width);
 
   margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
   margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width));
 
   cursor: ew-resize;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -36,16 +36,18 @@
   --theme-selection-background: var(--blue-55);
   --theme-selection-background-hover: #F0F9FE;
   --theme-selection-focus-background: var(--toolbarbutton-hover-background);
   --theme-selection-focus-color: var(--grey-70);
   --theme-selection-color: #ffffff;
 
   /* Border color that splits the toolbars/panels/headers. */
   --theme-splitter-color: #e0e0e1;
+  --theme-emphasized-splitter-color: var(--grey-30);
+  --theme-emphasized-splitter-color-hover: var(--grey-40);
 
   --theme-comment: var(--grey-50);
   --theme-comment-alt: #ccd1d5;
 
   --theme-body-color: var(--grey-60);
   --theme-body-color-alt: var(--grey-40);
   --theme-body-color-inactive: #999797;
   --theme-content-color1: #292e33;
@@ -141,16 +143,18 @@
   --theme-selection-background: #204E8A;
   --theme-selection-background-hover: #353B48;
   --theme-selection-focus-background: var(--grey-60);
   --theme-selection-focus-color: var(--grey-30);
   --theme-selection-color: #ffffff;
 
   /* Border color that splits the toolbars/panels/headers. */
   --theme-splitter-color: #3c3c3d;
+  --theme-emphasized-splitter-color: var(--grey-60);
+  --theme-emphasized-splitter-color-hover: var(--grey-50);
 
   --theme-comment: #939393;
   --theme-comment-alt: #939393;
 
   --theme-body-color: #909090;
   --theme-body-color-alt: var(--grey-50);
   --theme-body-color-inactive: var(--grey-40);
   --theme-content-color1: var(--grey-30);
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_split.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_split.js
@@ -83,24 +83,27 @@ async function performTests() {
     const deck = toolbox.doc.querySelector("#toolbox-deck");
     const webconsolePanel = toolbox.webconsolePanel;
     const splitter = toolbox.doc.querySelector("#toolbox-console-splitter");
 
     const containerHeight = deck.parentNode.getBoundingClientRect().height;
     const deckHeight = deck.getBoundingClientRect().height;
     const webconsoleHeight = webconsolePanel.getBoundingClientRect().height;
     const splitterVisibility = !splitter.getAttribute("hidden");
+    // Splitter height will be 1px since the margin is negative.
+    const splitterHeight = splitterVisibility ? 1 : 0;
     const openedConsolePanel = toolbox.currentToolId === "webconsole";
     const menuLabel = await getMenuLabel(toolbox);
 
     return {
       deckHeight: deckHeight,
       containerHeight: containerHeight,
       webconsoleHeight: webconsoleHeight,
       splitterVisibility: splitterVisibility,
+      splitterHeight: splitterHeight,
       openedConsolePanel: openedConsolePanel,
       menuLabel,
     };
   }
 
   function getMenuLabel() {
     return new Promise(resolve => {
       const button = toolbox.doc.getElementById("toolbox-meatball-menu-button");
@@ -213,17 +216,19 @@ async function performTests() {
     currentUIState = await getCurrentUIState();
 
     ok(currentUIState.splitterVisibility,
        "Splitter is visible when console is split");
     ok(currentUIState.deckHeight > 0,
        "Deck has a height > 0 when console is split");
     ok(currentUIState.webconsoleHeight > 0,
        "Web console has a height > 0 when console is split");
-    is(Math.round(currentUIState.deckHeight + currentUIState.webconsoleHeight),
+    is(Math.round(currentUIState.deckHeight +
+                  currentUIState.webconsoleHeight +
+                  currentUIState.splitterHeight),
        currentUIState.containerHeight,
        "Everything adds up to container height");
     ok(!currentUIState.openedConsolePanel,
        "The console panel is not the current tool");
     is(currentUIState.menuLabel, "hide",
        "The menu item indicates the console is split");
 
     await toolbox.toggleSplitConsole();