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 fixup! BB 42728: Modify ./mach lint to skip unused linters TB 44406: Re-enable stylelint. - - - - - dab4b570 by Henry Wilkes at 2026-03-10T11:28:27+00:00 fixup! BB 40925: Implemented the Security Level component TB 44406: Use size tokens. - - - - - 5b30a3a2 by Henry Wilkes at 2026-03-10T11:28:28+00:00 fixup! BB 32308: Use direct browser sizing for letterboxing. TB 44406: Use size tokens. - - - - - a5cc1011 by Henry Wilkes at 2026-03-10T11:28:29+00:00 fixup! BB 41919: Letterboxing, add temporarily visible web content-size indicator on window resizing. TB 44406: Use size tokens. - - - - - 4202c924 by Henry Wilkes at 2026-03-10T11:45:52+00:00 fixup! MB 39: Add home page about:mullvad-browser MB 516: Use new CSS tokens. - - - - - 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: ===================================== .stylelintrc.js ===================================== @@ -274,9 +274,9 @@ module.exports = { // Remove this line setting `csscontrols/use-logical` to null after implementing fixes "csstools/use-logical": null, "stylelint-plugin-mozilla/no-base-design-tokens": true, - "stylelint-plugin-mozilla/use-design-tokens": true, - "stylelint-plugin-mozilla/no-non-semantic-token-usage": true, - "stylelint-plugin-mozilla/use-size-tokens": true, + "stylelint-plugin-mozilla/use-design-tokens": false, + "stylelint-plugin-mozilla/no-non-semantic-token-usage": false, + "stylelint-plugin-mozilla/use-size-tokens": false, }, overrides: [ ===================================== browser/components/mullvad-browser/content/aboutMullvadBrowser.css ===================================== @@ -19,9 +19,13 @@ body { grid-template: "heading" auto "text" auto / auto; justify-items: center; align-content: center; - gap: 32px; - padding-block: 40px; - padding-inline: 16px; + gap: var(--space-xxlarge); + padding-block: var(--space-xxlarge); +} + +#header, +#footer { + padding-inline: var(--space-large); } #header p { @@ -34,7 +38,7 @@ body { flex-direction: row; white-space: nowrap; align-items: center; - gap: 16px; + gap: var(--space-large); } #heading-logo { @@ -68,29 +72,28 @@ body:not(.no-update) #mullvad-browser-intro { } #mullvad-browser-update-img { - height: 1em; + height: var(--icon-size); vertical-align: sub; - margin-inline-end: 0.3em; + margin-inline-end: var(--space-xsmall); } #footer { - padding-block: 40px; - border-block-start: 1px solid var(--in-content-box-border-color); - background-color: var(--in-content-box-info-background); + padding-block: var(--space-xxlarge); + border-block-start: var(--border-width) solid var(--border-color); + background-color: var(--background-color-box-info); } #footer p { - margin-inline: 8px; - margin-block: 0.5em; + margin-block: var(--space-small); } @media not ((prefers-contrast) or (forced-colors)) { :root { /* Dark background. */ background: linear-gradient(to bottom, var(--branding-gradient-start) 0%, var(--branding-gradient-middle) 55%, var(--branding-gradient-end) 100%); - /* Same as --in-content-page-color when "prefers-color-scheme: dark" */ - --in-content-page-color-dark: var(--color-gray-05); - color: var(--in-content-page-color-dark); + /* Same as --text-color when "prefers-color-scheme: dark" */ + --text-color-dark: var(--color-gray-05); + color: var(--text-color-dark); --link-color: var(--branding-link-color); --link-color-hover: var(--branding-link-color-hover); @@ -98,8 +101,6 @@ body:not(.no-update) #mullvad-browser-intro { --focus-outline-color: var(--branding-focus-outline-color); --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); - --in-content-focus-outline-color: var(--focus-outline-color); - --in-content-focus-outline: var(--focus-outline); } #heading-wordmark { ===================================== browser/components/securitylevel/content/securityLevelPanel.css ===================================== @@ -1,25 +1,25 @@ /* Security Level CSS */ #securityLevel-background { - min-height: 10em; - padding-inline: 16px; - column-gap: 0.5em; + min-height: 150px; + padding-inline: var(--space-large); + column-gap: var(--space-small); display: grid; grid-template: - "top-pad icon" 16px + "top-pad icon" var(--space-large) "title icon" auto "body icon" auto "learn-more icon" auto - "bottom-pad icon" minmax(8px, 1fr) + "bottom-pad icon" minmax(var(--space-small), 1fr) / auto auto; } #securityLevel-background-image { grid-area: icon; - --security-level-icon-size: 9em; + --security-level-icon-size: 130px; width: var(--security-level-icon-size); height: var(--security-level-icon-size); - margin-block: 0.4em; + margin-block: var(--space-small); /* Middle of shield aligns with the panel padding: */ margin-inline-end: calc(-0.5 * var(--security-level-icon-size)); align-self: start; @@ -50,12 +50,12 @@ } #securityLevel-background p { - margin-block: 0 16px; + margin-block: 0 var(--space-large); } /* Override margin in panelUI-shared.css */ #securityLevel-panel toolbarseparator#securityLevel-separator { - margin-inline: 16px; + margin-inline: var(--space-large); } #securityLevel-level { @@ -65,7 +65,7 @@ } #securityLevel-summary { - max-width: 20em; + max-width: 300px; grid-area: body; } ===================================== browser/components/securitylevel/content/securityLevelPreferences.css ===================================== @@ -10,8 +10,8 @@ .security-level-icon { grid-area: icon; align-self: start; - width: 24px; - height: 24px; + width: var(--icon-size-large); + height: var(--icon-size-large); -moz-context-properties: fill; fill: var(--icon-color); margin-block-start: var(--space-xsmall); @@ -97,7 +97,7 @@ #security-level-current { margin-block-start: var(--space-large); background: var(--background-color-box); - border: 1px solid var(--border-color); + border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-small); padding: var(--space-medium); } ===================================== browser/themes/shared/tabbrowser/content-area.css ===================================== @@ -390,16 +390,16 @@ split-view-footer { #statuspanel:is([type="letterboxingStatus"], [previoustype="letterboxingStatus"][inactive]) > #statuspanel-label { background-image: url("chrome://browser/skin/window.svg"); - background-size: 1em; + background-size: var(--icon-size); background-repeat: no-repeat; background-position-y: center; - background-position-x: left 0.5em; + background-position-x: left var(--space-small); &:-moz-locale-dir(rtl) { - background-position-x: right 0.5em; + background-position-x: right var(--space-small); } - padding-inline-start: 2em; + padding-inline-start: calc(var(--space-small) + var(--icon-size) + var(--space-small)); -moz-context-properties: fill; fill: var(--color-accent-primary); @media (forced-colors) { ===================================== python/mozlint/mozlint/cli.py ===================================== @@ -38,7 +38,6 @@ INACTIVE_LINTERS = [ "updatebot", "typescript", "wpt", - "stylelint", "glean-parser", ] ===================================== toolkit/components/resistfingerprinting/content/letterboxing.css ===================================== @@ -17,9 +17,6 @@ } } -/* stylelint-disable stylelint-plugin-mozilla/use-border-color-tokens */ -/* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */ - #tabbrowser-tabbox.letterboxing { --letterboxing-bgcolor: var(--background-color-canvas); /* Match the border radius used for the sidebar. */ @@ -28,7 +25,7 @@ --letterboxing-vertical-alignment: start; --letterboxing-shadow: none; --letterboxing-outline-color: var(--border-color); - --letterboxing-outline-width: 1px; + --letterboxing-outline-width: var(--border-width); @media not ((prefers-contrast) or (forced-colors)) { /* Match the #sidebar outline width. */ View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/compare/317... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/compare/317... You're receiving this email because of your account on gitlab.torproject.org.