Bug 918226 - expose 'work offline' in the developer subview, r=mikedeboer

browser/components/customizableui/src/CustomizableWidgets.jsm

@@ -211,10 +211,14 @@ const CustomizableWidgets = [{
       let items = doc.getElementById("PanelUI-developerItems");
       let menu = doc.getElementById("menuWebDeveloperPopup");
       let attrs = ["oncommand", "onclick", "label", "key", "disabled",
-                   "command"];
+                   "command", "observes"];
 
       let fragment = doc.createDocumentFragment();
-      for (let node of menu.children) {
+      let itemsToDisplay = [...menu.children];
+      // Hardcode the addition of the "work offline" menuitem at the bottom:
+      itemsToDisplay.push({localName: "menuseparator", getAttribute: () => {}});
+      itemsToDisplay.push(doc.getElementById("goOfflineMenuitem"));
+      for (let node of itemsToDisplay) {
         if (node.hidden)
           continue;
 
@@ -223,6 +227,7 @@ const CustomizableWidgets = [{
           item = doc.createElementNS(kNSXUL, "menuseparator");
         } else if (node.localName == "menuitem") {
           item = doc.createElementNS(kNSXUL, "toolbarbutton");
+          item.setAttribute("tabindex", "0");
         } else {
           continue;
         }
@@ -231,7 +236,6 @@ const CustomizableWidgets = [{
           if (attrVal)
             item.setAttribute(attr, attrVal);
         }
-        item.setAttribute("tabindex", "0");
         fragment.appendChild(item);
       }
       items.appendChild(fragment);

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -5,8 +5,8 @@
 %filter substitution
 %define menuPanelWidth 21em
 %define exitSubviewGutterWidth 38px
-%define buttonStateHover :not(:-moz-any([disabled],[checked],[open],:active)):hover
-%define buttonStateActive :not([disabled]):-moz-any([open],[checked],:hover:active)
+%define buttonStateHover :not(:-moz-any([disabled],[checked="true"],[open],:active)):hover
+%define buttonStateActive :not([disabled]):-moz-any([open],[checked="true"],:hover:active)
 
 %include ../browser.inc
 
@@ -516,22 +516,34 @@ toolbarpaletteitem[place="palette"] > #search-container {
   min-height: 28px;
 }
 
+#PanelUI-developerItems > toolbarbutton[checked="true"],
+#PanelUI-bookmarks > toolbarbutton[checked="true"],
 .PanelUI-characterEncodingView-list > toolbarbutton[current] {
-  -moz-padding-start: 2px;
+  -moz-padding-start: 4px;
 }
 
+#PanelUI-developerItems > toolbarbutton[checked="true"] > .toolbarbutton-text,
+#PanelUI-bookmarks > toolbarbutton[checked="true"] > .toolbarbutton-text,
 .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text,
 #customizationui-widget-panel .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text {
   -moz-padding-start: 0px;
 }
 
-#BMB_bookmarksPopup > menuitem[checked]::before,
+#BMB_bookmarksPopup > menuitem[checked="true"]::before,
+#PanelUI-bookmarks > toolbarbutton[checked="true"]::before,
+#PanelUI-developerItems > toolbarbutton[checked="true"]::before,
 .PanelUI-characterEncodingView-list > toolbarbutton[current]::before {
   content: "✓";
   display: -moz-box;
   width: 12px;
 }
 
-#BMB_bookmarksPopup > menuitem[checked] > .menu-iconic-left {
+#PanelUI-bookmarks > toolbarbutton[checked="true"]::before,
+#PanelUI-developerItems > toolbarbutton[checked="true"]::before,
+.PanelUI-characterEncodingView-list > toolbarbutton[current]::before {
+  -moz-margin-end: -2px;
+}
+
+#BMB_bookmarksPopup > menuitem[checked="true"] > .menu-iconic-left {
   display: none;
 }