From 5995cc68090e128faaa028b27bdcd49f2bddc674 Mon Sep 17 00:00:00 2001 From: Heather Arthur Date: Tue, 3 Jun 2014 11:47:00 +0200 Subject: [PATCH] Bug 1016528 - Add settings menu to style editor tool. r=pbrosset --- .../devtools/styleeditor/StyleEditorUI.jsm | 37 ++++++++----------- browser/devtools/styleeditor/styleeditor.css | 4 ++ browser/devtools/styleeditor/styleeditor.xul | 18 +++++++-- .../chrome/browser/devtools/styleeditor.dtd | 18 +++++++++ .../browser/devtools/styleeditor.properties | 32 ---------------- .../themes/shared/devtools/styleeditor.css | 5 +++ 6 files changed, 57 insertions(+), 57 deletions(-) diff --git a/browser/devtools/styleeditor/StyleEditorUI.jsm b/browser/devtools/styleeditor/StyleEditorUI.jsm index 9ad06fb50939..df28eea64c74 100644 --- a/browser/devtools/styleeditor/StyleEditorUI.jsm +++ b/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(); diff --git a/browser/devtools/styleeditor/styleeditor.css b/browser/devtools/styleeditor/styleeditor.css index 3574da0b0e4f..e8de73c3384b 100644 --- a/browser/devtools/styleeditor/styleeditor.css +++ b/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 { diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul index 5fea157fd3a7..0e59e59dd00b 100644 --- a/browser/devtools/styleeditor/styleeditor.xul +++ b/browser/devtools/styleeditor/styleeditor.xul @@ -61,9 +61,16 @@ key="key_gotoLine" command="cmd_gotoLine"/> - - - + + + @@ -91,6 +98,11 @@ accesskey="&importButton.accesskey;" tooltiptext="&importButton.tooltip;" label="&importButton.label;"/> + + + + + + + + + + + + + + + + diff --git a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties index cd4483c2163e..1d7d64521992 100644 --- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties +++ b/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. diff --git a/browser/themes/shared/devtools/styleeditor.css b/browser/themes/shared/devtools/styleeditor.css index fae3315ed188..11d293438bbe 100644 --- a/browser/themes/shared/devtools/styleeditor.css +++ b/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);