commit f4f537c2fbcd1679a24c6c9f5bba2f82bd471d4f Author: Richard Pospesel <richard@torproject.org> Date: Fri Sep 24 14:21:17 2021 -0500 fixup! Bug 25658: Replace security slider with security level UI --- .../content/securityLevelPreferences.css | 40 ++++++++++++++++++---- .../content/securityLevelPreferences.inc.xhtml | 23 ++++++++----- 2 files changed, 48 insertions(+), 15 deletions(-) diff --git a/browser/components/securitylevel/content/securityLevelPreferences.css b/browser/components/securitylevel/content/securityLevelPreferences.css index b0c87d84a259..12a7cccffe09 100644 --- a/browser/components/securitylevel/content/securityLevelPreferences.css +++ b/browser/components/securitylevel/content/securityLevelPreferences.css @@ -7,18 +7,46 @@ label#securityLevel-customWarning { padding: 0.4em 0.5em; } +radiogroup#securityLevel-radiogroup description { + color: var(--in-content-page-color)!important; +} + radiogroup#securityLevel-radiogroup radio { font-weight: bold; } +radiogroup#securityLevel-radiogroup > vbox { + 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); + background-color: var(--section-highlight-background-color); + border: 1px solid var(--in-content-accent-color); + +} + +vbox#securityLevel-descriptionList { + display: none; + margin-inline-start: +} + +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 { + display: list-item; +} + vbox#securityLevel-vbox-standard, vbox#securityLevel-vbox-safer, vbox#securityLevel-vbox-safest { margin-top: 0.4em; } - -vbox#securityLevel-vbox-standard description.indent, -vbox#securityLevel-vbox-safer description.indent, -vbox#securityLevel-vbox-safest description.indent { - margin-inline-start: 0 !important; -} diff --git a/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml b/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml index a108d44a7b51..b050dad81621 100644 --- a/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml +++ b/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml @@ -14,8 +14,9 @@ <label id="securityLevel-customWarning"/> <spacer flex="1"/> </vbox> + <spacer flex="1"/> </hbox> - <description flex="1"> + <description flex="1" class="indent"> <html:span id="securityLevel-summary" class="tail-with-learn-more"/> <label id="securityLevel-restoreDefaults" class="learnMore text-link"/> @@ -30,14 +31,16 @@ <spacer flex="1"/> </vbox> </hbox> - <description flex="1"> + <description flex="1" class="indent"> <html:span id="securityLevel-summary" class="tail-with-learn-more"/> <label id="securityLevel-restoreDefaults" class="learnMore text-link"/> </description> - <description id="securityLevel-description1" class="indent tip-caption"/> - <description id="securityLevel-description2" class="indent tip-caption"/> - <description id="securityLevel-description3" class="indent tip-caption"/> + <vbox id="securityLevel-descriptionList" class="indent"> + <description id="securityLevel-description1" class="indent"/> + <description id="securityLevel-description2" class="indent"/> + <description id="securityLevel-description3" class="indent"/> + </vbox> </vbox> <vbox id="securityLevel-vbox-safest"> <hbox> @@ -48,14 +51,16 @@ <spacer flex="1"/> </vbox> </hbox> - <description flex="1"> + <description flex="1" class="indent"> <html:span id="securityLevel-summary" class="tail-with-learn-more"/> <label id="securityLevel-restoreDefaults" class="learnMore text-link"/> </description> - <description id="securityLevel-description1" class="indent tip-caption"/> - <description id="securityLevel-description2" class="indent tip-caption"/> - <description id="securityLevel-description3" class="indent tip-caption"/> + <vbox id="securityLevel-descriptionList" class="indent"> + <description id="securityLevel-description1" class="indent"/> + <description id="securityLevel-description2" class="indent"/> + <description id="securityLevel-description3" class="indent"/> + </vbox> </vbox> </radiogroup> </vbox>