Bug 1366851 - Flip the sidebar icon depending on if the sidebar is positioned at the start or end of the browser;r=Gijs

MozReview-Commit-ID: Kaobl1Ox2QZ

--HG--
extra : rebase_source : c9979bb5da2cdbf61553394c87f57adac64a3257
This commit is contained in:
Brian Grinstead 2017-06-28 10:15:48 -07:00
parent 658303ff1b
commit 54aa0a0210
5 changed files with 22 additions and 8 deletions

View File

@ -147,10 +147,10 @@ var SidebarUI = {
let boxOrdinal = this._box.ordinal;
this._box.ordinal = appcontent.ordinal;
appcontent.ordinal = boxOrdinal;
// Indicate we've switched ordering to the splitter
this._splitter.setAttribute("overlapend", true);
// Indicate we've switched ordering to the box
this._box.setAttribute("positionend", true);
} else {
this._splitter.removeAttribute("overlapend");
this._box.removeAttribute("positionend");
}
this.hideSwitcherPanel();

View File

@ -33,10 +33,12 @@ add_task(async function() {
let reversePositionButton = document.getElementById("sidebar-reverse-position");
let originalLabel = reversePositionButton.getAttribute("label");
let box = document.getElementById("sidebar-box");
// Default (position: left)
Assert.deepEqual(getBrowserChildrenWithOrdinals(),
EXPECTED_START_ORDINALS, "Correct ordinal (start)");
ok(!box.hasAttribute("positionend"), "Positioned start");
// Moved to right
SidebarUI.reversePosition();
@ -44,11 +46,13 @@ add_task(async function() {
Assert.deepEqual(getBrowserChildrenWithOrdinals(),
EXPECTED_END_ORDINALS, "Correct ordinal (end)");
isnot(reversePositionButton.getAttribute("label"), originalLabel, "Label changed");
ok(box.hasAttribute("positionend"), "Positioned end");
// Moved to back to left
SidebarUI.reversePosition();
SidebarUI.showSwitcherPanel();
Assert.deepEqual(getBrowserChildrenWithOrdinals(),
EXPECTED_START_ORDINALS, "Correct ordinal (start)");
ok(!box.hasAttribute("positionend"), "Positioned start");
is(reversePositionButton.getAttribute("label"), originalLabel, "Label is back to normal");
});

View File

@ -604,10 +604,15 @@ const CustomizableWidgets = [
onCreated(aNode) {
// Add an observer so the button is checked while the sidebar is open
let doc = aNode.ownerDocument;
let obnode = doc.createElementNS(kNSXUL, "observes");
obnode.setAttribute("element", "sidebar-box");
obnode.setAttribute("attribute", "checked");
aNode.appendChild(obnode);
let obChecked = doc.createElementNS(kNSXUL, "observes");
obChecked.setAttribute("element", "sidebar-box");
obChecked.setAttribute("attribute", "checked");
let obPosition = doc.createElementNS(kNSXUL, "observes");
obPosition.setAttribute("element", "sidebar-box");
obPosition.setAttribute("attribute", "positionend");
aNode.appendChild(obChecked);
aNode.appendChild(obPosition);
}
}, {
id: "social-share-button",

View File

@ -23,7 +23,7 @@
position: relative;
}
.sidebar-splitter[overlapend] {
#sidebar-box[positionend] + .sidebar-splitter {
border-inline-end-width: 0;
border-inline-start-width: 1px;
margin-inline-start: 0;

View File

@ -197,6 +197,11 @@ toolbar:not([brighttext]) #bookmarks-menu-button[cui-areatype="toolbar"][starred
list-style-image: url("chrome://browser/skin/sidebars.svg");
}
#sidebar-button[cui-areatype="toolbar"]:-moz-locale-dir(ltr):not([positionend]),
#sidebar-button[cui-areatype="toolbar"]:-moz-locale-dir(rtl)[positionend] {
transform: scaleX(-1);
}
#panic-button[cui-areatype="toolbar"] {
list-style-image: url("chrome://browser/skin/forget.svg");
}