Bug 1424259 - Fix alignment of extension sidebar action icons r?mixedpuppy
MozReview-Commit-ID: 4RQv30imV3B
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -357,17 +357,17 @@ toolbarpaletteitem {
}
.webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme-darktext,
toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-darktext {
list-style-image: var(--webextension-menupanel-image-dark, inherit);
}
.webextension-menuitem {
- list-style-image: var(--webextension-menuitem-image, inherit);
+ list-style-image: var(--webextension-menuitem-image, inherit) !important;
}
}
@media (min-resolution: 1.1dppx) {
.webextension-browser-action {
list-style-image: var(--webextension-toolbar-image-2x, inherit);
}
@@ -389,17 +389,17 @@ toolbarpaletteitem {
}
.webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme-darktext,
toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-darktext {
list-style-image: var(--webextension-menupanel-image-2x-dark, inherit);
}
.webextension-menuitem {
- list-style-image: var(--webextension-menuitem-image-2x, inherit);
+ list-style-image: var(--webextension-menuitem-image-2x, inherit) !important;
}
}
toolbarbutton.webextension-menuitem > .toolbarbutton-icon {
width: 16px;
height: 16px;
}
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -291,18 +291,18 @@
<toolbarbutton id="sidebar-switcher-tabs"
label="&syncedTabs.sidebar.label;"
class="subviewbutton subviewbutton-iconic"
observes="viewTabsSidebar"
oncommand="SidebarUI.show('viewTabsSidebar');">
<observes element="viewTabsSidebar" attribute="checked"/>
</toolbarbutton>
<toolbarseparator/>
- <vbox id="sidebar-extensions"></vbox>
- <toolbarseparator/>
+ <!-- Extension toolbarbuttons go here. -->
+ <toolbarseparator id="sidebar-extensions-separator"/>
<toolbarbutton id="sidebar-reverse-position"
class="subviewbutton"
oncommand="SidebarUI.reversePosition()"/>
<toolbarseparator/>
<toolbarbutton label="&sidebarMenuClose.label;"
class="subviewbutton"
oncommand="SidebarUI.hide()"/>
</panel>
--- a/browser/components/extensions/ext-sidebarAction.js
+++ b/browser/components/extensions/ext-sidebarAction.js
@@ -183,17 +183,18 @@ this.sidebarAction = class extends Exten
let toolbarbutton = document.createElementNS(XUL_NS, "toolbarbutton");
toolbarbutton.setAttribute("id", this.buttonId);
toolbarbutton.setAttribute("observes", this.id);
toolbarbutton.setAttribute("class", "subviewbutton subviewbutton-iconic webextension-menuitem");
this.setMenuIcon(toolbarbutton, details);
document.getElementById("mainBroadcasterSet").appendChild(broadcaster);
document.getElementById("viewSidebarMenu").appendChild(menuitem);
- document.getElementById("sidebar-extensions").appendChild(toolbarbutton);
+ let separator = document.getElementById("sidebar-extensions-separator");
+ separator.parentNode.insertBefore(toolbarbutton, separator);
return menuitem;
}
setMenuIcon(menuitem, details) {
let getIcon = size => IconDetails.escapeUrl(
IconDetails.getPreferredIcon(details.icon, this.extension, size).icon);
--- a/browser/themes/shared/sidebar.inc.css
+++ b/browser/themes/shared/sidebar.inc.css
@@ -91,17 +91,17 @@
#sidebar-switcher-target.active:-moz-lwtheme {
background: hsla(240, 5%, 5%, 0.15);
}
#sidebarMenu-popup .subviewbutton {
min-width: 190px;
}
-#sidebar-extensions:empty + toolbarseparator {
+toolbarseparator + #sidebar-extensions-separator {
display: none;
}
#sidebarMenu-popup > .subviewbutton[checked="true"] {
list-style-image: none;
background: url(chrome://browser/skin/check.svg) no-repeat transparent;
background-size: 11px 11px;
}