Skip to content
Snippets Groups Projects
Verified Commit 619fff39 authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in... 

fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 41618 - Remove connect bar, and swap internet and connection icons
in tor connection preferences.
parent fafa8778
Branches
Tags
1 merge request!694Bug 41796: Rebased on top of FIREFOX_ESR_115_BASE
Show whitespace changes
Inline Side-by-side
Showing
with 110 additions and 253 deletions
browser/components/torpreferences/content/check.svg deleted 100644 → 0
+ 0
− 3
View file @ fafa8778
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.02301 13L1.18301 8.16099C1.07063 8.04262 1.00892 7.88505 1.01104 7.72185C1.01316 7.55865 1.07893 7.40273 1.19434 7.28732C1.30975 7.17191 1.46567 7.10613 1.62887 7.10402C1.79207 7.1019 1.94964 7.16361 2.06801 7.27599L6.37501 11.584L13.934 4.02299C14.0517 3.90617 14.2107 3.84061 14.3765 3.84061C14.5423 3.84061 14.7014 3.90617 14.819 4.02299C14.9358 4.14063 15.0014 4.29969 15.0014 4.46549C15.0014 4.63128 14.9358 4.79034 14.819 4.90799L6.72901 12.998L6.02301 13Z" fill="context-fill"/>
</svg>
browser/components/torpreferences/content/connectionPane.js
+ 54
− 83
View file @ 619fff39
......@@ -72,25 +72,11 @@ const gConnectionPane = (function () {
category: {
title: "label#torPreferences-labelCategory",
},
messageBox: {
box: "div#torPreferences-connectMessageBox",
message: "td#torPreferences-connectMessageBox-message",
button: "button#torPreferences-connectMessageBox-button",
},
torPreferences: {
header: "h1#torPreferences-header",
description: "span#torPreferences-description",
learnMore: "label#torPreferences-learnMore",
},
status: {
internetLabel: "#torPreferences-status-internet-label",
internetTest: "#torPreferences-status-internet-test",
internetIcon: "#torPreferences-status-internet-statusIcon",
internetStatus: "#torPreferences-status-internet-status",
torLabel: "#torPreferences-status-tor-label",
torIcon: "#torPreferences-status-tor-statusIcon",
torStatus: "#torPreferences-status-tor-status",
},
quickstart: {
header: "h2#torPreferences-quickstart-header",
description: "span#torPreferences-quickstart-description",
......@@ -175,47 +161,6 @@ const gConnectionPane = (function () {
const prefpane = document.getElementById("mainPrefPane");
// 'Connect to Tor' Message Bar
const messageBox = prefpane.querySelector(selectors.messageBox.box);
const messageBoxMessage = prefpane.querySelector(
selectors.messageBox.message
);
const messageBoxButton = prefpane.querySelector(
selectors.messageBox.button
);
// wire up connect button
messageBoxButton.addEventListener("click", () => {
TorConnect.openTorConnect({ beginBootstrap: true });
});
this._populateMessagebox = () => {
if (TorConnect.canBeginBootstrap) {
// set messagebox style and text
if (TorConnect.hasEverFailed) {
messageBox.parentNode.style.display = null;
messageBox.className = "error";
messageBoxMessage.innerText = TorStrings.torConnect.tryAgainMessage;
messageBoxButton.innerText = TorStrings.torConnect.tryAgain;
} else {
messageBox.parentNode.style.display = null;
messageBox.className = "warning";
messageBoxMessage.innerText = TorStrings.torConnect.connectMessage;
messageBoxButton.innerText = TorStrings.torConnect.torConnectButton;
}
} else {
// we need to explicitly hide the groupbox, as switching between
// the tor pane and other panes will 'unhide' (via the 'hidden'
// attribute) the groupbox, offsetting all of the content down
// by the groupbox's margin (even if content is 0 height)
messageBox.parentNode.style.display = "none";
messageBox.className = "hidden";
messageBoxMessage.innerText = "";
messageBoxButton.innerText = "";
}
};
this._populateMessagebox();
// Heading
prefpane.querySelector(selectors.torPreferences.header).innerText =
TorStrings.settings.categoryTitle;
......@@ -236,12 +181,16 @@ const gConnectionPane = (function () {
}
// Internet and Tor status
prefpane.querySelector(selectors.status.internetLabel).textContent =
const internetStatus = document.getElementById(
"torPreferences-status-internet"
);
internetStatus.querySelector(".torPreferences-status-name").textContent =
TorStrings.settings.statusInternetLabel;
prefpane.querySelector(selectors.status.torLabel).textContent =
TorStrings.settings.statusTorLabel;
const internetTest = prefpane.querySelector(
selectors.status.internetTest
const internetResult = internetStatus.querySelector(
".torPreferences-status-result"
);
const internetTest = document.getElementById(
"torPreferences-status-internet-test"
);
internetTest.setAttribute(
"label",
......@@ -250,42 +199,65 @@ const gConnectionPane = (function () {
internetTest.addEventListener("command", () => {
this.onInternetTest();
});
const internetIcon = prefpane.querySelector(
selectors.status.internetIcon
const torConnectStatus = document.getElementById(
"torPreferences-status-tor-connect"
);
torConnectStatus.querySelector(
".torPreferences-status-name"
).textContent = TorStrings.settings.statusTorLabel;
const torConnectResult = torConnectStatus.querySelector(
".torPreferences-status-result"
);
const internetStatus = prefpane.querySelector(
selectors.status.internetStatus
const torConnectButton = document.getElementById(
"torPreferences-status-tor-connect-button"
);
const torIcon = prefpane.querySelector(selectors.status.torIcon);
const torStatus = prefpane.querySelector(selectors.status.torStatus);
torConnectButton.setAttribute(
"label",
TorStrings.torConnect.torConnectButton
);
torConnectButton.addEventListener("command", () => {
TorConnect.openTorConnect({ beginBootstrap: true });
});
this._populateStatus = () => {
switch (this._internetStatus) {
case InternetStatus.Unknown:
internetTest.removeAttribute("hidden");
break;
case InternetStatus.Online:
internetTest.setAttribute("hidden", "true");
internetIcon.className = "online";
internetStatus.textContent =
internetStatus.classList.remove("offline");
internetResult.textContent =
TorStrings.settings.statusInternetOnline;
internetResult.hidden = false;
break;
case InternetStatus.Offline:
internetTest.setAttribute("hidden", "true");
internetIcon.className = "offline";
internetStatus.textContent =
internetStatus.classList.add("offline");
internetResult.textContent =
TorStrings.settings.statusInternetOffline;
internetResult.hidden = false;
break;
case InternetStatus.Unknown:
default:
internetStatus.classList.remove("offline");
internetResult.hidden = true;
break;
}
// FIXME: What about the TorConnectState.Disabled state?
if (TorConnect.state === TorConnectState.Bootstrapped) {
torIcon.className = "connected";
torStatus.textContent = TorStrings.settings.statusTorConnected;
} else if (TorConnect.potentiallyBlocked) {
torIcon.className = "blocked";
torStatus.textContent = TorStrings.settings.statusTorBlocked;
torConnectStatus.classList.add("connected");
torConnectStatus.classList.remove("blocked");
torConnectResult.textContent = TorStrings.settings.statusTorConnected;
// NOTE: If the button is focused when we hide it, the focus may be
// lost. But we don't have an obvious place to put the focus instead.
torConnectButton.hidden = true;
} else {
torIcon.className = "";
torStatus.textContent = TorStrings.settings.statusTorNotConnected;
torConnectStatus.classList.remove("connected");
torConnectStatus.classList.toggle(
"blocked",
TorConnect.potentiallyBlocked
);
torConnectResult.textContent = TorConnect.potentiallyBlocked
? TorStrings.settings.statusTorBlocked
: TorStrings.settings.statusTorNotConnected;
torConnectButton.hidden = false;
}
};
this._populateStatus();
......@@ -1036,7 +1008,6 @@ const gConnectionPane = (function () {
},
onStateChange() {
this._populateMessagebox();
this._populateStatus();
this._showAutoconfiguration();
this._populateBridgeCards();
......
......
browser/components/torpreferences/content/connectionPane.xhtml
+ 18
− 32
View file @ 619fff39
......@@ -5,29 +5,6 @@
src="chrome://browser/content/torpreferences/connectionPane.js"
/>
<html:template id="template-paneConnection">
<!-- Tor Connect Message Box -->
<groupbox data-category="paneConnection" hidden="true">
<html:div
id="torPreferences-connectMessageBox"
class="subcategory"
data-category="paneConnection"
hidden="true"
>
<html:table>
<html:tr>
<html:td>
<html:div id="torPreferences-connectMessageBox-icon" />
</html:td>
<html:td id="torPreferences-connectMessageBox-message"> </html:td>
<html:td>
<html:button id="torPreferences-connectMessageBox-button">
</html:button>
</html:td>
</html:tr>
</html:table>
</html:div>
</groupbox>
<hbox
id="torPreferencesCategory"
class="subcategory"
......@@ -54,15 +31,24 @@
hidden="true"
>
<hbox id="torPreferences-status-box">
<image id="torPreferences-status-internet-icon" />
<html:span id="torPreferences-status-internet-label" />
<hbox
id="torPreferences-status-internet"
class="torPreferences-status-grouping"
>
<image class="torPreferences-status-icon" />
<html:span class="torPreferences-status-name"></html:span>
<html:span class="torPreferences-status-result"></html:span>
<button id="torPreferences-status-internet-test" />
<image id="torPreferences-status-internet-statusIcon" />
<html:span id="torPreferences-status-internet-status" />
<image id="torPreferences-status-tor-icon" />
<html:span id="torPreferences-status-tor-label" />
<image id="torPreferences-status-tor-statusIcon" />
<html:span id="torPreferences-status-tor-status" />
</hbox>
<hbox
id="torPreferences-status-tor-connect"
class="torPreferences-status-grouping"
>
<image class="torPreferences-status-icon" />
<html:span class="torPreferences-status-name"></html:span>
<html:span class="torPreferences-status-result"></html:span>
<button id="torPreferences-status-tor-connect-button" />
</hbox>
</hbox>
</groupbox>
......
......
browser/components/torpreferences/content/network-broken.svg 0 → 100644
+ 5
− 0
View file @ 619fff39
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="18.6565" height="1.22295" rx="0.611475" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.9464 14.1921)" fill="context-fill"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.9498 1.68761C5.14904 0.918177 6.55296 0.5 8 0.5C9.98912 0.5 11.8968 1.29018 13.3033 2.6967C14.7098 4.10322 15.5 6.01088 15.5 8C15.5 9.44704 15.0818 10.851 14.3124 12.0502L13.3945 11.1323C13.8373 10.3656 14.1137 9.51118 14.202 8.625H11.973C11.9515 8.95148 11.9131 9.27556 11.8582 9.596L9.63719 7.375H10.719C10.573 5.44665 9.75105 3.63171 8.398 2.25H7.602C7.08087 2.78217 6.63852 3.37861 6.28323 4.02104L5.37173 3.10954C5.55124 2.81339 5.74752 2.52639 5.96 2.25H5.552C5.31395 2.35224 5.08325 2.46884 4.86107 2.59888L3.9498 1.68761ZM13.0242 4.30006C12.3637 3.39877 11.4738 2.69088 10.447 2.25H10.04C11.1778 3.72922 11.8509 5.51288 11.974 7.375H14.203C14.0918 6.26313 13.6848 5.20135 13.0242 4.30006Z" fill="context-fill"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.08673 2.33343C2.9529 2.44948 2.82278 2.57061 2.6967 2.6967C1.29018 4.10322 0.5 6.01088 0.5 8C0.5 9.98912 1.29018 11.8968 2.6967 13.3033C4.10322 14.7098 6.01088 15.5 8 15.5C9.98912 15.5 11.8968 14.7098 13.3033 13.3033C13.4294 13.1772 13.5505 13.0471 13.6666 12.9133L12.7733 12.02C12.1456 12.7694 11.3496 13.3627 10.448 13.75H10.039C10.7209 12.8639 11.2359 11.8685 11.5656 10.8123L10.5448 9.79147C10.2135 11.2778 9.47326 12.6509 8.397 13.75H7.602C6.24895 12.3683 5.427 10.5534 5.281 8.625H9.37831L8.12831 7.375H5.281C5.34173 6.57283 5.51944 5.79028 5.80369 5.05038L4.8504 4.09709C4.38292 5.12591 4.10162 6.23576 4.026 7.375H1.797C1.90802 6.2632 2.31487 5.20145 2.97523 4.30016C3.26721 3.90165 3.60404 3.54094 3.97771 3.22441L3.08673 2.33343ZM2.97497 11.7C3.63536 12.6014 4.52524 13.3092 5.552 13.75H5.96C4.82222 12.2708 4.14912 10.4871 4.026 8.625H1.797C1.90781 9.73686 2.31458 10.7987 2.97497 11.7Z" fill="context-fill"/>
</svg>
browser/components/torpreferences/content/network.svg
+ 2
− 5
View file @ 619fff39
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8.5 1a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm2.447 1.75a6.255 6.255 0 0 1 3.756 5.125l-2.229 0A9.426 9.426 0 0 0 10.54 2.75l.407 0zm-2.049 0a8.211 8.211 0 0 1 2.321 5.125l-5.438 0A8.211 8.211 0 0 1 8.102 2.75l.796 0zm-2.846 0 .408 0a9.434 9.434 0 0 0-1.934 5.125l-2.229 0A6.254 6.254 0 0 1 6.052 2.75zm0 11.5a6.252 6.252 0 0 1-3.755-5.125l2.229 0A9.426 9.426 0 0 0 6.46 14.25l-.408 0zm2.05 0a8.211 8.211 0 0 1-2.321-5.125l5.437 0a8.211 8.211 0 0 1-2.321 5.125l-.795 0zm2.846 0-.409 0a9.418 9.418 0 0 0 1.934-5.125l2.229 0a6.253 6.253 0 0 1-3.754 5.125z"/>
<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path d="m 8,0.5 a 7.5,7.5 0 1 0 0,15 7.5,7.5 0 0 0 0,-15 z m 2.447,1.75 a 6.255,6.255 0 0 1 3.756,5.125 H 11.974 A 9.426,9.426 0 0 0 10.04,2.25 Z m -2.049,0 a 8.211,8.211 0 0 1 2.321,5.125 H 5.281 A 8.211,8.211 0 0 1 7.602,2.25 Z m -2.846,0 H 5.96 A 9.434,9.434 0 0 0 4.026,7.375 H 1.797 A 6.254,6.254 0 0 1 5.552,2.25 Z m 0,11.5 A 6.252,6.252 0 0 1 1.797,8.625 H 4.026 A 9.426,9.426 0 0 0 5.96,13.75 Z m 2.05,0 A 8.211,8.211 0 0 1 5.281,8.625 h 5.437 A 8.211,8.211 0 0 1 8.397,13.75 Z m 2.846,0 h -0.409 a 9.418,9.418 0 0 0 1.934,-5.125 h 2.229 a 6.253,6.253 0 0 1 -3.754,5.125 z" fill="context-fill" />
</svg>
browser/components/torpreferences/content/torPreferences.css
+ 30
− 129
View file @ 619fff39
......@@ -10,120 +10,25 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before {
scale: -1;
}
/* Connect Message Box */
#torPreferences-connectMessageBox {
display: block;
position: relative;
width: auto;
min-height: 32px;
border-radius: 4px;
padding: 8px;
}
#torPreferences-connectMessageBox.hidden {
display: none;
}
#torPreferences-connectMessageBox.error {
background-color: var(--purple-50);
color: white;
}
#torPreferences-connectMessageBox.warning {
background-color: var(--purple-50);
color: white;
}
#torPreferences-connectMessageBox table {
border-collapse: collapse;
}
#torPreferences-connectMessageBox td {
vertical-align: middle;
}
#torPreferences-connectMessageBox td:first-child {
width: 16px;
}
#torPreferences-connectMessageBox-icon {
width: 16px;
height: 16px;
mask-repeat: no-repeat !important;
mask-size: 16px !important;
}
#torPreferences-connectMessageBox.error #torPreferences-connectMessageBox-icon
{
mask: url("chrome://browser/content/torconnect/onion-slash-fillable.svg");
background-color: white;
}
#torPreferences-connectMessageBox.warning #torPreferences-connectMessageBox-icon
{
mask: url("chrome://browser/skin/onion.svg");
background-color: white;
}
/* Status */
#torPreferences-connectMessageBox-message {
line-height: 16px;
padding-inline-start: 8px;
#torPreferences-status-box {
display: flex;
align-items: center;
gap: 32px;
}
#torPreferences-connectMessageBox-button {
display: block;
width: auto;
border-radius: 4px;
border: 0;
padding-inline: 18px;
padding-block: 8px;
margin-block: 0px;
margin-inline-start: 8px;
margin-inline-end: 0px;
font-size: 1.0em;
font-weight: 600;
.torPreferences-status-grouping {
display: flex;
align-items: center;
white-space: nowrap;
color: white;
}
#torPreferences-connectMessageBox.error #torPreferences-connectMessageBox-button {
background-color: var(--purple-70);
}
#torPreferences-connectMessageBox.error #torPreferences-connectMessageBox-button:hover {
background-color: var(--purple-80);
}
#torPreferences-connectMessageBox.error #torPreferences-connectMessageBox-button:active {
background-color: var(--purple-90);
}
#torPreferences-connectMessageBox.warning #torPreferences-connectMessageBox-button {
background-color: var(--purple-70);
}
#torPreferences-connectMessageBox.warning #torPreferences-connectMessageBox-button:hover {
background-color: var(--purple-80);
}
#torPreferences-connectMessageBox.warning #torPreferences-connectMessageBox-button:active {
background-color: var(--purple-90);
}
/* Status */
#torPreferences-status-box {
display: flex;
align-items: center;
.torPreferences-status-grouping > * {
flex: 0 0 auto;
}
#torPreferences-status-internet-icon, #torPreferences-status-tor-icon {
.torPreferences-status-icon {
width: 18px;
height: 18px;
margin-inline-end: 8px;
......@@ -131,51 +36,47 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before {
fill: var(--in-content-text-color);
}
#torPreferences-status-internet-icon {
#torPreferences-status-internet .torPreferences-status-icon {
list-style-image: url("chrome://browser/content/torpreferences/network.svg");
}
#torPreferences-status-tor-icon {
list-style-image: url("chrome://browser/skin/onion.svg");
#torPreferences-status-tor-connect .torPreferences-status-icon {
list-style-image: url("chrome://browser/content/torconnect/tor-connect-broken.svg");
}
#torPreferences-status-internet-label, #torPreferences-status-tor-label {
.torPreferences-status-name {
font-weight: bold;
margin-inline-end: 0.75em;
}
#torPreferences-status-internet-status {
margin-inline-end: 32px;
}
#torPreferences-status-internet-statusIcon.online,
#torPreferences-status-internet-statusIcon.offline,
#torPreferences-status-tor-statusIcon {
margin-inline-start: 12px;
margin-inline-end: 9px;
.torPreferences-status-result {
margin-inline-end: 8px;
}
#torPreferences-status-internet-statusIcon, #torPreferences-status-tor-statusIcon {
-moz-context-properties: fill;
#torPreferences-status-internet.offline .torPreferences-status-icon {
list-style-image: url("chrome://browser/content/torpreferences/network-broken.svg");
}
#torPreferences-status-internet-statusIcon.online, #torPreferences-status-tor-statusIcon.connected {
list-style-image: url("chrome://browser/content/torpreferences/check.svg");
#torPreferences-status-tor-connect.connected .torPreferences-status-icon {
list-style-image: url("chrome://browser/content/torconnect/tor-connect.svg");
fill: var(--purple-60);
}
@media (prefers-color-scheme: dark) {
#torPreferences-status-internet-statusIcon.online, #torPreferences-status-tor-statusIcon.connected {
#torPreferences-status-tor-connect.connected .torPreferences-status-icon {
fill: var(--purple-30);
}
}
#torPreferences-status-internet-statusIcon.offline, #torPreferences-status-tor-statusIcon:not(.connected) {
list-style-image: url("chrome://global/skin/icons/warning.svg");
fill: var(--warning-color);
#torPreferences-status-tor-connect.blocked .torPreferences-status-icon {
/* Same as .tor-connect-status-potentially-blocked. */
fill: #c50042;
}
#torPreferences-status-tor-statusIcon.blocked {
fill: var(--in-content-danger-button-background);
@media (prefers-color-scheme: dark) {
#torPreferences-status-tor-connect.blocked .torPreferences-status-icon {
fill: #ff9aa2;
}
}
/* Bridge settings */
......
......
browser/components/torpreferences/jar.mn
+ 1
− 1
View file @ 619fff39
......@@ -3,10 +3,10 @@ browser.jar:
content/browser/torpreferences/bridgeQrDialog.jsm (content/bridgeQrDialog.jsm)
content/browser/torpreferences/builtinBridgeDialog.xhtml (content/builtinBridgeDialog.xhtml)
content/browser/torpreferences/builtinBridgeDialog.jsm (content/builtinBridgeDialog.jsm)
content/browser/torpreferences/check.svg (content/check.svg)
content/browser/torpreferences/connectionSettingsDialog.xhtml (content/connectionSettingsDialog.xhtml)
content/browser/torpreferences/connectionSettingsDialog.jsm (content/connectionSettingsDialog.jsm)
content/browser/torpreferences/network.svg (content/network.svg)
content/browser/torpreferences/network-broken.svg (content/network-broken.svg)
content/browser/torpreferences/provideBridgeDialog.xhtml (content/provideBridgeDialog.xhtml)
content/browser/torpreferences/provideBridgeDialog.jsm (content/provideBridgeDialog.jsm)
content/browser/torpreferences/requestBridgeDialog.xhtml (content/requestBridgeDialog.xhtml)
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment