Bug 985308 - Add space and separators to customize mode. r= draft
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 25 Apr 2018 23:06:27 +0100
changeset 788075 38bdc127ef6d5fb5123947fdd66b368d33a52a34
parent 788060 9b66db25a4e39f94a90c8161187466b61a7a2d03
push id107892
push userbmo:ntim.bugs@gmail.com
push dateWed, 25 Apr 2018 22:07:08 +0000
bugs985308
milestone61.0a1
Bug 985308 - Add space and separators to customize mode. r= MozReview-Commit-ID: 2i5Hh8FsiHT
browser/components/customizableui/CustomizeMode.jsm
browser/components/customizableui/test/browser_1003588_no_specials_in_panel.js
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -712,16 +712,22 @@ CustomizeMode.prototype = {
           continue;
         }
         fragment.appendChild(paletteItem);
       }
 
       let flexSpace = CustomizableUI.createSpecialWidget("spring", this.document);
       fragment.appendChild(this.wrapToolbarItem(flexSpace, "palette"));
 
+      let space = CustomizableUI.createSpecialWidget("spacer", this.document);
+      fragment.appendChild(this.wrapToolbarItem(space, "palette"));
+
+      let separator = CustomizableUI.createSpecialWidget("separator", this.document);
+      fragment.appendChild(this.wrapToolbarItem(separator, "palette"));
+
       this.visiblePalette.appendChild(fragment);
       this._stowedPalette = this.window.gNavToolbox.palette;
       this.window.gNavToolbox.palette = this.visiblePalette;
     } catch (ex) {
       log.error(ex);
     }
   },
 
--- a/browser/components/customizableui/test/browser_1003588_no_specials_in_panel.js
+++ b/browser/components/customizableui/test/browser_1003588_no_specials_in_panel.js
@@ -77,17 +77,24 @@ add_task(async function checkDragging() 
       elementsToMove.push(id);
     }
   }
   is(elementsToMove.length, 3, "Should have 3 elements to try and drag.");
 
   await startCustomizing();
   let existingSpecial = null;
   existingSpecial = gCustomizeMode.visiblePalette.querySelector("toolbarspring");
-  ok(existingSpecial, "Should have a flexible space in the palette by default in photon");
+  ok(existingSpecial, "Should have a flexible space in the palette by default");
+
+  existingSpecial = gCustomizeMode.visiblePalette.querySelector("toolbarspacer");
+  ok(existingSpecial, "Should have a space in the palette by default");
+
+  existingSpecial = gCustomizeMode.visiblePalette.querySelector("toolbarseparator");
+  ok(existingSpecial, "Should have a separator in the palette by default");
+
   for (let id of elementsToMove) {
     simulateItemDragAndEnd(document.getElementById(id), document.getElementById(targetArea));
   }
 
   assertAreaPlacements(startArea, placementsWithSpecials);
   assertAreaPlacements(targetArea, startingTargetPlacements);
 
   for (let id of elementsToMove) {
@@ -104,9 +111,8 @@ add_task(async function checkDragging() 
   await endCustomizing();
 });
 
 
 add_task(async function asyncCleanup() {
   await endCustomizing();
   CustomizableUI.reset();
 });
-
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -250,25 +250,47 @@ toolbarpaletteitem[place="toolbar"]:not(
   outline: 1px dotted;
   -moz-outline-radius: 2.5px;
 }
 
 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
   outline-offset: -5px;
 }
 
+toolbarpaletteitem[place=palette] > toolbarspacer,
+toolbarpaletteitem[place=palette] > toolbarspring,
+toolbarpaletteitem[place=palette] > toolbarseparator {
+  height: 37px;
+}
+
+toolbarpaletteitem[place=palette] > toolbarspacer,
 toolbarpaletteitem[place=palette] > toolbarspring {
   width: 7em;
   min-width: 7em;
   outline: 1px solid;
   outline-offset: -8px;
   opacity: .6;
-  height: 37px;
+}
+
+toolbarpaletteitem[place=palette] > toolbarspacer {
+  width: 3em;
+  min-width: 3em;
 }
 
+toolbarpaletteitem[place=palette] > toolbarseparator {
+  margin: 0;
+}
+
+toolbarpaletteitem[place=palette] > toolbarseparator,
+#navigator-toolbox toolbarseparator {
+  -moz-appearance: none;
+  border-inline-start: 1px solid var(--lwt-toolbar-vertical-separator, hsla(0,0%,62%,.3));
+}
+
+toolbarpaletteitem[place=toolbar] > toolbarspacer,
 toolbarpaletteitem[place=toolbar] > toolbarspring {
   outline: 1px solid;
   outline-offset: -2px;
   opacity: .6;
   margin-top: 5px;
   margin-bottom: 5px;
 }