henry pushed to branch tor-browser-140.0esr-15.0-1 at The Tor Project / Applications / Tor Browser Commits: cf8b385f by Henry Wilkes at 2025-07-17T15:08:43+01:00 fixup! BB 40925: Implemented the Security Level component TB 43610: Update CSS variable names. Also change the security level shield background to a new variable with closer semantics. - - - - - 1dcc5d46 by Henry Wilkes at 2025-07-17T15:08:45+01:00 fixup! TB 41803: Add some developer tools for working on tor-browser. TB 43610: Add script for missing CSS variables. - - - - - cc26b7f2 by Henry Wilkes at 2025-07-17T15:08:47+01:00 fixup! TB 30237: Add v3 onion services client authentication prompt TB 43610: Update CSS variable names. - - - - - f2ff56fd by Henry Wilkes at 2025-07-17T15:08:48+01:00 fixup! TB 40458: Implement .tor.onion aliases TB 43610: Update CSS variable names. - - - - - 1055f31d by Henry Wilkes at 2025-07-17T15:08:52+01:00 fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection TB 43610: Update CSS variable names. - - - - - 3503b669 by Henry Wilkes at 2025-07-17T15:08:54+01:00 fixup! Temporary changes to about:torconnect for Android. TB 43610: Drop the --onion-color variable. - - - - - 81547102 by Henry Wilkes at 2025-07-17T15:08:55+01:00 fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser TB 43610: Update CSS variable names. Also drop the --onion-opacity and --onion-color variables and use --icon-color instead. - - - - - 7 changed files: - browser/components/onionservices/content/authPreferences.css - browser/components/rulesets/content/aboutRulesets.css - browser/components/securitylevel/content/securityLevelPanel.css - browser/components/securitylevel/content/securityLevelPreferences.css - browser/components/torpreferences/content/torPreferences.css - toolkit/components/torconnect/content/aboutTorConnect.css - + tools/base-browser/missing-css-variables.py Changes: ===================================== browser/components/onionservices/content/authPreferences.css ===================================== @@ -21,7 +21,7 @@ margin-inline-end: 4px; list-style-image: url("chrome://global/skin/icons/warning.svg"); -moz-context-properties: fill; - fill: var(--in-content-warning-icon-color); + fill: var(--icon-color-warning); } /* Make a button appear disabled, whilst still allowing it to keep keyboard ===================================== browser/components/rulesets/content/aboutRulesets.css ===================================== @@ -159,7 +159,7 @@ aside { box-sizing: border-box; border-inline-end: 1px solid var(--in-content-border-color); - background-color: var(--in-content-box-background); + background-color: var(--background-color-box); } #ruleset-heading { @@ -223,7 +223,7 @@ aside { } #ruleset-list .selected { - border-inline-start-color: var(--in-content-accent-color); + border-inline-start-color: var(--color-accent-primary); } #ruleset-list .selected.disabled { @@ -252,7 +252,7 @@ aside { #ruleset-jwk-value { padding: 8px; border-radius: 2px; - background-color: var(--in-content-box-background); + background-color: var(--background-color-box); font-size: 85%; line-break: anywhere; /* ASCII-only text, so can set line-height. */ ===================================== browser/components/securitylevel/content/securityLevelPanel.css ===================================== @@ -15,7 +15,7 @@ background-size: 9em 9em; -moz-context-properties: fill, fill-opacity; fill-opacity: 1; - fill: var(--button-bgcolor); + fill: var(--border-color-card); } /* NOTE: Use ":dir" instead of ":-moz-locale-dir" when panel switches to HTML. */ ===================================== browser/components/securitylevel/content/securityLevelPreferences.css ===================================== @@ -13,7 +13,7 @@ width: 24px; height: 24px; -moz-context-properties: fill; - fill: var(--in-content-icon-color); + fill: var(--icon-color); margin-block-start: var(--space-xsmall); margin-inline-end: var(--space-large); } @@ -92,7 +92,7 @@ #security-level-current { margin-block-start: var(--space-large); - background: var(--in-content-box-background); + background: var(--background-color-box); border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-small); padding: var(--space-medium); ===================================== browser/components/torpreferences/content/torPreferences.css ===================================== @@ -154,7 +154,7 @@ button.spoof-button-disabled { } .tor-focusable-heading:focus-visible { - outline-offset: var(--in-content-focus-outline-offset); + outline-offset: var(--focus-outline-offset); } .bridge-status-badge { @@ -303,7 +303,7 @@ button.spoof-button-disabled { width: 16px; height: 16px; -moz-context-properties: fill; - fill: var(--in-content-icon-color); + fill: var(--icon-color); } .tor-bridges-options-button { @@ -390,8 +390,8 @@ button.spoof-button-disabled { #tor-bridges-grid-display .tor-bridges-grid-cell:focus-visible { /* #tor-bridges-grid-display has focus management for its cells. */ - outline: var(--in-content-focus-outline); - outline-offset: var(--in-content-focus-outline-offset); + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); } .tor-bridges-grid-cell { @@ -551,7 +551,7 @@ button.spoof-button-disabled { justify-self: center; /* fill is the progress, stroke is the empty ring. */ -moz-context-properties: fill, stroke; - fill: var(--in-content-success-icon-color); + fill: var(--icon-color-success); stroke: var(--in-content-border-color); content: url("chrome://browser/content/torpreferences/lox-progress-ring.svg"); } @@ -568,7 +568,7 @@ button.spoof-button-disabled { align-self: center; justify-self: center; -moz-context-properties: fill; - fill: var(--in-content-icon-color); + fill: var(--icon-color); } #tor-bridges-lox-details .tor-bridges-lox-image-inner { @@ -617,7 +617,7 @@ button.spoof-button-disabled { display: grid; /* fill is the icon color, stroke is the border color. */ -moz-context-properties: fill, stroke; - fill: var(--in-content-icon-color); + fill: var(--icon-color); } .tor-bridges-lox-list-item-bridge::before { @@ -633,7 +633,7 @@ button.spoof-button-disabled { } #tor-bridges-lox-unlock-alert .tor-bridges-lox-list-item::before { - stroke: var(--in-content-success-icon-color); + stroke: var(--icon-color-success); } #tor-bridges-lox-remaining-invites { @@ -683,7 +683,7 @@ button.spoof-button-disabled { width: 16px; height: 16px; -moz-context-properties: fill; - fill: var(--in-content-icon-color); + fill: var(--icon-color); } #tor-bridges-provider-icon-telegram { @@ -925,7 +925,7 @@ hbox#torPreferences-requestBridge-incorrectCaptchaHbox { image#torPreferences-requestBridge-errorIcon { list-style-image: url("chrome://global/skin/icons/warning.svg"); -moz-context-properties: fill; - fill: var(--in-content-warning-icon-color); + fill: var(--icon-color-warning); } groupbox#torPreferences-bridges-group textarea { @@ -1030,8 +1030,8 @@ groupbox#torPreferences-bridges-group textarea { } #user-provide-bridge-grid-display:focus-visible { - outline: var(--in-content-focus-outline); - outline-offset: var(--in-content-focus-outline-offset); + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); } /* Connection settings dialog */ ===================================== toolkit/components/torconnect/content/aboutTorConnect.css ===================================== @@ -5,11 +5,6 @@ @import url("chrome://global/skin/tor-colors.css"); @import url("chrome://global/skin/onion-pattern.css"); -:root { - --onion-opacity: 1; - --onion-color: var(--card-outline-color); -} - html { width: 100%; height: 100%; @@ -45,12 +40,12 @@ body:not(.loaded) { } .breadcrumb-item:hover { - color: var(--in-content-accent-color); + color: var(--color-accent-primary); background-color: var(--in-content-button-background-hover); } .breadcrumb-item:active { - color: var(--in-content-accent-color-active); + color: var(--color-accent-primary-active); background-color: var(--in-content-button-background-active); } @@ -73,7 +68,7 @@ body:not(.loaded) { } .breadcrumb-item.active { - color: var(--in-content-accent-color); + color: var(--color-accent-primary); } .breadcrumb-item.disabled, .breadcrumb-item.disabled:hover, .breadcrumb-item.disabled:active { @@ -268,9 +263,9 @@ body.aboutTorConnect { body.aboutTorConnect .title { background-image: url("chrome://global/content/torconnect/tor-connect.svg"); -moz-context-properties: stroke, fill, fill-opacity; - fill-opacity: var(--onion-opacity); - fill: var(--onion-color); - stroke: var(--onion-color); + fill-opacity: 1; + fill: var(--icon-color); + stroke: var(--icon-color); /* Make sure there is no padding between the title and #breadcrumbs. */ padding-block-start: 0; } @@ -285,7 +280,7 @@ body.aboutTorConnect .title:is(.assist, .final) { body.aboutTorConnect .title.location { background-image: url("chrome://global/content/torconnect/connection-location.svg"); - stroke: var(--in-content-warning-icon-color); + stroke: var(--icon-color-warning); } /* Android-specific CSS, to be removed when we use only the native UI. */ @@ -301,13 +296,12 @@ body.aboutTorConnect .title.location { } body.android { - --onion-color: var(--android-dark-text-primary); width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0 24px !important; - color: var(--onion-color); + color: var(--android-dark-text-primary); background: linear-gradient(194deg, #692E9D -0.93%, #393270 48.91%); font: menu; font-size: 14px; ===================================== tools/base-browser/missing-css-variables.py ===================================== @@ -0,0 +1,88 @@ +""" +Simple tool for checking for missing CSS declarations. + +Should be run from the root directory and passed a single CSS file path to +check the variables for. + +Missing variables will be printed to stdout, if any. Variables are considered +missing if they are not declared in the same file or in one of the expected +CSS files. CSS variables that are declared in javascript an unexpected CSS file +will not be found. + +Exits with 0 if no variables are missing. Otherwise exits with 1. +""" + +import re +import sys +from pathlib import Path + +declare_dirs = [ + Path("browser/branding"), + Path("browser/themes"), + Path("toolkit/themes"), +] + +var_dec_regex = re.compile(r"^\s*(?P<name>--[\w_-]+)\s*:") +var_use_regex = re.compile(r":.*(?P<name>--[\w_-]+)") + + +def remove_vars_in_file(var_set: set[str], file_path: Path) -> bool: + """ + Checks the CSS file for declarations of the given variables and removes + them. + + :param var_set: The set of CSS variables to check and remove. + :param file_path: The path to a CSS file to check within. + :returns: Whether the variable set is now empty. + """ + with file_path.open() as file: + for line in file: + var_dec_match = var_dec_regex.match(line) + if not var_dec_match: + continue + var_name = var_dec_match.group("name") + if var_name in var_set: + print(f"{var_name} declared in {file_path}", file=sys.stderr) + var_set.remove(var_name) + if not var_set: + return True + return False + + +def find_missing(file_path: Path) -> set[str]: + """ + Search for CSS variables in the CSS file and check whether any are missing + known declarations. + + :param file_path: The path of the CSS file to check. + :returns: The names of the missing variables. + """ + used_vars: set[str] = set() + + with open(file_path) as file: + for line in file: + for match in var_use_regex.finditer(line): + used_vars.add(match.group("name")) + + if not used_vars: + print("No CSS variables found", file=sys.stderr) + return used_vars + + # Remove any CSS variables that are declared within the same file. + if remove_vars_in_file(used_vars, file_path): + return used_vars + + # And remove any that are in the expected declaration files. + for top_dir in declare_dirs: + for css_file_path in top_dir.rglob("*.css"): + if remove_vars_in_file(used_vars, css_file_path): + return used_vars + + return used_vars + + +missing_vars = find_missing(Path(sys.argv[1])) +for var_name in missing_vars: + print(var_name) + +sys.exit(1 if missing_vars else 0) View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/8b9cbdf... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/8b9cbdf... You're receiving this email because of your account on gitlab.torproject.org.