Bug 985308 - Add space and separators to customize mode. r=
MozReview-Commit-ID: 2i5Hh8FsiHT
--- 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;
}