morgan pushed to branch tor-browser-128.1.0esr-14.0-1 at The Tor Project / Applications / Tor Browser
Commits:
-
5c04abb6
by Henry Wilkes at 2024-08-26T19:28:11+00:00
-
93ecfbc3
by Henry Wilkes at 2024-08-26T19:28:11+00:00
-
8cfb49a3
by Henry Wilkes at 2024-08-26T19:28:11+00:00
9 changed files:
- browser/components/torpreferences/content/builtinBridgeDialog.js
- browser/components/torpreferences/content/connectionPane.xhtml
- browser/components/torpreferences/content/provideBridgeDialog.js
- browser/components/torpreferences/content/requestBridgeDialog.js
- browser/themes/shared/tor-urlbar-button.css
- toolkit/components/torconnect/content/aboutTorConnect.css
- toolkit/components/torconnect/content/aboutTorConnect.html
- toolkit/components/torconnect/content/aboutTorConnect.js
- toolkit/themes/shared/tor-colors.css
Changes:
| ... | ... | @@ -70,6 +70,13 @@ const gBuiltinBridgeDialog = { |
| 70 | 70 | this._result.accepted = true;
|
| 71 | 71 | });
|
| 72 | 72 | |
| 73 | + // Add styling for tor-button to the dialog shadow root.
|
|
| 74 | + const styleLink = document.createElement("link");
|
|
| 75 | + styleLink.rel = "stylesheet";
|
|
| 76 | + styleLink.href =
|
|
| 77 | + "chrome://browser/content/torpreferences/torPreferences.css";
|
|
| 78 | + dialog.shadowRoot.append(styleLink);
|
|
| 79 | + |
|
| 73 | 80 | this._acceptButton = dialog.getButton("accept");
|
| 74 | 81 | |
| 75 | 82 | Services.obs.addObserver(this, TorConnectTopics.StateChange);
|
| ... | ... | @@ -95,6 +102,7 @@ const gBuiltinBridgeDialog = { |
| 95 | 102 | "data-l10n-id",
|
| 96 | 103 | connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-accept"
|
| 97 | 104 | );
|
| 105 | + this._acceptButton.classList.toggle("tor-button", connect);
|
|
| 98 | 106 | },
|
| 99 | 107 | |
| 100 | 108 | observe(subject, topic) {
|
| ... | ... | @@ -133,7 +133,7 @@ |
| 133 | 133 | </menulist>
|
| 134 | 134 | <button
|
| 135 | 135 | id="torPreferences-bridges-buttonChooseBridgeForMe"
|
| 136 | - class="primary"
|
|
| 136 | + class="primary tor-button"
|
|
| 137 | 137 | />
|
| 138 | 138 | </hbox>
|
| 139 | 139 | <html:moz-toggle
|
| ... | ... | @@ -85,7 +85,7 @@ const gProvideBridgeDialog = { |
| 85 | 85 | this._acceptButton = this._dialog.getButton("accept");
|
| 86 | 86 | |
| 87 | 87 | // Inject our stylesheet into the shadow root so that the accept button can
|
| 88 | - // take the spoof-button-disabled styling.
|
|
| 88 | + // take the spoof-button-disabled styling and tor-button styling.
|
|
| 89 | 89 | const styleLink = document.createElement("link");
|
| 90 | 90 | styleLink.rel = "stylesheet";
|
| 91 | 91 | styleLink.href =
|
| ... | ... | @@ -183,22 +183,21 @@ const gProvideBridgeDialog = { |
| 183 | 183 | * Callback for whenever the accept button may need to change.
|
| 184 | 184 | */
|
| 185 | 185 | onAcceptStateChange() {
|
| 186 | + let connect = false;
|
|
| 186 | 187 | if (this._page === "entry") {
|
| 187 | - document.l10n.setAttributes(
|
|
| 188 | - this._acceptButton,
|
|
| 188 | + this._acceptButton.setAttribute(
|
|
| 189 | + "data-l10n-id",
|
|
| 189 | 190 | "user-provide-bridge-dialog-next-button"
|
| 190 | 191 | );
|
| 191 | - this._result.connect = false;
|
|
| 192 | 192 | } else {
|
| 193 | - this._acceptButton.removeAttribute("data-l10n-id");
|
|
| 194 | - const connect = TorConnect.canBeginBootstrap;
|
|
| 195 | - this._result.connect = connect;
|
|
| 196 | - |
|
| 193 | + connect = TorConnect.canBeginBootstrap;
|
|
| 197 | 194 | this._acceptButton.setAttribute(
|
| 198 | 195 | "data-l10n-id",
|
| 199 | 196 | connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-accept"
|
| 200 | 197 | );
|
| 201 | 198 | }
|
| 199 | + this._result.connect = connect;
|
|
| 200 | + this._acceptButton.classList.toggle("tor-button", connect);
|
|
| 202 | 201 | },
|
| 203 | 202 | |
| 204 | 203 | /**
|
| ... | ... | @@ -33,6 +33,13 @@ const gRequestBridgeDialog = { |
| 33 | 33 | "torPreferences-requestBridge-dialog"
|
| 34 | 34 | );
|
| 35 | 35 | |
| 36 | + // Add styling for tor-button to the dialog shadow root.
|
|
| 37 | + const styleLink = document.createElement("link");
|
|
| 38 | + styleLink.rel = "stylesheet";
|
|
| 39 | + styleLink.href =
|
|
| 40 | + "chrome://browser/content/torpreferences/torPreferences.css";
|
|
| 41 | + this._dialog.shadowRoot.append(styleLink);
|
|
| 42 | + |
|
| 36 | 43 | // user may have opened a Request Bridge dialog in another tab, so update the
|
| 37 | 44 | // CAPTCHA image or close out the dialog if we have a bridge list
|
| 38 | 45 | this._dialog.addEventListener("focusin", () => {
|
| ... | ... | @@ -101,6 +108,7 @@ const gRequestBridgeDialog = { |
| 101 | 108 | "data-l10n-id",
|
| 102 | 109 | connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-submit"
|
| 103 | 110 | );
|
| 111 | + this._submitButton.classList.toggle("tor-button", connect);
|
|
| 104 | 112 | },
|
| 105 | 113 | |
| 106 | 114 | observe(subject, topic) {
|
| ... | ... | @@ -26,7 +26,6 @@ |
| 26 | 26 | * urlbar background, but we keep the rounded corners. */
|
| 27 | 27 | outline: var(--focus-outline);
|
| 28 | 28 | outline-offset: var(--focus-outline-offset);
|
| 29 | - outline-color: var(--tor-focus-outline-color);
|
|
| 30 | 29 | /* Calculate the difference between the button's border area and the outline
|
| 31 | 30 | * area. */
|
| 32 | 31 | --tor-urlbar-focus-outline-difference: calc(
|
| ... | ... | @@ -116,10 +116,6 @@ html { |
| 116 | 116 | list-style-image: url("chrome://global/content/torconnect/bridge.svg");
|
| 117 | 117 | }
|
| 118 | 118 | |
| 119 | -button, select {
|
|
| 120 | - --in-content-focus-outline-color: var(--tor-focus-outline-color);
|
|
| 121 | -}
|
|
| 122 | - |
|
| 123 | 119 | #locationDropdownLabel {
|
| 124 | 120 | margin-block: auto;
|
| 125 | 121 | margin-inline: 4px;
|
| ... | ... | @@ -75,8 +75,16 @@ |
| 75 | 75 | <button id="restartButton" hidden="true"></button>
|
| 76 | 76 | <button id="configureButton" hidden="true"></button>
|
| 77 | 77 | <button id="cancelButton" hidden="true"></button>
|
| 78 | - <button id="connectButton" hidden="true"></button>
|
|
| 79 | - <button id="tryBridgeButton" hidden="true"></button>
|
|
| 78 | + <button
|
|
| 79 | + id="connectButton"
|
|
| 80 | + hidden="true"
|
|
| 81 | + class="tor-button"
|
|
| 82 | + ></button>
|
|
| 83 | + <button
|
|
| 84 | + id="tryBridgeButton"
|
|
| 85 | + hidden="true"
|
|
| 86 | + class="tor-button"
|
|
| 87 | + ></button>
|
|
| 80 | 88 | </span>
|
| 81 | 89 | </div>
|
| 82 | 90 | </div>
|
| ... | ... | @@ -190,7 +190,6 @@ class AboutTorConnect { |
| 190 | 190 | |
| 191 | 191 | show(element, primary = false) {
|
| 192 | 192 | element.classList.toggle("primary", primary);
|
| 193 | - element.classList.toggle("tor-button", primary);
|
|
| 194 | 193 | element.removeAttribute("hidden");
|
| 195 | 194 | }
|
| 196 | 195 |
| 1 | +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
|
| 2 | + |
|
| 1 | 3 | :root {
|
| 2 | 4 | /* Photon colors not available in Firefox. */
|
| 3 | 5 | --purple-30: #c069ff;
|
| ... | ... | @@ -126,19 +128,34 @@ |
| 126 | 128 | |
| 127 | 129 | /* Has a higher specificity than `button` and `button.primary`. */
|
| 128 | 130 | button.tor-button:is(*, .primary),
|
| 131 | +xul|button.tor-button:is(*, [default]),
|
|
| 129 | 132 | .tor-button {
|
| 130 | 133 | color: var(--tor-button-text-color);
|
| 131 | 134 | background-color: var(--tor-button-background-color);
|
| 132 | 135 | }
|
| 133 | 136 | |
| 134 | -button.tor-button:is(*, .primary):hover,
|
|
| 135 | -.tor-button:hover {
|
|
| 137 | +:is(
|
|
| 138 | + button.tor-button:is(*, .primary),
|
|
| 139 | + xul|button.tor-button:is(*, [default]),
|
|
| 140 | + .tor-button
|
|
| 141 | +):not([disabled]):hover {
|
|
| 136 | 142 | color: var(--tor-button-text-color-hover);
|
| 137 | 143 | background-color: var(--tor-button-background-color-hover);
|
| 138 | 144 | }
|
| 139 | 145 | |
| 140 | -button.tor-button:is(*, .primary):hover:active,
|
|
| 141 | -.tor-button:hover:active {
|
|
| 146 | +:is(
|
|
| 147 | + button.tor-button:is(*, .primary),
|
|
| 148 | + xul|button.tor-button:is(*, [default]),
|
|
| 149 | + .tor-button
|
|
| 150 | +):not([disabled]):hover:active {
|
|
| 142 | 151 | color: var(--tor-button-text-color-active);
|
| 143 | 152 | background-color: var(--tor-button-background-color-active);
|
| 144 | 153 | }
|
| 154 | + |
|
| 155 | +:is(
|
|
| 156 | + button.tor-button:is(*, .primary),
|
|
| 157 | + xul|button.tor-button:is(*, [default]),
|
|
| 158 | + .tor-button
|
|
| 159 | +):focus-visible {
|
|
| 160 | + outline-color: var(--tor-focus-outline-color);
|
|
| 161 | +} |