[tbb-commits] [tor-browser/tor-browser-91.2.0esr-11.0-1] fixup! Bug 25658: Replace security slider with security level UI

[sysrqb at torproject.org]

commit f4f537c2fbcd1679a24c6c9f5bba2f82bd471d4f
Author: Richard Pospesel <richard at 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>