Bug 1016528 - Add settings menu to style editor tool. r=pbrosset
authorHeather Arthur <fayearthur@gmail.com>
Tue, 03 Jun 2014 11:47:00 +0200
changeset 206017 4b0df0f26f0a6984eae18b0603e8121151be8bc2
parent 206016 f3bc97e8396825f5241364b2f78479998f18955a
child 206018 52f6d0a67991ce51edd6303e9911247cb7847039
push id3741
push userasasaki@mozilla.com
push dateMon, 21 Jul 2014 20:25:18 +0000
treeherdermozilla-beta@4d6f46f5af68 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset
bugs1016528
milestone32.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1016528 - Add settings menu to style editor tool. r=pbrosset
browser/devtools/styleeditor/StyleEditorUI.jsm
browser/devtools/styleeditor/styleeditor.css
browser/devtools/styleeditor/styleeditor.xul
browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
browser/themes/shared/devtools/styleeditor.css
--- a/browser/devtools/styleeditor/StyleEditorUI.jsm
+++ b/browser/devtools/styleeditor/StyleEditorUI.jsm
@@ -59,17 +59,17 @@ function StyleEditorUI(debuggee, target,
   this._panelDoc = panelDoc;
   this._window = this._panelDoc.defaultView;
   this._root = this._panelDoc.getElementById("style-editor-chrome");
 
   this.editors = [];
   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);
   this._updateMediaList = this._updateMediaList.bind(this);
   this._clear = this._clear.bind(this);
   this._onError = this._onError.bind(this);
 
   this._prefObserver = new PrefObserver("devtools.styleeditor.");
@@ -137,46 +137,36 @@ StyleEditorUI.prototype = {
     wire(this._view.rootElement, ".style-editor-newButton", function onNew() {
       this._debuggee.addStyleSheet(null).then(this._onStyleSheetCreated);
     }.bind(this));
 
     wire(this._view.rootElement, ".style-editor-importButton", function onImport() {
       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));
   },
 
   /**
    * Refresh editors to reflect the stylesheets in the document.
    *
    * @param {string} event
    *        Event name
    * @param {StyleSheet} styleSheet
@@ -766,13 +756,16 @@ StyleEditorUI.prototype = {
    */
   _jumpToMediaRule: function(rule) {
     this.selectStyleSheet(rule.parentStyleSheet, rule.line - 1, rule.column - 1);
   },
 
   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();
   }
 }
--- a/browser/devtools/styleeditor/styleeditor.css
+++ b/browser/devtools/styleeditor/styleeditor.css
@@ -10,16 +10,20 @@
 .stylesheet-error-message {
   display: none;
 }
 
 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 {
   display: -moz-box;
 }
 
 .stylesheet-details-container {
   -moz-box-flex: 1;
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -56,19 +56,26 @@
       <xul:menuitem id="cMenu_findAgain"/>
       <xul:menuseparator/>
       <xul:menuitem id="se-menu-gotoLine"
           label="&gotoLineCmd.label;"
           accesskey="&gotoLineCmd.accesskey;"
           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>
 
   <xul:commandset id="editMenuCommands"/>
 
   <xul:commandset id="sourceEditorCommands">
     <xul:command id="cmd_gotoLine" oncommand="goDoCommand('cmd_gotoLine')"/>
     <xul:command id="cmd_find" oncommand="goDoCommand('cmd_find')"/>
@@ -86,16 +93,21 @@
             <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
                         accesskey="&newButton.accesskey;"
                         tooltiptext="&newButton.tooltip;"
                         label="&newButton.label;"/>
             <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
                         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"
                 persist="height">
           <ol class="splitview-nav" tabindex="0"></ol>
           <div class="splitview-nav placeholder empty">
             <p><strong>&noStyleSheet.label;</strong></p>
             <p>&noStyleSheet-tip-start.label;
--- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
@@ -19,16 +19,34 @@
 <!ENTITY importButton.accesskey     "I">
 
 <!ENTITY visibilityToggle.tooltip   "Toggle style sheet visibility">
 
 <!ENTITY saveButton.label           "Save">
 <!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">
 
 <!ENTITY editorTextbox.placeholder  "Type CSS here.">
 
 <!-- LOCALICATION NOTE  (noStyleSheet.label): This is shown when a page has no
      stylesheet. -->
--- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
@@ -63,48 +63,16 @@ open.commandkey=VK_F7
 # LOCALIZATION NOTE (open.accesskey): The access key used to open the style
 # editor.
 open.accesskey=l
 
 # LOCALIZATION NOTE  (saveStyleSheet.commandkey): This the key to use in
 # 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.
 ToolboxStyleEditor.label=Style Editor
 
 # LOCALIZATION NOTE (ToolboxStyleEditor.tooltip2):
 # This string is displayed in the tooltip of the tab when the style editor is
 # displayed inside the developer tools window.
--- a/browser/themes/shared/devtools/styleeditor.css
+++ b/browser/themes/shared/devtools/styleeditor.css
@@ -114,16 +114,21 @@
     background-image: url(itemToggle@2x.png);
   }
 }
 
 .disabled > .stylesheet-enabled {
   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);
 }
 
 .splitview-nav > li > .stylesheet-enabled:focus,
 .splitview-nav > li:hover > .stylesheet-enabled {
   outline: 0;