Bug 1025057 - DevTools themes: thin toolbar button follow up - part 2;r=harth

browser/devtools/styleeditor/StyleEditorUI.jsm

@@ -66,7 +66,8 @@ function StyleEditorUI(debuggee, target, panelDoc) {
   this.selectedEditor = null;
   this.savedLocations = {};
 
-  this._updateOptionsMenu = this._updateOptionsMenu.bind(this);
+  this._onOptionsPopupShowing = this._onOptionsPopupShowing.bind(this);
+  this._onOptionsPopupHiding = this._onOptionsPopupHiding.bind(this);
   this._onStyleSheetCreated = this._onStyleSheetCreated.bind(this);
   this._onNewDocument = this._onNewDocument.bind(this);
   this._onMediaPrefChanged = this._onMediaPrefChanged.bind(this);
@@ -144,9 +145,12 @@ StyleEditorUI.prototype = {
       this._importFromFile(this._mockImportFile || null, this._window);
     });
 
+    this._optionsButton = this._panelDoc.getElementById("style-editor-options");
     this._optionsMenu = this._panelDoc.getElementById("style-editor-options-popup");
     this._optionsMenu.addEventListener("popupshowing",
-                                       this._updateOptionsMenu);
+                                       this._onOptionsPopupShowing);
+    this._optionsMenu.addEventListener("popuphiding",
+                                       this._onOptionsPopupHiding);
 
     this._sourcesItem = this._panelDoc.getElementById("options-origsources");
     this._sourcesItem.addEventListener("command",
@@ -160,15 +164,24 @@ StyleEditorUI.prototype = {
   },
 
   /**
+   * Listener handling the 'gear menu' popup showing event.
    * Update options menu items to reflect current preference settings.
    */
-  _updateOptionsMenu: function() {
+  _onOptionsPopupShowing: function() {
+    this._optionsButton.setAttribute("open", "true");
     this._sourcesItem.setAttribute("checked",
       Services.prefs.getBoolPref(PREF_ORIG_SOURCES));
     this._mediaItem.setAttribute("checked",
       Services.prefs.getBoolPref(PREF_MEDIA_SIDEBAR));
   },
 
+  /**
+   * Listener handling the 'gear menu' popup hiding event.
+   */
+  _onOptionsPopupHiding: function() {
+    this._optionsButton.removeAttribute("open");
+  },
+
   /**
    * Refresh editors to reflect the stylesheets in the document.
    *
@@ -814,7 +827,9 @@ StyleEditorUI.prototype = {
     Services.prefs.setIntPref(PREF_NAV_WIDTH, sidebarWidth);
 
     this._optionsMenu.removeEventListener("popupshowing",
-                                          this._updateOptionsMenu);
+                                          this._onOptionsPopupShowing);
+    this._optionsMenu.removeEventListener("popuphiding",
+                                          this._onOptionsPopupHiding);
 
     this._prefObserver.off(PREF_ORIG_SOURCES, this._onNewDocument);
     this._prefObserver.off(PREF_MEDIA_SIDEBAR, this._onMediaPrefChanged);

browser/devtools/styleeditor/styleeditor.xul

@@ -102,7 +102,7 @@
             </xul:hbox>
             <xul:spacer/>
             <xul:toolbarbutton id="style-editor-options"
-                        class="devtools-option-toolbarbutton"
+                        class="devtools-toolbarbutton devtools-option-toolbarbutton"
                         tooltiptext="&optionsButton.tooltip;"
                         popup="style-editor-options-popup"/>
           </xul:toolbar>

browser/themes/shared/devtools/styleeditor.css

@@ -125,11 +125,6 @@
   background-position: -24px 8px;
 }
 
-#style-editor-options {
-  width: 20px;
-  overflow: hidden;
-}
-
 /* Invert all toggle icons but the one in the active row for light theme */
 .theme-light .splitview-nav > li:not(.splitview-active) .stylesheet-enabled {
   filter: url(filters.svg#invert);

browser/themes/shared/devtools/toolbars.inc.css

@@ -25,6 +25,19 @@
   padding: 0 3px;
 }
 
+.devtools-toolbar checkbox {
+  margin: 0 2px;
+  padding: 0;
+}
+.devtools-toolbar checkbox .checkbox-check {
+  margin: 0;
+  padding: 0;
+}
+.devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
+  margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */
+  padding: 0;
+}
+
 /* Toolbar buttons */
 .devtools-menulist,
 .devtools-toolbarbutton {

browser/themes/shared/devtools/widgets.inc.css

@@ -203,6 +203,12 @@
   color: hsl(210,30%,85%);
 }
 
+.breadcrumbs-widget-item > .button-box {
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .breadcrumbs-widget-item:not([checked]) {
   background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
 }