[tbb-commits] [Git][tpo/applications/tor-browser][tor-browser-128.1.0esr-14.0-1] 2 commits: fixup! Bug 40925: Implemented the Security Level component

morgan (@morgan) git at gitlab.torproject.org
Wed Aug 14 16:10:34 UTC 2024



morgan pushed to branch tor-browser-128.1.0esr-14.0-1 at The Tor Project / Applications / Tor Browser


Commits:
78f9b3a9 by Henry Wilkes at 2024-08-14T15:52:25+00:00
fixup! Bug 40925: Implemented the Security Level component

Bug 42705: Adopt the same markup as "Enhanced Tracking Protection" and
"DNS over HTTPS" for the security level preferences.

We inherit all the rules for spacing and highlighting.

We also update the radio disabled opacity rule following bugzilla
bug 1869233.

- - - - -
597b1b66 by Henry Wilkes at 2024-08-14T15:52:25+00:00
fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 42705: Remove line-height rule for bridge settings and tweak spacing
to accommodate.

- - - - -


4 changed files:

- browser/components/securitylevel/content/securityLevel.js
- browser/components/securitylevel/content/securityLevelPreferences.css
- browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
- browser/components/torpreferences/content/torPreferences.css


Changes:

=====================================
browser/components/securitylevel/content/securityLevel.js
=====================================
@@ -195,7 +195,6 @@ var SecurityLevelPanel = {
 
   _configUIFromPrefs() {
     if (!this._populated) {
-      console.warn("_configUIFromPrefs before XUL was populated.");
       return;
     }
 
@@ -353,10 +352,7 @@ var SecurityLevelPreferences = {
     // 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
-      );
+      container.classList.toggle("selected", radio.selected);
     }
   },
 


=====================================
browser/components/securitylevel/content/securityLevelPreferences.css
=====================================
@@ -15,44 +15,12 @@
   font-weight: bold;
 }
 
-/* Overwrite indent rule from preferences.css */
-#securityLevel-radiogroup description.indent {
-  color: var(--in-content-page-color);
-}
-
-#securityLevel-radiogroup radio {
-  font-weight: bold;
-}
-
 #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] {
+#securityLevel-radiogroup[disabled] radio[disabled] .radio-label-box {
   opacity: 1.0;
 }
-
-.securityLevel-radio-option {
-  border: 1px solid var(--in-content-box-border-color);
-  border-radius: 4px;
-  margin: 3px 0;
-  padding: 9px;
-}
-
-.securityLevel-radio-option.securityLevel-radio-option-selected {
-  background-color: var(--section-highlight-background-color);
-  border: 1px solid var(--in-content-accent-color);
-
-}
-
-.securityLevel-radio-option:not(
-  .securityLevel-radio-option-selected
-) .securityLevel-descriptionList {
-  display: none;
-}
-
-.securityLevel-descriptionList description {
-  display: list-item;
-}


=====================================
browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
=====================================
@@ -45,78 +45,82 @@
       </hbox>
     </hbox>
     <radiogroup id="securityLevel-radiogroup">
-      <vbox class="securityLevel-radio-option">
+      <vbox class="securityLevel-radio-option privacy-detailedoption info-box-container">
         <radio
           value="standard"
           data-l10n-id="security-level-preferences-level-standard"
           aria-describedby="securityLevelSummary-standard"
         />
-        <vbox id="securityLevelSummary-standard">
-          <description
-            class="summary indent"
-            flex="1"
-            data-l10n-id="security-level-summary-standard"
-          />
+        <vbox id="securityLevelSummary-standard" class="indent">
+          <label data-l10n-id="security-level-summary-standard" />
         </vbox>
       </vbox>
-      <vbox class="securityLevel-radio-option">
+      <vbox class="securityLevel-radio-option privacy-detailedoption info-box-container">
         <!-- 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. -->
+          - privacy-extra-information is shown or hidden, its text content is
+          - included or excluded from the accessible description, respectively.
+          -->
         <radio
           value="safer"
           data-l10n-id="security-level-preferences-level-safer"
           aria-describedby="securityLevelSummary-safer"
         />
-        <vbox id="securityLevelSummary-safer">
-          <description
-            class="summary indent"
-            flex="1"
-            data-l10n-id="security-level-summary-safer"
-          />
-          <vbox class="securityLevel-descriptionList indent">
-            <description
-              class="indent"
-              data-l10n-id="security-level-preferences-bullet-https-only-javascript"
-            />
-            <description
-              class="indent"
-              data-l10n-id="security-level-preferences-bullet-limit-font-and-symbols"
-            />
-            <description
-              class="indent"
-              data-l10n-id="security-level-preferences-bullet-limit-media"
-            />
+        <vbox id="securityLevelSummary-safer" class="indent">
+          <label data-l10n-id="security-level-summary-safer" />
+          <vbox class="privacy-extra-information">
+            <vbox class="indent">
+              <hbox class="extra-information-label">
+                <label
+                  class="content-blocking-label"
+                  data-l10n-id="security-level-preferences-bullet-https-only-javascript"
+                />
+              </hbox>
+              <hbox class="extra-information-label">
+                <label
+                  class="content-blocking-label"
+                  data-l10n-id="security-level-preferences-bullet-limit-font-and-symbols"
+                />
+              </hbox>
+              <hbox class="extra-information-label">
+                <label
+                  class="content-blocking-label"
+                  data-l10n-id="security-level-preferences-bullet-limit-media"
+                />
+              </hbox>
+            </vbox>
           </vbox>
         </vbox>
       </vbox>
-      <vbox class="securityLevel-radio-option">
+      <vbox class="securityLevel-radio-option privacy-detailedoption info-box-container">
         <radio
           value="safest"
           data-l10n-id="security-level-preferences-level-safest"
           aria-describedby="securityLevelSummary-safest"
         />
-        <vbox id="securityLevelSummary-safest">
-          <description
-            class="summary indent"
-            flex="1"
-            data-l10n-id="security-level-summary-safest"
-          />
-          <vbox class="securityLevel-descriptionList indent">
-            <description
-              class="indent"
-              data-l10n-id="security-level-preferences-bullet-disabled-javascript"
-            />
-            <description
-              class="indent"
-              data-l10n-id="security-level-preferences-bullet-limit-font-and-symbols-and-images"
-            />
-            <description
-              class="indent"
-              data-l10n-id="security-level-preferences-bullet-limit-media"
-            />
+        <vbox id="securityLevelSummary-safest" class="indent">
+          <label data-l10n-id="security-level-summary-safest" />
+          <vbox class="privacy-extra-information">
+            <vbox class="indent">
+              <hbox class="extra-information-label">
+                <label
+                  class="content-blocking-label"
+                  data-l10n-id="security-level-preferences-bullet-disabled-javascript"
+                />
+              </hbox>
+              <hbox class="extra-information-label">
+                <label
+                  class="content-blocking-label"
+                  data-l10n-id="security-level-preferences-bullet-limit-font-and-symbols-and-images"
+                />
+              </hbox>
+              <hbox class="extra-information-label">
+                <label
+                  class="content-blocking-label"
+                  data-l10n-id="security-level-preferences-bullet-limit-media"
+                />
+              </hbox>
+            </vbox>
           </vbox>
         </vbox>
       </vbox>


=====================================
browser/components/torpreferences/content/torPreferences.css
=====================================
@@ -230,7 +230,6 @@ button.spoof-button-disabled {
 #tor-bridges-current {
   margin-inline: 0;
   margin-block: 32px;
-  line-height: 1.8;
 }
 
 #tor-bridges-none {
@@ -328,7 +327,7 @@ button.spoof-button-disabled {
     "type status" min-content
     "description description" auto
     / max-content 1fr;
-  gap: 4px 1.5em;
+  gap: 12px 1.5em;
   margin-block-end: 16px;
 }
 
@@ -504,6 +503,7 @@ button.spoof-button-disabled {
   grid-area: heading;
   font-size: inherit;
   margin: 0;
+  margin-block-end: 4px;
   font-weight: 700;
 }
 
@@ -714,15 +714,14 @@ button.spoof-button-disabled {
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   align-items: start;
-  line-height: 1.8;
   margin-block-start: 24px;
 }
 
 #tor-bridges-provider-list {
   display: grid;
   grid-template-columns: max-content max-content;
-  /* 16px gap between items. */
-  gap: 16px 12px;
+  /* 24px gap between items. */
+  gap: 24px 12px;
   margin-block: 16px;
   padding: 0;
 }
@@ -733,8 +732,8 @@ button.spoof-button-disabled {
   grid-template-columns: subgrid;
   align-items: center;
   justify-items: start;
-  /* No gap between the name and instruction. */
-  gap: 0 12px;
+  /* 8px gap between the name and instruction. */
+  gap: 8px 12px;
 }
 
 .tor-bridges-provider-icon {
@@ -772,6 +771,7 @@ button.spoof-button-disabled {
   flex-direction: column;
   align-items: center;
   text-align: center;
+  justify-content: center;
   padding: 16px;
   background: var(--in-content-box-info-background);
   border-radius: 4px;



View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/5ed33f3d6ae2ef803d1faf2348c7d0e602ffd5ca...597b1b66768885578eae951991738f3d4922e358

-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/5ed33f3d6ae2ef803d1faf2348c7d0e602ffd5ca...597b1b66768885578eae951991738f3d4922e358
You're receiving this email because of your account on gitlab.torproject.org.


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tbb-commits/attachments/20240814/db77f88b/attachment-0001.htm>


More information about the tbb-commits mailing list