commit 4282cea750761d67dd55a8753df4370cba156d56 Author: Richard Pospesel richard@torproject.org Date: Thu Sep 16 16:11:33 2021 -0500

fixup! Bug 25658: Replace security slider with security level UI --- .../securitylevel/content/securityLevel.js | 86 +++++++++++------- .../securitylevel/content/securityLevelButton.css | 21 +++-- .../securitylevel/content/securityLevelButton.svg | 21 ----- .../securitylevel/content/securityLevelIcon.svg | 40 +++++++++ .../securitylevel/content/securityLevelPanel.css | 100 ++++++++++----------- .../content/securityLevelPanel.inc.xhtml | 67 ++++++++------ .../content/securityLevelPreferences.css | 14 ++- browser/components/securitylevel/jar.mn | 2 +- browser/modules/TorStrings.jsm | 4 + .../themes/shared/customizableui/panelUI.inc.css | 3 +- 10 files changed, 208 insertions(+), 150 deletions(-)

diff --git a/browser/components/securitylevel/content/securityLevel.js b/browser/components/securitylevel/content/securityLevel.js index b47d0cfb545e..8b8babe5b58e 100644 --- a/browser/components/securitylevel/content/securityLevel.js +++ b/browser/components/securitylevel/content/securityLevel.js @@ -73,19 +73,19 @@ const SecurityLevelButton = { _configUIFromPrefs : function(securityLevelButton) { if (securityLevelButton != null) { let securitySlider = SecurityLevelPrefs.securitySlider; - let classList = securityLevelButton.classList; - classList.remove("standard", "safer", "safest"); + securityLevelButton.removeAttribute("level"); + const securityCustom = SecurityLevelPrefs.securityCustom; switch(securitySlider) { case 4: - classList.add("standard"); + securityLevelButton.setAttribute("level", `standard${securityCustom ? "_custom" : ""}`); securityLevelButton.setAttribute("tooltiptext", TorStrings.securityLevel.standard.tooltip); break; case 2: - classList.add("safer"); + securityLevelButton.setAttribute("level", `safer${securityCustom ? "_custom" : ""}`); securityLevelButton.setAttribute("tooltiptext", TorStrings.securityLevel.safer.tooltip); break; case 1: - classList.add("safest"); + securityLevelButton.setAttribute("level", `safest${securityCustom ? "_custom" : ""}`); securityLevelButton.setAttribute("tooltiptext", TorStrings.securityLevel.safest.tooltip); break; } @@ -136,7 +136,7 @@ const SecurityLevelButton = { observe : function(subject, topic, data) { switch(topic) { case "nsPref:changed": - if (data == "security_slider") { + if (data === "security_slider" || data === "security_custom") { this._configUIFromPrefs(this.button); } break; @@ -166,9 +166,13 @@ const SecurityLevelButton = { // Library, and the Hamburger menus. Using oncommand alone would result in only getting fired // after onclick, which is mousedown followed by mouseup. onCommand : function(aEvent) { - // snippet stolen from /browser/components/downloads/indicator.js DownloadsIndicatorView.onCommand(evt) + // snippet borrowed from /browser/components/downloads/content/indicator.js DownloadsIndicatorView.onCommand(evt) if ( - (aEvent.type == "mousedown" && aEvent.button != 0) || + // On Mac, ctrl-click will send a context menu event from the widget, so + // we don't want to bring up the panel when ctrl key is pressed. + (aEvent.type == "mousedown" && + (aEvent.button != 0 || + (AppConstants.platform == "macosx" && aEvent.ctrlKey))) || (aEvent.type == "keypress" && aEvent.key != " " && aEvent.key != "Enter") ) { return; @@ -178,6 +182,7 @@ const SecurityLevelButton = { // while the security level panel is open this.button.setAttribute("open", "true"); SecurityLevelPanel.show(); + aEvent.stopPropagation(); }, }; /* Security Level Button */

@@ -193,25 +198,42 @@ const SecurityLevelPanel = { _anchor : null, _populated : false,

+ _selectors: Object.freeze({ + panel: "panel#securityLevel-panel", + icon: "vbox#securityLevel-vbox>vbox", + header: "h1#securityLevel-header", + level: "label#securityLevel-level", + custom: "label#securityLevel-custom", + summary: "description#securityLevel-summary", + learnMore: "label#securityLevel-learnMore", + restoreDefaults: "button#securityLevel-restoreDefaults", + advancedSecuritySettings: "button#securityLevel-advancedSecuritySettings", + }), + _populateXUL : function() { - // get the panel elements we need to populate - let panelview = document.getElementById("securityLevel-panelview"); - let labelHeader = panelview.querySelector("#securityLevel-header"); - let labelCustomWarning = panelview.querySelector("#securityLevel-customWarning") - let labelLearnMore = panelview.querySelector("#securityLevel-learnMore"); - let buttonRestoreDefaults = panelview.querySelector("#securityLevel-restoreDefaults"); - let buttonAdvancedSecuritySettings = panelview.querySelector("#securityLevel-advancedSecuritySettings"); - - labelHeader.setAttribute("value", TorStrings.securityLevel.securityLevel); - labelCustomWarning.setAttribute("value", TorStrings.securityLevel.customWarning); - labelLearnMore.setAttribute("value", TorStrings.securityLevel.learnMore); - labelLearnMore.setAttribute("href", TorStrings.securityLevel.learnMoreURL); - buttonRestoreDefaults.setAttribute("label", TorStrings.securityLevel.restoreDefaults); - buttonAdvancedSecuritySettings.setAttribute("label", TorStrings.securityLevel.advancedSecuritySettings); + let selectors = this._selectors; + + this._elements = { + panel: document.querySelector(selectors.panel), + icon: document.querySelector(selectors.icon), + header: document.querySelector(selectors.header), + levelLabel: document.querySelector(selectors.level), + customLabel: document.querySelector(selectors.custom), + summaryDescription: document.querySelector(selectors.summary), + learnMoreLabel: document.querySelector(selectors.learnMore), + restoreDefaultsButton: document.querySelector(selectors.restoreDefaults), + changeButton: document.querySelector(selectors.advancedSecuritySettings), + }; + let elements = this._elements;

- // rest of the XUL is set based on security prefs - this._configUIFromPrefs(); + elements.header.textContent = TorStrings.securityLevel.securityLevel; + elements.customLabel.setAttribute("value", TorStrings.securityLevel.customWarning); + elements.learnMoreLabel.setAttribute("value", TorStrings.securityLevel.learnMore); + elements.learnMoreLabel.setAttribute("href", TorStrings.securityLevel.learnMoreURL); + elements.restoreDefaultsButton.setAttribute("label", TorStrings.securityLevel.restoreDefaults); + elements.changeButton.setAttribute("label", TorStrings.securityLevel.change);

+ this._configUIFromPrefs(); this._populated = true; },

@@ -221,12 +243,13 @@ const SecurityLevelPanel = { let securityCustom = SecurityLevelPrefs.securityCustom;

// get the panel elements we need to populate - let panelview = document.getElementById("securityLevel-panelview"); - let labelLevel = panelview.querySelector("#securityLevel-level"); - let labelCustomWarning = panelview.querySelector("#securityLevel-customWarning") - let summary = panelview.querySelector("#securityLevel-summary"); - let buttonRestoreDefaults = panelview.querySelector("#securityLevel-restoreDefaults"); - let buttonAdvancedSecuritySettings = panelview.querySelector("#securityLevel-advancedSecuritySettings"); + let elements = this._elements; + let icon = elements.icon; + let labelLevel = elements.levelLabel; + let labelCustomWarning = elements.customLabel; + let summary = elements.summaryDescription; + let buttonRestoreDefaults = elements.restoreDefaultsButton; + let buttonAdvancedSecuritySettings = elements.changeButton;

// only visible when user is using custom settings labelCustomWarning.hidden = !securityCustom; @@ -236,16 +259,19 @@ const SecurityLevelPanel = { switch(securitySlider) { // standard case 4: + icon.setAttribute("level", "standard"); labelLevel.setAttribute("value", TorStrings.securityLevel.standard.level); summary.textContent = TorStrings.securityLevel.standard.summary; break; // safer case 2: + icon.setAttribute("level", "safer"); labelLevel.setAttribute("value", TorStrings.securityLevel.safer.level); summary.textContent = TorStrings.securityLevel.safer.summary; break; // safest case 1: + icon.setAttribute("level", "safest"); labelLevel.setAttribute("value", TorStrings.securityLevel.safest.level); summary.textContent = TorStrings.securityLevel.safest.summary; break; diff --git a/browser/components/securitylevel/content/securityLevelButton.css b/browser/components/securitylevel/content/securityLevelButton.css index 81f2365bae28..38701250e9c9 100644 --- a/browser/components/securitylevel/content/securityLevelButton.css +++ b/browser/components/securitylevel/content/securityLevelButton.css @@ -1,9 +1,18 @@ -toolbarbutton#security-level-button.standard { - list-style-image: url("chrome://browser/content/securitylevel/securityLevelButton.svg#standard"); +toolbarbutton#security-level-button[level="standard"] { + list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard"); } -toolbarbutton#security-level-button.safer { - list-style-image: url("chrome://browser/content/securitylevel/securityLevelButton.svg#safer"); +toolbarbutton#security-level-button[level="safer"] { + list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer"); } -toolbarbutton#security-level-button.safest { - list-style-image: url("chrome://browser/content/securitylevel/securityLevelButton.svg#safest"); +toolbarbutton#security-level-button[level="safest"] { + list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest"); } +toolbarbutton#security-level-button[level="standard_custom"] { + list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard_custom"); +} +toolbarbutton#security-level-button[level="safer_custom"] { + list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer_custom"); +} +toolbarbutton#security-level-button[level="safest_custom"] { + list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest_custom"); +} \ No newline at end of file diff --git a/browser/components/securitylevel/content/securityLevelButton.svg b/browser/components/securitylevel/content/securityLevelButton.svg deleted file mode 100644 index 8535cdcc531e..000000000000 --- a/browser/components/securitylevel/content/securityLevelButton.svg +++ /dev/null @@ -1,21 +0,0 @@ -<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <style> - use:not(:target) { - display: none; - } - </style> - <defs> - <g id="standard_icon" stroke="none" stroke-width="1"> - <path d="M7.0 2.16583509C7.0 2.16583509 2.0 4.24375717 2.0 4.24375717C2.0 4.24375717 2.0 7.27272727 2.0 7.27272727C2.0 10.2413541 4.13435329 13.0576771 7.0 13.9315843C9.8656467 13.0576771 12.0 10.2413541 12.0 7.27272727C12.0 7.27272727 12.0 4.24375717 12.0 4.24375717C12.0 4.24375717 7.0 2.16583509 7.0 2.16583509C7.0 2.16583509 7.0 2.16583509 7.0 2.16583509M7.0 0.0C7.0 0.0 14.0 2.90909091 14.0 2.90909091C14.0 2.90909091 14.0 7.27272727 14.0 7.27272727C14.0 11.3090909 11.0133333 15.0836364 7.0 16.0C2.98666667 15.0836364 0.0 11.3090909 0.0 7.27272727C0.0 7.27272727 0.0 2.90909091 0.0 2.90909091C0.0 2.90909091 7.0 0.0 7.0 0.0C7.0 0.0 7.0 0.0 7.0 0.0" /> - </g> - <g id="safer_icon" stroke="none" stroke-width="1"> - <path fill-rule="nonzero" d="M7.0 2.1658351C7.0 13.931584 7.0 2.1658351 7.0 13.931584C9.8656467 13.057677 12.0 10.241354 12.0 7.2727273C12.0 7.2727273 12.0 4.2437572 12.0 4.2437572C12.0 4.2437572 7.0 2.1658351 7.0 2.1658351C7.0 2.1658351 7.0 2.1658351 7.0 2.1658351M7.0 0.0C7.0 0.0 14.0 2.9090909 14.0 2.9090909C14.0 2.9090909 14.0 7.2727273 14.0 7.2727273C14.0 11.309091 11.013333 15.083636 7.0 16.0C2.9866667 15.083636 0.0 11.309091 0.0 7.2727273C0.0 7.2727273 0.0 2.9090909 0.0 2.9090909C0.0 2.9090909 7.0 0.0 7.0 0.0"/> - </g> - <g id="safest_icon" stroke="none" stroke-width="1"> - <path d="M7.0 0.0C7.0 0.0 14.0 2.90909091 14.0 2.90909091C14.0 2.90909091 14.0 7.27272727 14.0 7.27272727C14.0 11.3090909 11.0133333 15.0836364 7.0 16.0C2.98666667 15.0836364 0.0 11.3090909 0.0 7.27272727C0.0 7.27272727 0.0 2.90909091 0.0 2.90909091C0.0 2.90909091 7.0 0.0 7.0 0.0C7.0 0.0 7.0 0.0 7.0 0.0" /> - </g> - </defs> - <use id="standard" fill="context-fill" fill-opacity="context-fill-opacity" href="#standard_icon" /> - <use id="safer" fill="context-fill" fill-opacity="context-fill-opacity" href="#safer_icon" /> - <use id="safest" fill="context-fill" fill-opacity="context-fill-opacity" href="#safest_icon" /> -</svg> diff --git a/browser/components/securitylevel/content/securityLevelIcon.svg b/browser/components/securitylevel/content/securityLevelIcon.svg new file mode 100644 index 000000000000..38cdbcb68afc --- /dev/null +++ b/browser/components/securitylevel/content/securityLevelIcon.svg @@ -0,0 +1,40 @@ +<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <style> + use:not(:target) { + display: none; + } + </style> + <defs> + <g id="standard_icon" stroke="none" stroke-width="1"> + <path clip-rule="evenodd" d="m8.49614.283505c-.30743-.175675-.68485-.175675-.99228.000001l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 4.0133-.9164 7-6 7-10v-1.41968c0-.35886-.1923-.6902-.5039-.86824zm-.49614 1.216495-5.75 3.28571v1.2746c0 1.71749.65238 3.7522 1.78726 5.46629 1.07287 1.6204 2.47498 2.8062 3.96274 3.2425 1.48776-.4363 2.8899-1.6221 3.9627-3.2425 1.1349-1.71409 1.7873-3.7488 1.7873-5.46629v-1.2746z" fill-rule="evenodd" /> + </g> + <g id="safer_icon" stroke="none" stroke-width="1"> + <path clip-rule="evenodd" d="m8.49614.283505c-.30743-.175675-.68485-.175675-.99228.000001l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 4.0133-.9164 7-6 7-10v-1.41968c0-.35886-.1923-.6902-.5039-.86824zm-.49614 1.216495-5.75 3.28571v1.2746c0 1.71749.65238 3.7522 1.78726 5.46629 1.07287 1.6204 2.47498 2.8062 3.96274 3.2425 1.48776-.4363 2.8899-1.6221 3.9627-3.2425 1.1349-1.71409 1.7873-3.7488 1.7873-5.46629v-1.2746z" fill-rule="evenodd"/> + <path d="m3.5 6.12062v-.40411c0-.08972.04807-.17255.12597-.21706l4-2.28572c.16666-.09523.37403.02511.37403.21707v10.0766c-1.01204-.408-2.054-1.3018-2.92048-2.6105-1.02134-1.54265-1.57952-3.34117-1.57952-4.77628z"/> + </g> + <g id="safest_icon" stroke="none" stroke-width="1"> + <path clip-rule="evenodd" d="m8.49614.283505c-.30743-.175675-.68485-.175675-.99228.000001l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 4.0133-.9164 7-6 7-10v-1.41968c0-.35886-.1923-.6902-.5039-.86824zm-.49614 1.216495-5.75 3.28571v1.2746c0 1.71749.65238 3.7522 1.78726 5.46629 1.07287 1.6204 2.47498 2.8062 3.96274 3.2425 1.48776-.4363 2.8899-1.6221 3.9627-3.2425 1.1349-1.71409 1.7873-3.7488 1.7873-5.46629v-1.2746z" fill-rule="evenodd"/> + <path d="m3.5 6.12062v-.40411c0-.08972.04807-.17255.12597-.21706l4.25-2.42857c.07685-.04392.17121-.04392.24806 0l4.24997 2.42857c.0779.04451.126.12734.126.21706v.40411c0 1.43511-.5582 3.23363-1.5795 4.77628-.8665 1.3087-1.90846 2.2025-2.9205 2.6105-1.01204-.408-2.054-1.3018-2.92048-2.6105-1.02134-1.54265-1.57952-3.34117-1.57952-4.77628z"/> + </g> + <g id="standard_custom_icon" stroke="none" stroke-width="1"> + <path d="m9.37255.784312-.87641-.500806c-.30743-.175676-.68485-.175676-.99228 0l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 3.7599-.8585 6.6186-5.3745 6.9647-9.23043-.4008.20936-.8392.35666-1.3024.42914-.2132 1.43414-.8072 2.98009-1.6996 4.32789-1.0728 1.6204-2.47494 2.8062-3.9627 3.2425-1.48776-.4363-2.88987-1.6221-3.96274-3.2425-1.13488-1.71409-1.78726-3.7488-1.78726-5.46629v-1.2746l5.75-3.28571.86913.49664c.10502-.43392.27664-.84184.50342-1.212328z"/> + <circle cx="13" cy="3" fill="#ffbd2e" r="3"/> + </g> + <g id="safer_custom_icon" stroke="none" stroke-width="1"> + <path d="m9.37255.784312-.87641-.500806c-.30743-.175676-.68485-.175676-.99228 0l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 3.7599-.8585 6.6186-5.3745 6.9647-9.23043-.4008.20936-.8392.35666-1.3024.42914-.2132 1.43414-.8072 2.98009-1.6996 4.32789-1.0728 1.6204-2.47494 2.8062-3.9627 3.2425-1.48776-.4363-2.88987-1.6221-3.96274-3.2425-1.13488-1.71409-1.78726-3.7488-1.78726-5.46629v-1.2746l5.75-3.28571.86913.49664c.10502-.43392.27664-.84184.50342-1.212328z"/> + <path d="m3.5 6.12062v-.40411c0-.08972.04807-.17255.12597-.21706l4-2.28572c.16666-.09523.37403.02511.37403.21707v10.0766c-1.01204-.408-2.054-1.3018-2.92048-2.6105-1.02134-1.54265-1.57952-3.34117-1.57952-4.77628z"/> + <circle cx="13" cy="3" fill="#ffbd2e" r="3"/> + </g> + <g id="safest_custom_icon" stroke="none" stroke-width="1"> + <path d="m9.37255.784312-.87641-.500806c-.30743-.175676-.68485-.175676-.99228 0l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 3.7599-.8585 6.6186-5.3745 6.9647-9.23043-.4008.20936-.8392.35666-1.3024.42914-.2132 1.43414-.8072 2.98009-1.6996 4.32789-1.0728 1.6204-2.47494 2.8062-3.9627 3.2425-1.48776-.4363-2.88987-1.6221-3.96274-3.2425-1.13488-1.71409-1.78726-3.7488-1.78726-5.46629v-1.2746l5.75-3.28571.86913.49664c.10502-.43392.27664-.84184.50342-1.212328z"/> + <path d="m8.77266 3.44151-.64863-.37064c-.07685-.04392-.17121-.04392-.24806 0l-4.25 2.42857c-.0779.04451-.12597.12735-.12597.21706v.40412c0 1.4351.55818 3.23362 1.57952 4.77618.86648 1.3087 1.90844 2.2026 2.92048 2.6106 1.01204-.408 2.054-1.3018 2.9205-2.6106.7761-1.17217 1.2847-2.49215 1.4843-3.68816-1.9219-.26934-3.43158-1.82403-3.63214-3.76713z"/> + <circle cx="13" cy="3" fill="#ffbd2e" r="3"/> + </g> + </defs> + <use id="standard" fill="context-fill" fill-opacity="context-fill-opacity" href="#standard_icon" /> + <use id="safer" fill="context-fill" fill-opacity="context-fill-opacity" href="#safer_icon" /> + <use id="safest" fill="context-fill" fill-opacity="context-fill-opacity" href="#safest_icon" /> + <use id="standard_custom" fill="context-fill" fill-opacity="context-fill-opacity" href="#standard_custom_icon" /> + <use id="safer_custom" fill="context-fill" fill-opacity="context-fill-opacity" href="#safer_custom_icon" /> + <use id="safest_custom" fill="context-fill" fill-opacity="context-fill-opacity" href="#safest_custom_icon" /> +</svg> diff --git a/browser/components/securitylevel/content/securityLevelPanel.css b/browser/components/securitylevel/content/securityLevelPanel.css index 70022e2bd4b2..6462c02f1594 100644 --- a/browser/components/securitylevel/content/securityLevelPanel.css +++ b/browser/components/securitylevel/content/securityLevelPanel.css @@ -1,82 +1,74 @@ /* Security Level CSS */

-panel#securityLevel-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; -} - panelview#securityLevel-panelview { - width: 20em; + width: 25em; }

-panelview#securityLevel-panelview>vbox.panel-subview-body { - padding: 1em; +vbox#securityLevel-vbox > vbox { + background-repeat: no-repeat; + /* icon center-line should be in-line with right margin */ + /* -margin + panelWidth - imageWidth/2 */ + background-position: calc(-16px + 25em - 4.5em) 0.4em; + background-size: 9em 9em; + -moz-context-properties: fill, fill-opacity; + fill-opacity: 1; + fill: var(--button-bgcolor); + min-height: 10em; }

-label#securityLevel-header { - text-transform: uppercase; - color: var(--panel-disabled-color); - font-size: 0.85em; - margin: 0 0 0.4em 0; - padding: 0; +vbox#securityLevel-vbox > vbox[level="standard"] { + background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard"); } - -hbox#securityLevel-levelHbox { - margin-bottom: 1em; +vbox#securityLevel-vbox > vbox[level="safer"] { + background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer"); +} +vbox#securityLevel-vbox > vbox[level="safest"] { + background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest"); }

-label#securityLevel-level { - font-size: 1.5em; - margin: 0 0.5em 0 0; - padding: 0; +vbox#securityLevel-vbox > toolbarseparator { + margin-inline: 16px; }

-label#securityLevel-customWarning { - border-radius: 2px; - background-color: #ffe845; - text-transform: uppercase; - font-weight: bolder; - font-size: 0.8em; - height: 1em; - line-height: 1em; - vertical-align: middle; - margin: auto; - padding: 0.4em; +vbox#securityLevel-vbox > vbox { + margin-inline: 0; + padding-inline: 16px; }

-panelview#securityLevel-panelview description { - margin: 0 -0.5em 0.5em 0; - padding: 0 !important; +vbox#securityLevel-vbox > vbox * { + margin-inline: 0; }

-label#securityLevel-learnMore { - margin: 0 0 1.0em 0; - padding: 0; +vbox#securityLevel-vbox > vbox > hbox { }

-panelview#securityLevel-panelview button { - -moz-appearance: none; - background-color: var(--arrowpanel-dimmed); +label#securityLevel-level { + font-size: 1.25em; + font-weight: 600; + padding-top: 0.15em; }

-panelview#securityLevel-panelview button:hover { - background-color: var(--arrowpanel-dimmed-further); +label#securityLevel-custom { + border-radius: 4px; + background-color: var(--yellow-50); + color: black; + font-size: 1em; + height: 1.6em; + line-height: 1.0em; + padding: 0.4em 0.5em; + margin-left: 1em!important; }

-panelview#securityLevel-panelview button:active { - background-color: var(--arrowpanel-dimmed-even-further); +description#securityLevel-summary { + margin-top: 1em; + padding-right: 5em; }

-button#securityLevel-restoreDefaults { - margin: 0 0 1.0em 0; - padding: 0.45em; - color: inherit !important; +vbox#securityLevel-vbox > hbox.panel-footer { + display: flex; }

+ button#securityLevel-advancedSecuritySettings { - margin: 0 -1.0em -1.0em -1.0em; - border-radius: 0; - border-top: 1px solid var(--panel-separator-color); - padding: 0; - height: 3.0em; - color: inherit !important; + margin-block: 0; } diff --git a/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml b/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml index 4abbb12dd856..02d93b738ff5 100644 --- a/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml +++ b/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml @@ -1,37 +1,46 @@ <panel id="securityLevel-panel" - role="group" - type="arrow" - orient="vertical" - level="top" - hidden="true" - class="panel-no-padding" - onpopupshown="SecurityLevelPanel.onPopupShown(event);" - onpopuphidden="SecurityLevelPanel.onPopupHidden(event);" - > + role="group" + type="arrow" + orient="vertical" + level="top" + hidden="true" + class="panel-no-padding" + onpopupshown="SecurityLevelPanel.onPopupShown(event);" + onpopuphidden="SecurityLevelPanel.onPopupHidden(event);"> <panelmultiview mainViewId="securityLevel-panelview"> <panelview id="securityLevel-panelview" descriptionheightworkaround="true"> - <vbox class="panel-subview-body"> - <label id="securityLevel-header"/> - <hbox id="securityLevel-levelHbox"> - <label id="securityLevel-level"/> - <vbox> + <vbox id="securityLevel-vbox"> + <box class="panel-header"> + <html:h1 id="securityLevel-header"/> + </box> + <toolbarseparator></toolbarseparator> + <vbox> + <hbox> + <label id="securityLevel-level"/> + <vbox> + <spacer flex="1"/> + <label id="securityLevel-custom"/> + <spacer flex="1"/> + </vbox> <spacer flex="1"/> - <label id="securityLevel-customWarning"/> - <spacer flex="1"/> - </vbox> + </hbox> + <description id="securityLevel-summary"/> + <hbox> + <label + id="securityLevel-learnMore" + class="learnMore text-link" + onclick="SecurityLevelPanel.hide();" + is="text-link"/> + <spacer/> + </hbox> + </vbox> + <hbox class="panel-footer"> + <button id="securityLevel-restoreDefaults" + oncommand="SecurityLevelPanel.restoreDefaults();"/> + <button id="securityLevel-advancedSecuritySettings" + default="true" + oncommand="SecurityLevelPanel.openAdvancedSecuritySettings();"/> </hbox> - <description id="securityLevel-summary"/> - <label - id="securityLevel-learnMore" - class="learnMore text-link" - onclick="SecurityLevelPanel.hide();" - is="text-link"/> - <button - id="securityLevel-restoreDefaults" - oncommand="SecurityLevelPanel.restoreDefaults();"/> - <button - id="securityLevel-advancedSecuritySettings" - oncommand="SecurityLevelPanel.openAdvancedSecuritySettings();"/> </vbox> </panelview> </panelmultiview> diff --git a/browser/components/securitylevel/content/securityLevelPreferences.css b/browser/components/securitylevel/content/securityLevelPreferences.css index 0d1040d177d8..b0c87d84a259 100644 --- a/browser/components/securitylevel/content/securityLevelPreferences.css +++ b/browser/components/securitylevel/content/securityLevelPreferences.css @@ -1,12 +1,10 @@ label#securityLevel-customWarning { - border-radius: 2px; - background-color: #ffe845; - text-transform: uppercase; - font-weight: bolder; - font-size: 0.7em; - height: 1em; - line-height: 1em; - padding: 0.35em; + border-radius: 4px; + background-color: var(--yellow-50); + color: black; + font-size: 1em; + height: 1.6em; + padding: 0.4em 0.5em; }

radiogroup#securityLevel-radiogroup radio { diff --git a/browser/components/securitylevel/jar.mn b/browser/components/securitylevel/jar.mn index 9ac408083fbc..61aa4169f9ec 100644 --- a/browser/components/securitylevel/jar.mn +++ b/browser/components/securitylevel/jar.mn @@ -3,4 +3,4 @@ browser.jar: content/browser/securitylevel/securityLevelPanel.css (content/securityLevelPanel.css) content/browser/securitylevel/securityLevelButton.css (content/securityLevelButton.css) content/browser/securitylevel/securityLevelPreferences.css (content/securityLevelPreferences.css) - content/browser/securitylevel/securityLevelButton.svg (content/securityLevelButton.svg) + content/browser/securitylevel/securityLevelIcon.svg (content/securityLevelIcon.svg) diff --git a/browser/modules/TorStrings.jsm b/browser/modules/TorStrings.jsm index c0691ff078ce..73671c08693d 100644 --- a/browser/modules/TorStrings.jsm +++ b/browser/modules/TorStrings.jsm @@ -230,6 +230,10 @@ var TorStrings = { "advanced_security_settings", "Advanced Security Settings\u2026" ), + change: getString( + "change", + "Change\u2026" + ), }; return retval; })() /* Security Level Strings */, diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css index e1d64c707518..abecf34cdb92 100644 --- a/browser/themes/shared/customizableui/panelUI.inc.css +++ b/browser/themes/shared/customizableui/panelUI.inc.css @@ -1430,7 +1430,8 @@ menuitem.panel-subview-footer@menuStateActive@, #editBookmarkPanel toolbarseparator, #downloadsPanel-mainView toolbarseparator, .cui-widget-panelview menuseparator, -.cui-widget-panel toolbarseparator { +.cui-widget-panel toolbarseparator, +#securityLevel-panel toolbarseparator { appearance: none; min-height: 0; border-top: 1px solid var(--panel-separator-color);