Bug 1258114 - use invisible borders to drag devtools splitters on both sides;r=bgrins

Devtools splitters now have a clickable area on both sides of the splitter.
The previous layout provided a 3px clickable area (2px empty content + 1px
visible border).

The new layout uses invisible borders on both sides and a visible (clipped)
content. New draggable areas:
- side splitters : 1px left + 1px splitter + 4px right
- horizontal splitters : 2 px top + 1px splitter + 2px bottom

Variables are defined in splitters.css to adjust these settings.
Modified two test helpers opening context menus: the click should be
performed with a slight offset in order to avoid clicking on the splitter.

MozReview-Commit-ID: 94uFZoIBL7B

--HG--
extra : rebase_source : 8683e8700c83feae6bddc869cacda03b156a9f91
extra : amend_source : 10cdeed511c02a907e99b74295fe25a3ad623030

devtools/client/inspector/rules/test/browser_rules_edit-selector-click.js

@@ -36,7 +36,7 @@ function* testClickOnSelectorEditorInput(view) {
 
   info("Click inside the editor input");
   let onClick = once(editorInput, "click");
-  EventUtils.synthesizeMouse(editor.input, 1, 1, {}, view.styleWindow);
+  EventUtils.synthesizeMouse(editor.input, 2, 1, {}, view.styleWindow);
   yield onClick;
   is(editor.input, view.styleDocument.activeElement,
     "The editor input should still be focused");
@@ -44,7 +44,7 @@ function* testClickOnSelectorEditorInput(view) {
 
   info("Doubleclick inside the editor input");
   let onDoubleClick = once(editorInput, "dblclick");
-  EventUtils.synthesizeMouse(editor.input, 1, 1, { clickCount: 2 },
+  EventUtils.synthesizeMouse(editor.input, 2, 1, { clickCount: 2 },
     view.styleWindow);
   yield onDoubleClick;
   is(editor.input, view.styleDocument.activeElement,

devtools/client/shared/components/h-split-box.js

@@ -130,7 +130,7 @@ module.exports = createClass({
       ),
 
       dom.div({
-        className: "h-split-box-splitter",
+        className: "devtools-side-splitter",
         onMouseDown: this._onMouseDown,
       }),
 

devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html

@@ -77,7 +77,7 @@ window.onload = Task.async(function* () {
     // Send a mouse down on the splitter, and then move the mouse a couple
     // times. Now we should get resizes.
 
-    const splitter = document.querySelector(".h-split-box-splitter");
+    const splitter = document.querySelector(".devtools-side-splitter");
     ok(splitter, "Should get our splitter");
 
     synthesizeMouseAtCenter(splitter, { button: 0, type: "mousedown" }, window);

devtools/client/storage/test/head.js

@@ -843,7 +843,7 @@ function waitForContextMenu(popup, button, onShown, onHidden) {
   info("wait for the context menu to open");
   button.scrollIntoView();
   let eventDetails = {type: "contextmenu", button: 2};
-  EventUtils.synthesizeMouse(button, 2, 2, eventDetails,
+  EventUtils.synthesizeMouse(button, 5, 2, eventDetails,
                              button.ownerDocument.defaultView);
   return deferred.promise;
 }

devtools/client/themes/components-h-split-box.css

@@ -22,10 +22,3 @@
   flex-direction: row;
   flex: 1;
 }
-
-.h-split-box-splitter {
-  -moz-border-end: 1px solid var(--theme-splitter-color);
-  cursor: ew-resize;
-  width: 3px;
-  -moz-margin-start: -3px;
-}

devtools/client/themes/splitters.css

@@ -2,7 +2,24 @@
  * 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/. */
 
+/* This file is loaded by both browser.xul and toolbox.xul. Therefore, rules
+   defined here can not rely on toolbox.xul variables. */
+
 /* Splitters */
+
+:root {
+  /* 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;
+
+  /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
+  --devtools-splitter-inline-start-width: 1px;
+  --devtools-splitter-inline-end-width: 4px;
+}
+
 :root[devtoolstheme="light"] {
   /* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */
   --devtools-splitter-color: #dde1e4;
@@ -12,28 +29,47 @@
   --devtools-splitter-color: #42484f;
 }
 
-.devtools-horizontal-splitter {
-  -moz-appearance: none;
-  background-image: none;
-  background-color: transparent;
-  border: 0;
-  border-bottom: 1px solid var(--devtools-splitter-color);
-  min-height: 3px;
-  height: 3px;
-  margin-top: -3px;
-  position: relative;
-}
-
+.devtools-horizontal-splitter,
 .devtools-side-splitter {
   -moz-appearance: none;
   background-image: none;
-  background-color: transparent;
   border: 0;
-  -moz-border-end: 1px solid var(--devtools-splitter-color);
-  min-width: 3px;
-  width: 3px;
-  -moz-margin-start: -3px;
+  border-style: solid;
+  border-color: transparent;
+  background-color: var(--devtools-splitter-color);
+  background-clip: content-box;
   position: relative;
+
+  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;
+}
+
+.devtools-horizontal-splitter {
+  min-height: calc(var(--devtools-splitter-top-width) +
+    var(--devtools-splitter-bottom-width) + 1px);
+
+  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: n-resize;
+}
+
+.devtools-side-splitter {
+  min-width: calc(var(--devtools-splitter-inline-start-width) +
+    var(--devtools-splitter-inline-end-width) + 1px);
+
+  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: e-resize;
 }
 

devtools/client/themes/toolbars.css

@@ -980,17 +980,15 @@
 
 .devtools-invisible-splitter {
   border-color: transparent;
+  background-color: transparent;
 }
 
-.devtools-horizontal-splitter {
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
+.devtools-horizontal-splitter,
 .devtools-side-splitter {
-  -moz-border-end: 1px solid var(--theme-splitter-color);
-  border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */
+  background-color: var(--theme-splitter-color);
 }
 
+
 /* Throbbers */
 .devtools-throbber::before {
   content: "";

devtools/client/themes/widgets.css

@@ -64,17 +64,19 @@
   .devtools-responsive-container > .devtools-side-splitter {
     /* This is a normally vertical splitter, but we have turned it horizontal
        due to the smaller resolution */
-    min-height: 3px;
-    height: 3px;
-    margin-top: -3px;
+    min-height: calc(var(--devtools-splitter-top-width) +
+    var(--devtools-splitter-bottom-width) + 1px);
+    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));
 
     /* Reset the vertical splitter styles */
-    border-width: 0;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    -moz-margin-start: 0;
-    width: auto;
     min-width: 0;
+    border-inline-end-width: 0;
+    border-inline-start-width: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
 
     /* In some edge case the cursor is not changed to n-resize */
     cursor: n-resize;
@@ -1123,7 +1125,7 @@
 /* Table body */
 
 .table-widget-body > .devtools-side-splitter {
-  border: none;
+  background-color: transparent;
 }
 
 .table-widget-body {

devtools/client/webconsole/test/head.js

@@ -283,7 +283,7 @@ function waitForContextMenu(popup, button, onShown, onHidden) {
 
   info("wait for the context menu to open");
   let eventDetails = {type: "contextmenu", button: 2};
-  EventUtils.synthesizeMouse(button, 2, 2, eventDetails,
+  EventUtils.synthesizeMouse(button, 5, 2, eventDetails,
                              button.ownerDocument.defaultView);
   return deferred.promise;
 }