henry pushed to branch mullvad-browser-148.0a1-16.0-2 at The Tor Project / Applications / Mullvad Browser
Commits:
-
04a17b35
by Henry Wilkes at 2026-03-10T11:28:26+00:00
-
dab4b570
by Henry Wilkes at 2026-03-10T11:28:27+00:00
-
5b30a3a2
by Henry Wilkes at 2026-03-10T11:28:28+00:00
-
a5cc1011
by Henry Wilkes at 2026-03-10T11:28:29+00:00
-
4202c924
by Henry Wilkes at 2026-03-10T11:45:52+00:00
7 changed files:
- .stylelintrc.js
- browser/components/mullvad-browser/content/aboutMullvadBrowser.css
- browser/components/securitylevel/content/securityLevelPanel.css
- browser/components/securitylevel/content/securityLevelPreferences.css
- browser/themes/shared/tabbrowser/content-area.css
- python/mozlint/mozlint/cli.py
- toolkit/components/resistfingerprinting/content/letterboxing.css
Changes:
| ... | ... | @@ -274,9 +274,9 @@ module.exports = { |
| 274 | 274 | // Remove this line setting `csscontrols/use-logical` to null after implementing fixes
|
| 275 | 275 | "csstools/use-logical": null,
|
| 276 | 276 | "stylelint-plugin-mozilla/no-base-design-tokens": true,
|
| 277 | - "stylelint-plugin-mozilla/use-design-tokens": true,
|
|
| 278 | - "stylelint-plugin-mozilla/no-non-semantic-token-usage": true,
|
|
| 279 | - "stylelint-plugin-mozilla/use-size-tokens": true,
|
|
| 277 | + "stylelint-plugin-mozilla/use-design-tokens": false,
|
|
| 278 | + "stylelint-plugin-mozilla/no-non-semantic-token-usage": false,
|
|
| 279 | + "stylelint-plugin-mozilla/use-size-tokens": false,
|
|
| 280 | 280 | },
|
| 281 | 281 | |
| 282 | 282 | overrides: [
|
| ... | ... | @@ -19,9 +19,13 @@ body { |
| 19 | 19 | grid-template: "heading" auto "text" auto / auto;
|
| 20 | 20 | justify-items: center;
|
| 21 | 21 | align-content: center;
|
| 22 | - gap: 32px;
|
|
| 23 | - padding-block: 40px;
|
|
| 24 | - padding-inline: 16px;
|
|
| 22 | + gap: var(--space-xxlarge);
|
|
| 23 | + padding-block: var(--space-xxlarge);
|
|
| 24 | +}
|
|
| 25 | + |
|
| 26 | +#header,
|
|
| 27 | +#footer {
|
|
| 28 | + padding-inline: var(--space-large);
|
|
| 25 | 29 | }
|
| 26 | 30 | |
| 27 | 31 | #header p {
|
| ... | ... | @@ -34,7 +38,7 @@ body { |
| 34 | 38 | flex-direction: row;
|
| 35 | 39 | white-space: nowrap;
|
| 36 | 40 | align-items: center;
|
| 37 | - gap: 16px;
|
|
| 41 | + gap: var(--space-large);
|
|
| 38 | 42 | }
|
| 39 | 43 | |
| 40 | 44 | #heading-logo {
|
| ... | ... | @@ -68,29 +72,28 @@ body:not(.no-update) #mullvad-browser-intro { |
| 68 | 72 | }
|
| 69 | 73 | |
| 70 | 74 | #mullvad-browser-update-img {
|
| 71 | - height: 1em;
|
|
| 75 | + height: var(--icon-size);
|
|
| 72 | 76 | vertical-align: sub;
|
| 73 | - margin-inline-end: 0.3em;
|
|
| 77 | + margin-inline-end: var(--space-xsmall);
|
|
| 74 | 78 | }
|
| 75 | 79 | |
| 76 | 80 | #footer {
|
| 77 | - padding-block: 40px;
|
|
| 78 | - border-block-start: 1px solid var(--in-content-box-border-color);
|
|
| 79 | - background-color: var(--in-content-box-info-background);
|
|
| 81 | + padding-block: var(--space-xxlarge);
|
|
| 82 | + border-block-start: var(--border-width) solid var(--border-color);
|
|
| 83 | + background-color: var(--background-color-box-info);
|
|
| 80 | 84 | }
|
| 81 | 85 | |
| 82 | 86 | #footer p {
|
| 83 | - margin-inline: 8px;
|
|
| 84 | - margin-block: 0.5em;
|
|
| 87 | + margin-block: var(--space-small);
|
|
| 85 | 88 | }
|
| 86 | 89 | |
| 87 | 90 | @media not ((prefers-contrast) or (forced-colors)) {
|
| 88 | 91 | :root {
|
| 89 | 92 | /* Dark background. */
|
| 90 | 93 | background: linear-gradient(to bottom, var(--branding-gradient-start) 0%, var(--branding-gradient-middle) 55%, var(--branding-gradient-end) 100%);
|
| 91 | - /* Same as --in-content-page-color when "prefers-color-scheme: dark" */
|
|
| 92 | - --in-content-page-color-dark: var(--color-gray-05);
|
|
| 93 | - color: var(--in-content-page-color-dark);
|
|
| 94 | + /* Same as --text-color when "prefers-color-scheme: dark" */
|
|
| 95 | + --text-color-dark: var(--color-gray-05);
|
|
| 96 | + color: var(--text-color-dark);
|
|
| 94 | 97 | |
| 95 | 98 | --link-color: var(--branding-link-color);
|
| 96 | 99 | --link-color-hover: var(--branding-link-color-hover);
|
| ... | ... | @@ -98,8 +101,6 @@ body:not(.no-update) #mullvad-browser-intro { |
| 98 | 101 | |
| 99 | 102 | --focus-outline-color: var(--branding-focus-outline-color);
|
| 100 | 103 | --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
| 101 | - --in-content-focus-outline-color: var(--focus-outline-color);
|
|
| 102 | - --in-content-focus-outline: var(--focus-outline);
|
|
| 103 | 104 | }
|
| 104 | 105 | |
| 105 | 106 | #heading-wordmark {
|
| 1 | 1 | /* Security Level CSS */
|
| 2 | 2 | |
| 3 | 3 | #securityLevel-background {
|
| 4 | - min-height: 10em;
|
|
| 5 | - padding-inline: 16px;
|
|
| 6 | - column-gap: 0.5em;
|
|
| 4 | + min-height: 150px;
|
|
| 5 | + padding-inline: var(--space-large);
|
|
| 6 | + column-gap: var(--space-small);
|
|
| 7 | 7 | display: grid;
|
| 8 | 8 | grid-template:
|
| 9 | - "top-pad icon" 16px
|
|
| 9 | + "top-pad icon" var(--space-large)
|
|
| 10 | 10 | "title icon" auto
|
| 11 | 11 | "body icon" auto
|
| 12 | 12 | "learn-more icon" auto
|
| 13 | - "bottom-pad icon" minmax(8px, 1fr)
|
|
| 13 | + "bottom-pad icon" minmax(var(--space-small), 1fr)
|
|
| 14 | 14 | / auto auto;
|
| 15 | 15 | }
|
| 16 | 16 | |
| 17 | 17 | #securityLevel-background-image {
|
| 18 | 18 | grid-area: icon;
|
| 19 | - --security-level-icon-size: 9em;
|
|
| 19 | + --security-level-icon-size: 130px;
|
|
| 20 | 20 | width: var(--security-level-icon-size);
|
| 21 | 21 | height: var(--security-level-icon-size);
|
| 22 | - margin-block: 0.4em;
|
|
| 22 | + margin-block: var(--space-small);
|
|
| 23 | 23 | /* Middle of shield aligns with the panel padding: */
|
| 24 | 24 | margin-inline-end: calc(-0.5 * var(--security-level-icon-size));
|
| 25 | 25 | align-self: start;
|
| ... | ... | @@ -50,12 +50,12 @@ |
| 50 | 50 | }
|
| 51 | 51 | |
| 52 | 52 | #securityLevel-background p {
|
| 53 | - margin-block: 0 16px;
|
|
| 53 | + margin-block: 0 var(--space-large);
|
|
| 54 | 54 | }
|
| 55 | 55 | |
| 56 | 56 | /* Override margin in panelUI-shared.css */
|
| 57 | 57 | #securityLevel-panel toolbarseparator#securityLevel-separator {
|
| 58 | - margin-inline: 16px;
|
|
| 58 | + margin-inline: var(--space-large);
|
|
| 59 | 59 | }
|
| 60 | 60 | |
| 61 | 61 | #securityLevel-level {
|
| ... | ... | @@ -65,7 +65,7 @@ |
| 65 | 65 | }
|
| 66 | 66 | |
| 67 | 67 | #securityLevel-summary {
|
| 68 | - max-width: 20em;
|
|
| 68 | + max-width: 300px;
|
|
| 69 | 69 | grid-area: body;
|
| 70 | 70 | }
|
| 71 | 71 |
| ... | ... | @@ -10,8 +10,8 @@ |
| 10 | 10 | .security-level-icon {
|
| 11 | 11 | grid-area: icon;
|
| 12 | 12 | align-self: start;
|
| 13 | - width: 24px;
|
|
| 14 | - height: 24px;
|
|
| 13 | + width: var(--icon-size-large);
|
|
| 14 | + height: var(--icon-size-large);
|
|
| 15 | 15 | -moz-context-properties: fill;
|
| 16 | 16 | fill: var(--icon-color);
|
| 17 | 17 | margin-block-start: var(--space-xsmall);
|
| ... | ... | @@ -97,7 +97,7 @@ |
| 97 | 97 | #security-level-current {
|
| 98 | 98 | margin-block-start: var(--space-large);
|
| 99 | 99 | background: var(--background-color-box);
|
| 100 | - border: 1px solid var(--border-color);
|
|
| 100 | + border: var(--border-width) solid var(--border-color);
|
|
| 101 | 101 | border-radius: var(--border-radius-small);
|
| 102 | 102 | padding: var(--space-medium);
|
| 103 | 103 | }
|
| ... | ... | @@ -390,16 +390,16 @@ split-view-footer { |
| 390 | 390 | |
| 391 | 391 | #statuspanel:is([type="letterboxingStatus"], [previoustype="letterboxingStatus"][inactive]) > #statuspanel-label {
|
| 392 | 392 | background-image: url("chrome://browser/skin/window.svg");
|
| 393 | - background-size: 1em;
|
|
| 393 | + background-size: var(--icon-size);
|
|
| 394 | 394 | background-repeat: no-repeat;
|
| 395 | 395 | background-position-y: center;
|
| 396 | - background-position-x: left 0.5em;
|
|
| 396 | + background-position-x: left var(--space-small);
|
|
| 397 | 397 | |
| 398 | 398 | &:-moz-locale-dir(rtl) {
|
| 399 | - background-position-x: right 0.5em;
|
|
| 399 | + background-position-x: right var(--space-small);
|
|
| 400 | 400 | }
|
| 401 | 401 | |
| 402 | - padding-inline-start: 2em;
|
|
| 402 | + padding-inline-start: calc(var(--space-small) + var(--icon-size) + var(--space-small));
|
|
| 403 | 403 | -moz-context-properties: fill;
|
| 404 | 404 | fill: var(--color-accent-primary);
|
| 405 | 405 | @media (forced-colors) {
|
| ... | ... | @@ -38,7 +38,6 @@ INACTIVE_LINTERS = [ |
| 38 | 38 | "updatebot",
|
| 39 | 39 | "typescript",
|
| 40 | 40 | "wpt",
|
| 41 | - "stylelint",
|
|
| 42 | 41 | "glean-parser",
|
| 43 | 42 | ]
|
| 44 | 43 |
| ... | ... | @@ -17,9 +17,6 @@ |
| 17 | 17 | }
|
| 18 | 18 | }
|
| 19 | 19 | |
| 20 | -/* stylelint-disable stylelint-plugin-mozilla/use-border-color-tokens */
|
|
| 21 | -/* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 22 | - |
|
| 23 | 20 | #tabbrowser-tabbox.letterboxing {
|
| 24 | 21 | --letterboxing-bgcolor: var(--background-color-canvas);
|
| 25 | 22 | /* Match the border radius used for the sidebar. */
|
| ... | ... | @@ -28,7 +25,7 @@ |
| 28 | 25 | --letterboxing-vertical-alignment: start;
|
| 29 | 26 | --letterboxing-shadow: none;
|
| 30 | 27 | --letterboxing-outline-color: var(--border-color);
|
| 31 | - --letterboxing-outline-width: 1px;
|
|
| 28 | + --letterboxing-outline-width: var(--border-width);
|
|
| 32 | 29 | |
| 33 | 30 | @media not ((prefers-contrast) or (forced-colors)) {
|
| 34 | 31 | /* Match the #sidebar outline width. */
|