Skip to content
Snippets Groups Projects
Commit 90395b29 authored by henry's avatar henry Committed by Richard Pospesel
Browse files

fixup! Bug 40925: Implemented the Security Level component 

Bug 32274: Make the security level settings more accessible:

+ We remove the "Restore Defaults" link that was between each radio
  option and place it separately as a button, with some notification
  text.
+ We set the `aria-describedby` attribute on the radio options to point
  to the description.
+ We change the security level popup's button text from "Change" to
  "Change Setting" to give users more of a hint that clicking the button
  will land them in the middle of about:preferences.

We also tidied up the javascript, CSS and xhtml.
parent 9714187f
1 merge request!474Make the security level settings more accessible
Show whitespace changes
Inline Side-by-side
Showing
with 175 additions and 192 deletions
browser/components/preferences/privacy.js
+ 3
− 5
View file @ 90395b29
......@@ -341,11 +341,9 @@ var gPrivacyPane = {
*/
_initSecurityLevel() {
SecurityLevelPreferences.init();
let unload = () => {
window.removeEventListener("unload", unload);
SecurityLevelPreferences.uninit();
};
window.addEventListener("unload", unload);
window.addEventListener("unload", () => SecurityLevelPreferences.uninit(), {
once: true,
});
},
/**
......
......
browser/components/securitylevel/content/securityLevel.js
+ 95
− 115
View file @ 90395b29
......@@ -17,13 +17,14 @@ XPCOMUtils.defineLazyGetter(this, "SecurityLevelStrings", () => {
security_level_restore: "Restore Defaults",
security_level_learn_more: "Learn more",
// Panel
security_level_change: "Change…",
security_level_change_setting: "Change Setting…",
security_level_standard_summary:
"All browser and website features are enabled.",
security_level_safer_summary:
"Disables website features that are often dangerous, causing some sites to lose functionality.",
security_level_safest_summary:
"Only allows website features required for static sites and basic services. These changes affect images, media, and scripts.",
security_level_custom_heading: "Warning!",
security_level_custom_summary:
"Your custom browser preferences have resulted in unusual security settings. For security and privacy reasons, we recommend you choose one of the default security levels.",
// Security level section in about:preferences#privacy
......@@ -259,7 +260,7 @@ var SecurityLevelPanel = {
this._elements.restoreDefaultsButton.textContent =
SecurityLevelStrings.security_level_restore;
this._elements.settingsButton.textContent =
SecurityLevelStrings.security_level_change;
SecurityLevelStrings.security_level_change_setting;
this._elements.restoreDefaultsButton.addEventListener("command", () => {
this.restoreDefaults();
......@@ -367,120 +368,112 @@ var SecurityLevelPanel = {
var SecurityLevelPreferences = {
_securityPrefsBranch: null,
/**
* The notification box shown when the user has a custom security setting.
*
* @type {Element}
*/
_customNotification: null,
/**
* The radiogroup for this preference.
*
* @type {Element}
*/
_radiogroup: null,
/**
* A list of radio options and their containers.
*
* @type {Array<Object>}
*/
_radioOptions: null,
_populateXUL() {
const groupbox = document.querySelector("#securityLevel-groupbox");
const radiogroup = groupbox.querySelector("#securityLevel-radiogroup");
radiogroup.addEventListener(
"command",
SecurityLevelPreferences.selectSecurityLevel
this._customNotification = document.getElementById(
"securityLevel-customNotification"
);
this._radiogroup = document.getElementById("securityLevel-radiogroup");
groupbox.querySelector("h2").textContent =
document.querySelector("#securityLevel-groupbox h2").textContent =
SecurityLevelStrings.security_level;
groupbox.querySelector("#securityLevel-overview").textContent =
document.getElementById("securityLevel-overview").textContent =
SecurityLevelStrings.security_level_overview;
groupbox
.querySelector("#securityLevel-learnMore")
document
.getElementById("securityLevel-learnMore")
.setAttribute("value", SecurityLevelStrings.security_level_learn_more);
const populateRadioElements = (level, descr) => {
const vbox = groupbox.querySelector(`#securityLevel-vbox-${level}`);
vbox
.querySelector("radio")
.setAttribute("label", SecurityLevelStrings[`security_level_${level}`]);
vbox
.querySelector(".securityLevel-customWarning")
.setAttribute("value", SecurityLevelStrings.security_level_custom);
vbox.querySelector(".summary").textContent =
SecurityLevelStrings[`security_level_${level}_summary`];
const labelRestoreDefaults = vbox.querySelector(
".securityLevel-restoreDefaults"
document.getElementById("securityLevel-customHeading").textContent =
SecurityLevelStrings.security_level_custom_heading;
document.getElementById("securityLevel-customDescription").textContent =
SecurityLevelStrings.security_level_custom_summary;
const restoreDefaultsButton = document.getElementById(
"securityLevel-restoreDefaults"
);
restoreDefaultsButton.textContent =
SecurityLevelStrings.security_level_restore;
this._radioOptions = Array.from(
this._radiogroup.querySelectorAll(".securityLevel-radio-option"),
container => {
return { container, radio: container.querySelector("radio") };
}
);
labelRestoreDefaults.setAttribute(
"value",
SecurityLevelStrings.security_level_restore
const descListItemsMap = {
safer: [
SecurityLevelStrings.security_level_js_https_only,
SecurityLevelStrings.security_level_limit_typography,
SecurityLevelStrings.security_level_limit_media,
],
safest: [
SecurityLevelStrings.security_level_js_disabled,
SecurityLevelStrings.security_level_limit_typography_svg,
SecurityLevelStrings.security_level_limit_media,
],
};
for (const { container, radio } of this._radioOptions) {
const level = radio.value;
radio.setAttribute(
"label",
SecurityLevelStrings[`security_level_${level}`]
);
labelRestoreDefaults.addEventListener(
"click",
SecurityLevelStrings.restoreDefaults
container.querySelector(".summary").textContent =
SecurityLevelStrings[`security_level_${level}_summary`];
const descListItems = descListItemsMap[level];
if (!descListItems) {
continue;
}
const descrList = container.querySelector(
".securityLevel-descriptionList"
);
if (descr) {
const descrList = vbox.querySelector(".securityLevel-descriptionList");
// TODO: Add the elements in securityLevelPreferences.inc.xhtml again
// when we switch to Fluent
for (const text of descr) {
for (const text of descListItems) {
let elem = document.createXULElement("description");
elem.textContent = text;
elem.className = "indent";
descrList.append(elem);
}
}
};
populateRadioElements("standard");
populateRadioElements("safer", [
SecurityLevelStrings.security_level_js_https_only,
SecurityLevelStrings.security_level_limit_typography,
SecurityLevelStrings.security_level_limit_media,
]);
populateRadioElements("safest", [
SecurityLevelStrings.security_level_js_disabled,
SecurityLevelStrings.security_level_limit_typography_svg,
SecurityLevelStrings.security_level_limit_media,
]);
restoreDefaultsButton.addEventListener("command", () => {
SecurityLevelPrefs.securityCustom = false;
});
this._radiogroup.addEventListener("select", () => {
SecurityLevelPrefs.securityLevel = this._radiogroup.value;
});
},
_configUIFromPrefs() {
// read our prefs
const securityLevel = SecurityLevelPrefs.securityLevel;
const securityCustom = SecurityLevelPrefs.securityCustom;
// get our elements
const groupbox = document.querySelector("#securityLevel-groupbox");
let radiogroup = groupbox.querySelector("#securityLevel-radiogroup");
let labelStandardCustom = groupbox.querySelector(
"#securityLevel-vbox-standard label.securityLevel-customWarning"
);
let labelSaferCustom = groupbox.querySelector(
"#securityLevel-vbox-safer label.securityLevel-customWarning"
);
let labelSafestCustom = groupbox.querySelector(
"#securityLevel-vbox-safest label.securityLevel-customWarning"
);
let labelStandardRestoreDefaults = groupbox.querySelector(
"#securityLevel-vbox-standard label.securityLevel-restoreDefaults"
);
let labelSaferRestoreDefaults = groupbox.querySelector(
"#securityLevel-vbox-safer label.securityLevel-restoreDefaults"
);
let labelSafestRestoreDefaults = groupbox.querySelector(
"#securityLevel-vbox-safest label.securityLevel-restoreDefaults"
this._radiogroup.value = SecurityLevelPrefs.securityLevel;
const isCustom = SecurityLevelPrefs.securityCustom;
this._radiogroup.disabled = isCustom;
this._customNotification.hidden = !isCustom;
// Have the container's selection CSS class match the selection state of the
// radio elements.
for (const { container, radio } of this._radioOptions) {
container.classList.toggle(
"securityLevel-radio-option-selected",
radio.selected
);
// hide custom label by default until we know which level we're at
labelStandardCustom.hidden = true;
labelSaferCustom.hidden = true;
labelSafestCustom.hidden = true;
labelStandardRestoreDefaults.hidden = true;
labelSaferRestoreDefaults.hidden = true;
labelSafestRestoreDefaults.hidden = true;
radiogroup.value = securityLevel;
switch (securityLevel) {
case "standard":
labelStandardCustom.hidden = !securityCustom;
labelStandardRestoreDefaults.hidden = !securityCustom;
break;
case "safer":
labelSaferCustom.hidden = !securityCustom;
labelSaferRestoreDefaults.hidden = !securityCustom;
break;
case "safest":
labelSafestCustom.hidden = !securityCustom;
labelSafestRestoreDefaults.hidden = !securityCustom;
break;
}
},
......@@ -514,17 +507,4 @@ var SecurityLevelPreferences = {
break;
}
},
selectSecurityLevel() {
// radio group elements
let radiogroup = document.getElementById("securityLevel-radiogroup");
// update pref based on selected radio option
SecurityLevelPrefs.securityLevel = radiogroup.value;
SecurityLevelPreferences.restoreDefaults();
},
restoreDefaults() {
SecurityLevelPrefs.securityCustom = false;
},
}; /* SecurityLevelPreferences */
browser/components/securitylevel/content/securityLevelPreferences.css
+ 35
− 28
View file @ 90395b29
label.securityLevel-customWarning {
border-radius: 4px;
background-color: var(--yellow-50);
color: black;
font-size: 1em;
height: 1.6em;
padding: 0.4em 0.5em;
#securityLevel-groupbox {
--section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent);
}
#securityLevel-customNotification {
/* Spacing similar to #fpiIncompatibilityWarning. */
margin-block: 16px;
}
.info-icon.securityLevel-custom-warning-icon {
list-style-image: url("chrome://global/skin/icons/warning.svg");
}
#securityLevel-customHeading {
font-weight: bold;
}
radiogroup#securityLevel-radiogroup description {
color: var(--in-content-page-color)!important;
/* Overwrite indent rule from preferences.css */
#securityLevel-radiogroup description.indent {
color: var(--in-content-page-color);
}
radiogroup#securityLevel-radiogroup radio {
#securityLevel-radiogroup radio {
font-weight: bold;
}
radiogroup#securityLevel-radiogroup > vbox {
#securityLevel-radiogroup[disabled] {
opacity: 0.5;
}
/* Overwrite the rule in common-shared.css so we don't get 0.25 opacity overall
* on the radio text. */
#securityLevel-radiogroup[disabled] radio[disabled] {
opacity: 1.0;
}
.securityLevel-radio-option {
border: 1px solid var(--in-content-box-border-color);
border-radius: 4px;
margin: 3px 0;
padding: 9px;
}
radiogroup#securityLevel-radiogroup[value=standard] > vbox#securityLevel-vbox-standard,
radiogroup#securityLevel-radiogroup[value=safer] > vbox#securityLevel-vbox-safer,
radiogroup#securityLevel-radiogroup[value=safest] > vbox#securityLevel-vbox-safest {
--section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent);
.securityLevel-radio-option.securityLevel-radio-option-selected {
background-color: var(--section-highlight-background-color);
border: 1px solid var(--in-content-accent-color);
}
vbox.securityLevel-descriptionList {
.securityLevel-radio-option:not(
.securityLevel-radio-option-selected
) .securityLevel-descriptionList {
display: none;
}
radiogroup#securityLevel-radiogroup[value=safer] vbox#securityLevel-vbox-safer vbox.securityLevel-descriptionList,
radiogroup#securityLevel-radiogroup[value=safest] vbox#securityLevel-vbox-safest vbox.securityLevel-descriptionList {
display: inherit;
}
vbox.securityLevel-descriptionList description {
.securityLevel-descriptionList description {
display: list-item;
}
vbox#securityLevel-vbox-standard,
vbox#securityLevel-vbox-safer,
vbox#securityLevel-vbox-safest {
margin-top: 0.4em;
}
browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
+ 40
− 44
View file @ 90395b29
......@@ -2,62 +2,58 @@
data-category="panePrivacy"
data-subcategory="securitylevel"
hidden="true">
<label><html:h2/></label>
<label><html:h2></html:h2></label>
<vbox flex="1">
<description flex="1">
<html:span id="securityLevel-overview" class="tail-with-learn-more"/>
<html:span id="securityLevel-overview" class="tail-with-learn-more">
</html:span>
<label id="securityLevel-learnMore"
class="learnMore text-link"
is="text-link"
href="about:manual#security-settings"
useoriginprincipal="true"/>
</description>
<radiogroup id="securityLevel-radiogroup">
<vbox id="securityLevel-vbox-standard">
<hbox>
<radio value="standard"/>
<vbox>
<spacer flex="1"/>
<label class="securityLevel-customWarning"/>
<spacer flex="1"/>
</vbox>
<spacer flex="1"/>
<hbox id="securityLevel-customNotification"
class="info-box-container"
flex="1">
<hbox class="info-icon-container">
<image class="info-icon securityLevel-custom-warning-icon"/>
</hbox>
<description flex="1" class="indent">
<html:span class="summary tail-with-learn-more"/>
<label class="securityLevel-restoreDefaults learnMore text-link"/>
</description>
</vbox>
<vbox id="securityLevel-vbox-safer">
<hbox>
<radio value="safer"/>
<vbox>
<spacer flex="1"/>
<label class="securityLevel-customWarning"/>
<spacer flex="1"/>
<vbox flex="1">
<label id="securityLevel-customHeading"/>
<description id="securityLevel-customDescription" flex="1"/>
</vbox>
<hbox align="center">
<button id="securityLevel-restoreDefaults"/>
</hbox>
<description flex="1" class="indent">
<html:span class="summary tail-with-learn-more"/>
<label class="securityLevel-restoreDefaults learnMore text-link"/>
</description>
<vbox class="securityLevel-descriptionList indent">
</vbox>
</vbox>
<vbox id="securityLevel-vbox-safest">
<hbox>
<radio value="safest"/>
<vbox>
<spacer flex="1"/>
<label class="securityLevel-customWarning"/>
<spacer flex="1"/>
</vbox>
</hbox>
<description flex="1" class="indent">
<html:span class="summary tail-with-learn-more"/>
<label class="securityLevel-restoreDefaults learnMore text-link"/>
</description>
<vbox class="securityLevel-descriptionList indent">
<radiogroup id="securityLevel-radiogroup">
<vbox class="securityLevel-radio-option">
<radio value="standard"
aria-describedby="securityLevelSummary-standard"/>
<vbox id="securityLevelSummary-standard">
<description class="summary indent" flex="1"/>
</vbox>
</vbox>
<vbox class="securityLevel-radio-option">
<!-- NOTE: We point the accessible description to the wrapping vbox
- rather than its first description element. This means that when the
- securityLevel-descriptionList is shown or hidden, its text content
- is included or excluded from the accessible description,
- respectively. -->
<radio value="safer"
aria-describedby="securityLevelSummary-safer"/>
<vbox id="securityLevelSummary-safer">
<description class="summary indent" flex="1"/>
<vbox class="securityLevel-descriptionList indent"/>
</vbox>
</vbox>
<vbox class="securityLevel-radio-option">
<radio value="safest"
aria-describedby="securityLevelSummary-safest"/>
<vbox id="securityLevelSummary-safest">
<description class="summary indent" flex="1"/>
<vbox class="securityLevel-descriptionList indent"/>
</vbox>
</vbox>
</radiogroup>
......
......
browser/components/securitylevel/locale/en-US/securityLevel.properties
+ 2
− 0
View file @ 90395b29
......@@ -13,9 +13,11 @@ security_level_learn_more = Learn more
# Panel
security_level_change = Change…
security_level_change_setting = Change Setting…
security_level_standard_summary = All browser and website features are enabled.
security_level_safer_summary = Disables website features that are often dangerous, causing some sites to lose functionality.
security_level_safest_summary = Only allows website features required for static sites and basic services. These changes affect images, media, and scripts.
security_level_custom_heading = Warning!
security_level_custom_summary = Your custom browser preferences have resulted in unusual security settings. For security and privacy reasons, we recommend you choose one of the default security levels.
## Security level section in about:preferences#privacy
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment