commit 0bed1d181d0839f058e311c01dbdb263a96270fd Author: Richard Pospesel <richard@torproject.org> Date: Tue Jul 30 11:32:31 2019 -0700 Bug 31251: Security Level button UI polish Changed the anchor to toolbarbutton's anonymous child toolbarbutton-icon xul:image element so that the security level panel has the same vertical alignment as other built-in toolbar buttons. Also needed to add the badged-button class to our toolbar button for this to align properly. Now setting and deleting the "open" attribute from the toolbarbutton element so that it maintains the "pushed" style while the security level panel is open. Changed the toolbarbutton's oncommand callback to onmousedown to match the behaviour of firefox's other toolbarbuttons. Security level panel now opens on mouse press rather than on mouse press and release. Slightly re-arranged the ordering of the SecurityLevelPanel object's method definitions so that callbacks appear in a contiguous block to better match the other objects defined in securityLevel.js Removed unnecessary async modifier from SecurityLevelPanel.openAdvancedSecuritySettings(). Fixed a few typos, improved comments, and removed trailing whitespace. --- .../securitylevel/content/securityLevel.js | 92 ++++++++++++++++------ .../content/securityLevelButton.inc.xul | 4 +- .../content/securityLevelPanel.inc.xul | 5 +- 3 files changed, 73 insertions(+), 28 deletions(-) diff --git a/browser/components/securitylevel/content/securityLevel.js b/browser/components/securitylevel/content/securityLevel.js index e37f2d49175b..25f6423bc6d3 100644 --- a/browser/components/securitylevel/content/securityLevel.js +++ b/browser/components/securitylevel/content/securityLevel.js @@ -124,7 +124,7 @@ const SecurityLevelPrefs = { set securityCustom(val) { Services.prefs.setBoolPref(this.security_custom_pref, val); }, -}; +}; /* Security Level Prefs */ /* Security Level Button Code @@ -134,6 +134,8 @@ const SecurityLevelPrefs = { const SecurityLevelButton = { _securityPrefsBranch : null, + _button : null, + _anchor : null, _populateXUL : function(securityLevelButton) { if (securityLevelButton != null) { @@ -164,11 +166,38 @@ const SecurityLevelButton = { } }, + get button() { + if (this._button) { + return this._button; + } + + let button = document.getElementById("security-level-button"); + if (!button) { + return null; + } + + return this._button = button; + }, + + get anchor() { + if (this._anchor) { + return this._anchor; + } + + let anchor = document.getAnonymousElementByAttribute(this.button, "class", + "toolbarbutton-icon"); + if (!anchor) { + return null; + } + + anchor.setAttribute("consumeanchor", SecurityLevelButton.button.id); + return this._anchor = anchor; + }, + init : function() { // set the initial class based off of the current pref - let button = document.getElementById("security-level-button"); - this._populateXUL(button); - this._configUIFromPrefs(button); + this._populateXUL(this.button); + this._configUIFromPrefs(this.button); this._securityPrefsBranch = Services.prefs.getBranch("extensions.torbutton."); this._securityPrefsBranch.addObserver("", this, false); @@ -191,13 +220,13 @@ const SecurityLevelButton = { switch(topic) { case "nsPref:changed": if (data == "security_slider") { - this._configUIFromPrefs(document.getElementById("security-level-button")); + this._configUIFromPrefs(this.button); } break; } }, - // callbacks for entering the 'Customize Firefox' screen to set icon + // callback for entering the 'Customize Firefox' screen to set icon onCustomizeStart : function(window) { let navigatorToolbox = document.getElementById("navigator-toolbox"); let button = navigatorToolbox.palette.querySelector("#security-level-button"); @@ -210,14 +239,20 @@ const SecurityLevelButton = { if (aNode.id == "security-level-button" && !aWasRemoval) { this._populateXUL(aNode); this._configUIFromPrefs(aNode); + // clear out our cached elements as they seem to be recreated when the UI is customized + delete this._button; + delete this._anchor; } }, // when toolbar button is pressed - onCommand : function(anchor, event) { - SecurityLevelPanel.show(anchor); + onCommand : function(event) { + // we need to set this attribute for the button to be shaded correctly to look like it is pressed + // while the security level panel is open + this.button.setAttribute("open", "true"); + SecurityLevelPanel.show(event); }, -}; +}; /* Security Level Button */ /* Security Level Panel Code @@ -305,19 +340,16 @@ const SecurityLevelPanel = { this._securityPrefsBranch = null; }, - show : function(anchor) { + show : function() { // we have to defer this until after the browser has finished init'ing before // we can populate the panel if (!this._populated) { this._populateXUL(); } - // save off anchor in case we want to show from our own code - this._anchor = anchor; - let panel = document.getElementById("securityLevel-panel"); panel.hidden = false; - PanelMultiView.openPopup(panel, anchor, "bottomcenter topright", + PanelMultiView.openPopup(panel, SecurityLevelButton.anchor, "bottomcenter topright", 0, 0, false, null).catch(Cu.reportError); }, @@ -326,7 +358,19 @@ const SecurityLevelPanel = { PanelMultiView.hidePopup(panel); }, - // when prefs change + restoreDefaults : function() { + SecurityLevelPrefs.securityCustom = false; + // hide and reshow so that layout re-renders properly + this.hide(); + this.show(this._anchor); + }, + + openAdvancedSecuritySettings : function() { + openPreferences("privacy-securitylevel"); + this.hide(); + }, + + // callback when prefs change observe : function(subject, topic, data) { switch(topic) { case "nsPref:changed": @@ -337,18 +381,16 @@ const SecurityLevelPanel = { } }, - restoreDefaults : function() { - SecurityLevelPrefs.securityCustom = false; - // hide and reshow so that layout re-renders properly - this.hide(); - this.show(this._anchor); + // callback when the panel is displayed + onPopupShown : function(event) { + SecurityLevelButton.button.setAttribute("open", "true"); }, - openAdvancedSecuritySettings : async function() { - openPreferences("privacy-securitylevel"); - this.hide(); + // callback when the panel is hidden + onPopupHidden : function(event) { + SecurityLevelButton.button.removeAttribute("open"); } -}; +}; /* Security Level Panel */ /* Security Level Preferences Code @@ -507,7 +549,7 @@ const SecurityLevelPreferences = restoreDefaults : function() { SecurityLevelPrefs.securityCustom = false; }, -}; +}; /* Security Level Prefereces */ Object.defineProperty(this, "SecurityLevelButton", { value: SecurityLevelButton, diff --git a/browser/components/securitylevel/content/securityLevelButton.inc.xul b/browser/components/securitylevel/content/securityLevelButton.inc.xul index 4ad26f4142bd..579a55f46d4a 100644 --- a/browser/components/securitylevel/content/securityLevelButton.inc.xul +++ b/browser/components/securitylevel/content/securityLevelButton.inc.xul @@ -1,5 +1,5 @@ -<toolbarbutton id="security-level-button" class="toolbarbutton-1 chromeclass-toolbar-additional" +<toolbarbutton id="security-level-button" class="toolbarbutton-1 chromeclass-toolbar-additional badged-button" removable="true" - oncommand="SecurityLevelButton.onCommand(this, event);" + onmousedown="SecurityLevelButton.onCommand();" closemenu="none" cui-areatype="toolbar"/> diff --git a/browser/components/securitylevel/content/securityLevelPanel.inc.xul b/browser/components/securitylevel/content/securityLevelPanel.inc.xul index 532e8dd98b32..6a00e811a6ac 100644 --- a/browser/components/securitylevel/content/securityLevelPanel.inc.xul +++ b/browser/components/securitylevel/content/securityLevelPanel.inc.xul @@ -3,7 +3,10 @@ type="arrow" orient="vertical" level="top" - hidden="true"> + hidden="true" + onpopupshown="SecurityLevelPanel.onPopupShown(event);" + onpopuphidden="SecurityLevelPanel.onPopupHidden(event);" + > <panelmultiview mainViewId="securityLevel-panelview"> <panelview id="securityLevel-panelview" descriptionheightworkaround="true"> <vbox class="panel-subview-body">