Bug 1016528 - Add settings menu to style editor tool. r=pbrosset

browser/devtools/styleeditor/StyleEditorUI.jsm

@@ -64,7 +64,7 @@ function StyleEditorUI(debuggee, target, panelDoc) {
   this.selectedEditor = null;
   this.savedLocations = {};
 
-  this._updateContextMenu = this._updateContextMenu.bind(this);
+  this._updateOptionsMenu = this._updateOptionsMenu.bind(this);
   this._onStyleSheetCreated = this._onStyleSheetCreated.bind(this);
   this._onNewDocument = this._onNewDocument.bind(this);
   this._onMediaPrefChanged = this._onMediaPrefChanged.bind(this);
@@ -142,36 +142,26 @@ StyleEditorUI.prototype = {
       this._importFromFile(this._mockImportFile || null, this._window);
     }.bind(this));
 
-    this._contextMenu = this._panelDoc.getElementById("sidebar-context");
-    this._contextMenu.addEventListener("popupshowing",
-                                       this._updateContextMenu);
+    this._optionsMenu = this._panelDoc.getElementById("style-editor-options-popup");
+    this._optionsMenu.addEventListener("popupshowing",
+                                       this._updateOptionsMenu);
 
-    this._sourcesItem = this._panelDoc.getElementById("context-origsources");
+    this._sourcesItem = this._panelDoc.getElementById("options-origsources");
     this._sourcesItem.addEventListener("command",
                                        this._toggleOrigSources);
-    this._mediaItem = this._panelDoc.getElementById("context-show-media");
+    this._mediaItem = this._panelDoc.getElementById("options-show-media");
     this._mediaItem.addEventListener("command",
                                      this._toggleMediaSidebar);
   },
 
   /**
-   * Update text of context menu option to reflect current preference
-   * settings
+   * Update options menu items to reflect current preference settings.
    */
-  _updateContextMenu: function() {
-    let sourceString = "showOriginalSources";
-    if (Services.prefs.getBoolPref(PREF_ORIG_SOURCES)) {
-      sourceString = "showCSSSources";
-    }
-    this._sourcesItem.setAttribute("label", _(sourceString + ".label"));
-    this._sourcesItem.setAttribute("accesskey", _(sourceString + ".accesskey"));
-
-    let mediaString = "showMediaSidebar"
-    if (Services.prefs.getBoolPref(PREF_MEDIA_SIDEBAR)) {
-      mediaString = "hideMediaSidebar";
-    }
-    this._mediaItem.setAttribute("label", _(mediaString + ".label"));
-    this._mediaItem.setAttribute("accesskey", _(mediaString + ".accesskey"));
+  _updateOptionsMenu: function() {
+    this._sourcesItem.setAttribute("checked",
+      Services.prefs.getBoolPref(PREF_ORIG_SOURCES));
+    this._mediaItem.setAttribute("checked",
+      Services.prefs.getBoolPref(PREF_MEDIA_SIDEBAR));
   },
 
   /**
@@ -771,6 +761,9 @@ StyleEditorUI.prototype = {
   destroy: function() {
     this._clearStyleSheetEditors();
 
+    this._optionsMenu.removeEventListener("popupshowing",
+                                          this._updateOptionsMenu);
+
     this._prefObserver.off(PREF_ORIG_SOURCES, this._onNewDocument);
     this._prefObserver.off(PREF_MEDIA_SIDEBAR, this._onMediaPrefChanged);
     this._prefObserver.destroy();

browser/devtools/styleeditor/styleeditor.css

@@ -15,6 +15,10 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
   display: block;
 }
 
+.devtools-toolbar > spacer {
+  -moz-box-flex: 1;
+}
+
 .splitview-nav > li,
 .stylesheet-info,
 .stylesheet-more {

browser/devtools/styleeditor/styleeditor.xul

@@ -61,9 +61,16 @@
           key="key_gotoLine"
           command="cmd_gotoLine"/>
     </xul:menupopup>
-    <xul:menupopup id="sidebar-context">
-      <xul:menuitem id="context-origsources"/>
-      <xul:menuitem id="context-show-media"/>
+    <xul:menupopup id="style-editor-options-popup"
+                   position="before_start">
+      <xul:menuitem id="options-origsources"
+                    type="checkbox"
+                    label="&showOriginalSources.label;"
+                    accesskey="&showOriginalSources.accesskey;"/>
+      <xul:menuitem id="options-show-media"
+                    type="checkbox"
+                    label="&showMediaSidebar.label;"
+                    accesskey="&showMediaSidebar.accesskey;"/>
     </xul:menupopup>
   </xul:popupset>
 
@@ -91,6 +98,11 @@
                         accesskey="&importButton.accesskey;"
                         tooltiptext="&importButton.tooltip;"
                         label="&importButton.label;"/>
+            <xul:spacer/>
+            <xul:toolbarbutton id="style-editor-options"
+                        class="devtools-option-toolbarbutton"
+                        tooltiptext="&optionsButton.tooltip;"
+                        popup="style-editor-options-popup"/>
           </xul:toolbar>
         </xul:box>
         <xul:box id="splitview-resizer-target" class="theme-sidebar splitview-nav-container"

browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd

@@ -24,6 +24,24 @@
 <!ENTITY saveButton.tooltip         "Save this style sheet to a file">
 <!ENTITY saveButton.accesskey       "S">
 
+<!ENTITY optionsButton.tooltip      "Style Editor options">
+
+<!-- LOCALIZATION NOTE  (showOriginalSources.label): This is the label on the context
+     menu item to toggle showing original sources in the editor. -->
+<!ENTITY showOriginalSources.label     "Show original sources">
+
+<!-- LOCALIZATION NOTE  (showOriginalSources.accesskey): This is the access key for
+     the menu item to toggle showing original sources in the editor. -->
+<!ENTITY showOriginalSources.accesskey  "o">
+
+<!-- LOCALIZATION NOTE  (showMediaSidebar.label): This is the label on the context
+     menu item to toggle showing @media rule shortcuts in a sidebar. -->
+<!ENTITY showMediaSidebar.label     "Show @media sidebar">
+
+<!-- LOCALIZATION NOTE  (showMediaSidebar.accesskey): This is the access key for
+     the menu item to toggle showing the @media sidebar. -->
+<!ENTITY showMediaSidebar.accesskey     "m">
+
 <!-- LOCALICATION NOTE  (mediaRules.label): This is shown above the list of @media rules
      in each stylesheet editor sidebar. -->
 <!ENTITY mediaRules.label           "@media rules">

browser/locales/en-US/chrome/browser/devtools/styleeditor.properties

@@ -68,38 +68,6 @@ open.accesskey=l
 # conjunction with accel (Command on Mac or Ctrl on other platforms) to Save
 saveStyleSheet.commandkey=S
 
-# LOCALIZATION NOTE  (showOriginalSources.label): This is the label on the context
-# menu item to toggle showing original sources in the editor.
-showOriginalSources.label=Show original sources
-
-# LOCALIZATION NOTE  (showOriginalSources.accesskey): This is the access key for
-# the menu item to toggle showing original sources in the editor.
-showOriginalSources.accesskey=O
-
-# LOCALIZATION NOTE  (showCSSSources.label): This is the label on the context
-# menu item to toggle back to showing only CSS sources in the editor.
-showCSSSources.label=Show CSS sources
-
-# LOCALIZATION NOTE  (showCSSSources.accesskey): This is the access key for the
-# menu item to toggle back to showing only CSS sources in the editor.
-showCSSSources.accesskey=C
-
-# LOCALIZATION NOTE  (showMediaSidebar.label): This is the label on the context
-# menu item to toggle showing @media rule shortcuts in a sidebar.
-showMediaSidebar.label=Show @media sidebar
-
-# LOCALIZATION NOTE  (showMediaSidebar.accesskey): This is the access key for
-# the menu item to toggle showing the @media sidebar.
-showMediaSidebar.accesskey=M
-
-# LOCALIZATION NOTE  (hideMediaSidebar.label): This is the label on the context
-# menu item to stop showing @media rule shortcuts in a sidebar.
-hideMediaSidebar.label=Hide @media sidebar
-
-# LOCALIZATION NOTE  (hideMediaSidebar.accesskey): This is the access key for
-# the menu item to stop showing the @media sidebar.
-hideMediaSidebar.accesskey=H
-
 # LOCALIZATION NOTE (ToolboxStyleEditor.label):
 # This string is displayed in the title of the tab when the style editor is
 # displayed inside the developer tools window and in the Developer Tools Menu.

browser/themes/shared/devtools/styleeditor.css

@@ -119,6 +119,11 @@
   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);