Skip to content
This repository was archived by the owner on Nov 6, 2023. It is now read-only.

Commit 59c3655

Browse files
zoraconzoracon
authored
New UX for HTTPS Everywhere: For Release (#17854)
* Layout new css file * Basis for new UX * Add more to UI - animation - adjust content and spacing * Add in new icons and shift counter * Amend failing tests and apply review feedback - The plain visibility test of "seeing" an element by Selenium breaks on Chrome - The checkbox being visibily hidden by CSS will break on the Chrome unit tests - Changed method to making sure checkbox ID is present and then checking if selected * Add in translations strings
1 parent f572b45 commit 59c3655

File tree

14 files changed

+455
-188
lines changed

14 files changed

+455
-188
lines changed

‎chromium/background-scripts/background.js‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -33,26 +33,22 @@ async function initializeAllRules() {
3333
* Load preferences. Structure is:
3434
* {
3535
* httpNowhere: Boolean,
36-
* showCounter: Boolean,
3736
* isExtensionEnabled: Boolean
3837
* }
3938
*/
4039
var httpNowhereOn = false;
41-
var showCounter = true;
4240
var isExtensionEnabled = true;
4341
let disabledList = new Set();
4442

4543
function initializeStoredGlobals() {
4644
return new Promise(resolve => {
4745
store.get({
4846
httpNowhere: false,
49-
showCounter: true,
5047
globalEnabled: true,
5148
enableMixedRulesets: false,
52-
disabledList: [],
49+
disabledList: []
5350
}, function(item) {
5451
httpNowhereOn = item.httpNowhere;
55-
showCounter = item.showCounter;
5652
isExtensionEnabled = item.globalEnabled;
5753
for (let disabledSite of item.disabledList) {
5854
disabledList.add(disabledSite);
@@ -92,10 +88,6 @@ chrome.storage.onChanged.addListener(async function(changes, areaName) {
9288
httpNowhereOn = changes.httpNowhere.newValue;
9389
updateState();
9490
}
95-
if ('showCounter' in changes) {
96-
showCounter = changes.showCounter.newValue;
97-
updateState();
98-
}
9991
if ('globalEnabled' in changes) {
10092
isExtensionEnabled = changes.globalEnabled.newValue;
10193
updateState();
@@ -160,7 +152,6 @@ function updateState () {
160152
if (!tabs || tabs.length === 0) {
161153
return;
162154
}
163-
const tabId = tabs[0].id;
164155
const tabUrl = new URL(tabs[0].url);
165156

166157
if (disabledList.has(tabUrl.host) || iconState == "disabled") {
@@ -172,26 +163,13 @@ function updateState () {
172163
});
173164
}
174165
} else {
175-
176166
if ('setIcon' in chrome.browserAction) {
177167
chrome.browserAction.setIcon({
178168
path: {
179169
38: 'images/icons/icon-' + iconState + '-38.png'
180170
}
181171
});
182172
}
183-
184-
const activeCount = appliedRulesets.getActiveRulesetCount(tabId);
185-
186-
if ('setBadgeBackgroundColor' in chrome.browserAction) {
187-
chrome.browserAction.setBadgeBackgroundColor({ color: '#666666', tabId });
188-
}
189-
190-
const showBadge = activeCount > 0 && isExtensionEnabled && showCounter;
191-
192-
if ('setBadgeText' in chrome.browserAction) {
193-
chrome.browserAction.setBadgeText({ text: showBadge ? String(activeCount) : '', tabId });
194-
}
195173
}
196174
});
197175
}

‎chromium/images/HTTPS-Everywhere-Logo.png‎

8.32 KB
Loading

‎chromium/images/icons/SettingsIcon.png‎

888 Bytes
Loading

‎chromium/images/icons/icon-active-128.png‎

0 Bytes
Loading

‎chromium/images/icons/icon-active-38.png‎

-344 Bytes
Loading

‎chromium/images/icons/icon-active-48.png‎

-77 Bytes
Loading

‎chromium/images/icons/icon-blocking-38.png‎

-348 Bytes
Loading

‎chromium/images/icons/icon-disabled-38.png‎

-339 Bytes
Loading

‎chromium/pages/popup/index.html‎

Lines changed: 79 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -11,78 +11,100 @@
1111
</head>
1212
<body>
1313
<header>
14-
<h1 data-i18n="about_ext_name"></h1>
14+
<div class="logo-container">
15+
<img src="../../images/HTTPS-Everywhere-Logo.png" alt="HTTPS Everywhere logo">
16+
</div>
17+
18+
<small>
19+
<span data-i18n="about_version">Version</span>: <span id="current-version"></span>
20+
<br>
21+
<span id="rulesets-versions"></span>
22+
</small>
1523
</header>
1624

17-
<section id="disableButton" class="options" style="visibility: hidden;">
18-
<div class="onoffswitch">
19-
<input id="onoffswitch" type="checkbox" checked><label data-i18n="menu_globalEnable" for="onoffswitch"></label>
25+
<section id="disableButton" class="options settings_block" style="visibility: hidden;">
26+
<div class="onoffswitch switch" aria-label="Toggle on or off">
27+
<h1 id="onoffswitch_label" data-i18n="menu_globalEnable"></h1>
28+
<span class="slider round"></span>
29+
<input aria-hidden="true" id="onoffswitch" type="checkbox" checked> <label id="onoffswitch__label" for="onoffswitch">
30+
</label>
2031
</div>
2132
</section>
2233

23-
<section id="HttpNowhere" class="options" style="visibility: hidden;">
24-
<input id="http-nowhere-checkbox" type="checkbox"><label data-i18n="menu_encryptAllSitesEligible" for="http-nowhere-checkbox"></label>
34+
<section id="HttpNowhere" class="options settings_block" style="visibility: hidden;">
35+
<h1 id="HttpNowhere__header" data-i18n="menu_encryptAllSitesEligible"></h1>
36+
<input aria-hidden="true" id="http-nowhere-checkbox" type="checkbox"><label id="http-nowhere-checkbox_label" aria-label="Toggle on or off" for="http-nowhere-checkbox"></label>
37+
<h2 id="HttpNowhere__explained" data-i18n="menu_httpNoWhereExplained"></h2>
38+
<span id="HttpNowhere__see_more" class="see_more__arrow down" aria-label="Listen or See more explanation"></span>
39+
<span id="HttpNowhere__see_more--prompt" class="see_more__prompt" data-i18n="menu_seeMore"></span>
40+
<div class="see_more__content hide">
41+
<p class="see_more--clarified" data-i18n="menu_httpNoWhereMore"></p>
42+
</div>
2543
</section>
2644

27-
<div id="RuleManagement">
28-
<section id="disableEnableSection">
29-
<a href="javascript:void 0" id="disable-on-this-site" data-i18n="chrome_disable_on_this_site"></a>
30-
<a href="javascript:void 0" id="enable-on-this-site" data-i18n="chrome_enable_on_this_site"></a>
45+
<section id="RuleManagement" class="settings_block">
46+
<section id="settingsForThisSite">
47+
<h1 data-i18n="chrome_settings_for_this_site_header"></h1>
48+
<img class="settingsForThisSite__gear-icon" src="../../images/icons/SettingsIcon.png" alt="gear icon" aria-hidden="true" >
49+
<h2 data-i18n="chrome_settings_for_this_site_subheader"></h2>
3150
</section>
3251

33-
<section id="addRuleSection">
34-
<a href="javascript:void 0" id="add-rule-link" data-i18n="chrome_add_rule"></a>
35-
<div id="add-new-rule-div" style="display: none">
36-
<h3 data-i18n="about_add_new_rule"></h3>
37-
<p data-i18n="chrome_always_https_for_host"></p>
38-
<label for="new-rule-host" data-i18n="chrome_host"></label><br>
39-
<input size="50" id="new-rule-host" type="text" disabled><br>
40-
<div id="new-rule-regular-text">
41-
<a href="javascript:void 0" id="new-rule-show-advanced-link" data-i18n="chrome_show_advanced"></a><br>
42-
</div>
43-
<div id="new-rule-advanced" style="display: none">
44-
<a href="javascript:void 0" id="new-rule-hide-advanced-link" data-i18n="chrome_hide_advanced"></a><br>
45-
<br>
46-
<label for="new-rule-name" data-i18n="chrome_rule_name"></label><br>
47-
<input size="50" id="new-rule-name" type="text"><br>
48-
<label for="new-rule-regex" data-i18n="chrome_regex"></label><br>
49-
<input size="50" id="new-rule-regex" type="text"><br>
50-
<label for="new-rule-redirect" data-i18n="chrome_redirect_to"></label><br>
51-
<input size="50" id="new-rule-redirect" type="text"><br>
52+
<span id="RuleManagement__see_more" class="see_more__arrow down" aria-label="Listen or See more explanation"></span>
53+
<span id="RuleManagement__see_more--prompt" class="see_more__prompt" data-i18n="menu_seeMore"></span>
54+
<div class="see_more__content hide">
55+
<p class="see_more--clarified" data-i18n="chrome_settings_for_this_site_explained"></p>
56+
57+
<section id="disableEnableSection">
58+
<a href="javascript:void 0" id="disable-on-this-site" class="button" data-i18n="chrome_disable_on_this_site"></a>
59+
<a href="javascript:void 0" id="enable-on-this-site" class="button" data-i18n="chrome_enable_on_this_site"></a>
60+
</section>
61+
62+
<section id="addRuleSection">
63+
<a href="javascript:void 0" id="add-rule-link" class="button" data-i18n="chrome_add_rule"></a>
64+
<div id="add-new-rule-div" style="display: none">
65+
<h3 data-i18n="about_add_new_rule"></h3>
66+
<p data-i18n="chrome_always_https_for_host"></p>
67+
<label for="new-rule-host" data-i18n="chrome_host" class="label_nontoggle"></label>
68+
<input size="50" id="new-rule-host" type="text" disabled><br>
69+
<div id="new-rule-regular-text">
70+
<a href="javascript:void 0" id="new-rule-show-advanced-link" class="button" data-i18n="chrome_show_advanced"></a><br>
71+
</div>
72+
<div id="new-rule-advanced" style="display: none">
73+
<a href="javascript:void 0" id="new-rule-hide-advanced-link" class="button" data-i18n="chrome_hide_advanced"></a><br>
74+
<label for="new-rule-name" data-i18n="chrome_rule_name" class="label_nontoggle"></label>
75+
<input size="50" id="new-rule-name" type="text">
76+
<label for="new-rule-regex" data-i18n="chrome_regex" class="label_nontoggle"></label>
77+
<input size="50" id="new-rule-regex" type="text">
78+
<label for="new-rule-redirect" data-i18n="chrome_redirect_to" class="label_nontoggle"></label>
79+
<input size="50" id="new-rule-redirect" type="text">
80+
</div>
81+
<button id="add-new-rule-button" class="button" data-i18n="chrome_add_new_rule"></button>
82+
<button id="cancel-new-rule" class="button" data-i18n="chrome_status_cancel_button"></button>
5283
</div>
53-
<button id="add-new-rule-button" data-i18n="chrome_add_new_rule"></button><br>
54-
<button id="cancel-new-rule" data-i18n="chrome_status_cancel_button"></button>
55-
</div>
56-
</section>
84+
</section>
5785

58-
<section id="StableRules" class="rules">
59-
<h3 data-i18n="chrome_stable_rules"></h3>
60-
<p class="description" data-i18n="chrome_stable_rules_description"></p>
61-
</section>
86+
<section id="StableRules" class="rules">
87+
<h3 data-i18n="chrome_stable_rules"></h3>
88+
<span id="RuleManagement--counter"></span>
89+
<h2 class="description" data-i18n="chrome_stable_rules_description"></h2>
90+
</section>
6291

63-
<section id="UnstableRules" class="rules">
64-
<h3 data-i18n="chrome_experimental_rules"></h3>
65-
<p class="description" data-i18n="chrome_experimental_rules_description"></p>
66-
</section>
92+
<section id="UnstableRules" class="rules">
93+
<h3 data-i18n="chrome_experimental_rules"></h3>
94+
<h2 class="description" data-i18n="chrome_experimental_rules_description"></h2>
95+
</section>
6796

68-
<section id="resetButton" class="options">
69-
<a href="javascript:void 0" id="reset-to-defaults" data-i18n="prefs_reset_defaults"></a>
70-
</section>
71-
</div>
97+
<section id="resetButton" class="options">
98+
<a href="javascript:void 0" id="reset-to-defaults" class="button" data-i18n="prefs_reset_defaults"></a>
99+
</section>
100+
</div>
101+
102+
</section>
72103

73104
<footer>
74-
<a id="viewAllRules" href="https://atlas.eff.org/index.html" target="_blank" data-i18n="menu_viewAllRules"></a><br>
75-
<br>
76-
<a id="aboutTitle" href="https://www.eff.org/https-everywhere" target="_blank" data-i18n="about_title"></a><br>
77-
<br>
78-
<a id="donateEFF" href="https://supporters.eff.org/donate/support-https-everywhere" target="_blank" data-i18n="menu_donate_eff_imperative"></a>
79-
<p>
80-
<small>
81-
<span data-i18n="about_version">Version</span>: <span id="current-version"></span>
82-
<span id="rulesets-versions">
83-
</span>
84-
</small>
85-
</p>
105+
<a class="button" id="viewAllRules" href="https://atlas.eff.org/index.html" target="_blank" data-i18n="menu_viewAllRules"></a>
106+
<a class="button" id="aboutTitle" href="https://www.eff.org/https-everywhere" target="_blank" data-i18n="about_title"></a>
107+
<a class="button" id="donateEFF" href="https://supporters.eff.org/donate/support-https-everywhere" target="_blank" data-i18n="menu_donate_eff_imperative"></a>
86108
</footer>
87109

88110
</body>

0 commit comments

Comments
 (0)