Bug 1424259 - Fix alignment of extension sidebar action icons r?mixedpuppy draft
authorMark Striemer <mstriemer@mozilla.com>
Thu, 11 Jan 2018 22:53:02 -0600
changeset 719696 69b2f221a3c8387854420e402591da7542d74d4a
parent 719416 f20af1b96e110f04e8514a224cf97140f1b08711
child 745880 755ab5dc005acf48adc00affb8379f794e19febe
push id95345
push userbmo:mstriemer@mozilla.com
push dateFri, 12 Jan 2018 16:40:40 +0000
reviewersmixedpuppy
bugs1424259
milestone59.0a1
Bug 1424259 - Fix alignment of extension sidebar action icons r?mixedpuppy MozReview-Commit-ID: 4RQv30imV3B
browser/base/content/browser.css
browser/base/content/browser.xul
browser/components/extensions/ext-sidebarAction.js
browser/themes/shared/sidebar.inc.css
--- 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;
 }