henry pushed to branch mullvad-browser-140.1.0esr-15.0-1 at The Tor Project / Applications / Mullvad Browser

Commits:

5 changed files:

Changes:

  • browser/components/securitylevel/content/securityLevel.js
    ... ... @@ -156,7 +156,6 @@ var SecurityLevelPanel = {
    156 156 
       _populateXUL() {
    157 157 
         this._elements = {
    158 158 
           panel: document.getElementById("securityLevel-panel"),
    159 
    -      background: document.getElementById("securityLevel-background"),
    160 159 
           levelName: document.getElementById("securityLevel-level"),
    161 160 
           summary: document.getElementById("securityLevel-summary"),
    162 161 
         };
    ... ... @@ -190,7 +189,7 @@ var SecurityLevelPanel = {
    190 189 
         const level = SecurityLevelPrefs.securityLevelSummary;
    191 190
    192 191 
         // Descriptions change based on security level
    193 
    -    this._elements.background.setAttribute("level", level);
    192 
    +    this._elements.panel.setAttribute("level", level);
    194 193 
         let l10nIdLevel;
    195 194 
         let l10nIdSummary;
    196 195 
         switch (level) {

  • browser/components/securitylevel/content/securityLevelButton.css
    1 
    -toolbarbutton#security-level-button[level="standard"] {
    1 
    +#security-level-button[level="standard"] {
    2 2 
       list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");
    3 3 
     }
    4 
    -toolbarbutton#security-level-button[level="safer"] {
    4 
    +
    5 
    +#security-level-button[level="safer"] {
    5 6 
       list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");
    6 7 
     }
    7 
    -toolbarbutton#security-level-button[level="safest"] {
    8 
    +
    9 
    +#security-level-button[level="safest"] {
    8 10 
       list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");
    9 11 
     }
    10 
    -toolbarbutton#security-level-button[level="custom"] {
    12 
    +
    13 
    +#security-level-button[level="custom"] {
    11 14 
       list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard_custom");
    12 15 
     }
    16 
    +
    17 
    +#security-level-button:-moz-locale-dir(rtl) .toolbarbutton-icon {
    18 
    +  transform: scaleX(-1);
    19 
    +}

  • browser/components/securitylevel/content/securityLevelPanel.css
    ... ... @@ -3,40 +3,54 @@
    3 3 
     #securityLevel-background {
    4 4 
       min-height: 10em;
    5 5 
       padding-inline: 16px;
    6 
    -  padding-block: 16px 8px;
    7 
    -  gap: 16px;
    8 
    -  background-repeat: no-repeat;
    9 
    -  background-position-y: top 0.4em;
    10 
    -  /* Icon center should be in-line with end padding.
    11 
    -   * We set the right-to-left position here, and the left-to-right position
    12 
    -   * below. */
    13 
    -  --background-inline-offset: calc(16px - 4.5em);
    14 
    -  background-position-x: left var(--background-inline-offset);
    15 
    -  background-size: 9em 9em;
    6 
    +  column-gap: 0.5em;
    7 
    +  display: grid;
    8 
    +  grid-template:
    9 
    +    "top-pad icon" 16px
    10 
    +    "title icon" auto
    11 
    +    "body icon" auto
    12 
    +    "learn-more icon" auto
    13 
    +    "bottom-pad icon" minmax(8px, 1fr)
    14 
    +    / auto auto;
    15 
    +}
    16 
    +
    17 
    +#securityLevel-background-image {
    18 
    +  grid-area: icon;
    19 
    +  --security-level-icon-size: 9em;
    20 
    +  width: var(--security-level-icon-size);
    21 
    +  height: var(--security-level-icon-size);
    22 
    +  margin-block: 0.4em;
    23 
    +  /* Middle of shield aligns with the panel padding: */
    24 
    +  margin-inline-end: calc(-0.5 * var(--security-level-icon-size));
    25 
    +  align-self: start;
    26 
    +  justify-self: end;
    27 
    +  /* This icon is meant to act as background, so disable dragging or interfering
    28 
    +   * with clicks. */
    29 
    +  pointer-events: none;
    16 30 
       -moz-context-properties: fill, fill-opacity;
    17 31 
       fill-opacity: 1;
    18 32 
       fill: var(--border-color-card);
    19 33 
     }
    20 34
    21 35 
     /* NOTE: Use ":dir" instead of ":-moz-locale-dir" when panel switches to HTML. */
    22 
    -#securityLevel-background:-moz-locale-dir(ltr) {
    23 
    -  background-position-x: right var(--background-inline-offset);
    36 
    +#securityLevel-background-image:-moz-locale-dir(rtl) {
    37 
    +  transform: scaleX(-1);
    24 38 
     }
    25 39
    26 
    -#securityLevel-background:is([level="standard"], [level="custom"]) {
    27 
    -  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");
    40 
    +#securityLevel-panel:is([level="standard"], [level="custom"]) #securityLevel-background-image {
    41 
    +  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");
    28 42 
     }
    29 43
    30 
    -#securityLevel-background[level="safer"] {
    31 
    -  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");
    44 
    +#securityLevel-panel[level="safer"] #securityLevel-background-image {
    45 
    +  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");
    32 46 
     }
    33 47
    34 
    -#securityLevel-background[level="safest"] {
    35 
    -  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");
    48 
    +#securityLevel-panel[level="safest"] #securityLevel-background-image {
    49 
    +  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");
    36 50 
     }
    37 51
    38 52 
     #securityLevel-background p {
    39 
    -  margin: 0;
    53 
    +  margin-block: 0 16px;
    40 54 
     }
    41 55
    42 56 
     /* Override margin in panelUI-shared.css */
    ... ... @@ -47,13 +61,15 @@
    47 61 
     #securityLevel-level {
    48 62 
       font-size: 1.25em;
    49 63 
       font-weight: 600;
    64 
    +  grid-area: title;
    50 65 
     }
    51 66
    52 67 
     #securityLevel-summary {
    53 
    -  padding-inline-end: 5em;
    54 68 
       max-width: 20em;
    69 
    +  grid-area: body;
    55 70 
     }
    56 71
    57 72 
     #securityLevel-learnMore {
    58 73 
       align-self: start;
    74 
    +  grid-area: learn-more;
    59 75 
     }

  • browser/components/securitylevel/content/securityLevelPanel.inc.xhtml
    1 1 
     <panel id="securityLevel-panel"
    2 2 
            role="dialog"
    3 3 
            aria-labelledby="securityLevel-header"
    4 
    -       aria-describedby="securityLevel-subheading securityLevel-summary"
    4 
    +       aria-describedby="securityLevel-level securityLevel-summary"
    5 5 
            type="arrow"
    6 6 
            orient="vertical"
    7 7 
            class="cui-widget-panel panel-no-padding">
    ... ... @@ -13,9 +13,7 @@
    13 13 
       </box>
    14 14 
       <toolbarseparator id="securityLevel-separator"></toolbarseparator>
    15 15 
       <vbox id="securityLevel-background" class="panel-subview-body">
    16 
    -    <html:p id="securityLevel-subheading">
    17 
    -      <html:span id="securityLevel-level"></html:span>
    18 
    -    </html:p>
    16 
    +    <html:p id="securityLevel-level"></html:p>
    19 17 
         <html:p id="securityLevel-summary"></html:p>
    20 18 
         <html:a
    21 19 
           is="moz-support-link"
    ... ... @@ -23,6 +21,7 @@
    23 21 
           tor-manual-page="security-settings"
    24 22 
           data-l10n-id="security-level-panel-learn-more-link"
    25 23 
         ></html:a>
    24 
    +    <html:img id="securityLevel-background-image" alt="" />
    26 25 
       </vbox>
    27 26 
       <html:moz-button-group class="panel-footer">
    28 27 
         <button

  • browser/components/securitylevel/content/securityLevelPreferences.css
    ... ... @@ -18,6 +18,10 @@
    18 18 
       margin-inline-end: var(--space-large);
    19 19 
     }
    20 20
    21 
    +:-moz-locale-dir(rtl) .security-level-icon {
    22 
    +  transform: scaleX(-1);
    23 
    +}
    24 
    +
    21 25 
     .security-level-current-badge {
    22 26 
       grid-area: badge;
    23 27 
       align-self: center;

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help Notification message regarding https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/f9f53b492dfacd62b95b33eb1104da67a5d2e46a at 1753893150