Bug 1424259 - Fix alignment of extension sidebar action icons r=mixedpuppy

MozReview-Commit-ID: 4RQv30imV3B

--HG--
extra : rebase_source : 03a60c98f7d64a4143c4ea76378bc95f35d3106c

browser/base/content/browser.css

@@ -362,7 +362,7 @@ toolbarpaletteitem {
   }
 
   .webextension-menuitem {
-    list-style-image: var(--webextension-menuitem-image, inherit);
+    list-style-image: var(--webextension-menuitem-image, inherit) !important;
   }
 }
 
@@ -394,7 +394,7 @@ toolbarpaletteitem {
   }
 
   .webextension-menuitem {
-    list-style-image: var(--webextension-menuitem-image-2x, inherit);
+    list-style-image: var(--webextension-menuitem-image-2x, inherit) !important;
   }
 }
 

browser/base/content/browser.xul

@@ -296,8 +296,8 @@
         <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()"/>

browser/components/extensions/ext-sidebarAction.js

@@ -189,7 +189,8 @@ this.sidebarAction = class extends ExtensionAPI {
 
     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;
   }

browser/themes/shared/sidebar.inc.css

@@ -96,7 +96,7 @@
   min-width: 190px;
 }
 
-#sidebar-extensions:empty + toolbarseparator {
+toolbarseparator + #sidebar-extensions-separator {
   display: none;
 }