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

Commit

Permalink
New UX for HTTPS Everywhere: For Release (#17854)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@zoracon
zoracon authored May 2, 2019
1 parent f572b45 commit 59c3655
Show file tree
Hide file tree
Showing 14 changed files with 455 additions and 188 deletions.
24 changes: 1 addition & 23 deletions chromium/background-scripts/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,26 +33,22 @@ async function initializeAllRules() {
* Load preferences. Structure is:
* {
* httpNowhere: Boolean,
* showCounter: Boolean,
* isExtensionEnabled: Boolean
* }
*/
var httpNowhereOn = false;
var showCounter = true;
var isExtensionEnabled = true;
let disabledList = new Set();

function initializeStoredGlobals() {
return new Promise(resolve => {
store.get({
httpNowhere: false,
showCounter: true,
globalEnabled: true,
enableMixedRulesets: false,
disabledList: [],
disabledList: []
}, function(item) {
httpNowhereOn = item.httpNowhere;
showCounter = item.showCounter;
isExtensionEnabled = item.globalEnabled;
for (let disabledSite of item.disabledList) {
disabledList.add(disabledSite);
Expand Down Expand Up @@ -92,10 +88,6 @@ chrome.storage.onChanged.addListener(async function(changes, areaName) {
httpNowhereOn = changes.httpNowhere.newValue;
updateState();
}
if ('showCounter' in changes) {
showCounter = changes.showCounter.newValue;
updateState();
}
if ('globalEnabled' in changes) {
isExtensionEnabled = changes.globalEnabled.newValue;
updateState();
Expand Down Expand Up @@ -160,7 +152,6 @@ function updateState () {
if (!tabs || tabs.length === 0) {
return;
}
const tabId = tabs[0].id;
const tabUrl = new URL(tabs[0].url);

if (disabledList.has(tabUrl.host) || iconState == "disabled") {
Expand All @@ -172,26 +163,13 @@ function updateState () {
});
}
} else {

if ('setIcon' in chrome.browserAction) {
chrome.browserAction.setIcon({
path: {
38: 'images/icons/icon-' + iconState + '-38.png'
}
});
}

const activeCount = appliedRulesets.getActiveRulesetCount(tabId);

if ('setBadgeBackgroundColor' in chrome.browserAction) {
chrome.browserAction.setBadgeBackgroundColor({ color: '#666666', tabId });
}

const showBadge = activeCount > 0 && isExtensionEnabled && showCounter;

if ('setBadgeText' in chrome.browserAction) {
chrome.browserAction.setBadgeText({ text: showBadge ? String(activeCount) : '', tabId });
}
}
});
}
Expand Down
Binary file added chromium/images/HTTPS-Everywhere-Logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added chromium/images/icons/SettingsIcon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified chromium/images/icons/icon-active-128.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified chromium/images/icons/icon-active-38.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified chromium/images/icons/icon-active-48.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified chromium/images/icons/icon-blocking-38.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified chromium/images/icons/icon-disabled-38.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
136 changes: 79 additions & 57 deletions chromium/pages/popup/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,78 +11,100 @@
</head>
<body>
<header>
<h1 data-i18n="about_ext_name"></h1>
<div class="logo-container">
<img src="../../images/HTTPS-Everywhere-Logo.png" alt="HTTPS Everywhere logo">
</div>

<small>
<span data-i18n="about_version">Version</span>: <span id="current-version"></span>
<br>
<span id="rulesets-versions"></span>
</small>
</header>

<section id="disableButton" class="options" style="visibility: hidden;">
<div class="onoffswitch">
<input id="onoffswitch" type="checkbox" checked><label data-i18n="menu_globalEnable" for="onoffswitch"></label>
<section id="disableButton" class="options settings_block" style="visibility: hidden;">
<div class="onoffswitch switch" aria-label="Toggle on or off">
<h1 id="onoffswitch_label" data-i18n="menu_globalEnable"></h1>
<span class="slider round"></span>
<input aria-hidden="true" id="onoffswitch" type="checkbox" checked> <label id="onoffswitch__label" for="onoffswitch">
</label>
</div>
</section>

<section id="HttpNowhere" class="options" style="visibility: hidden;">
<input id="http-nowhere-checkbox" type="checkbox"><label data-i18n="menu_encryptAllSitesEligible" for="http-nowhere-checkbox"></label>
<section id="HttpNowhere" class="options settings_block" style="visibility: hidden;">
<h1 id="HttpNowhere__header" data-i18n="menu_encryptAllSitesEligible"></h1>
<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>
<h2 id="HttpNowhere__explained" data-i18n="menu_httpNoWhereExplained"></h2>
<span id="HttpNowhere__see_more" class="see_more__arrow down" aria-label="Listen or See more explanation"></span>
<span id="HttpNowhere__see_more--prompt" class="see_more__prompt" data-i18n="menu_seeMore"></span>
<div class="see_more__content hide">
<p class="see_more--clarified" data-i18n="menu_httpNoWhereMore"></p>
</div>
</section>

<div id="RuleManagement">
<section id="disableEnableSection">
<a href="javascript:void 0" id="disable-on-this-site" data-i18n="chrome_disable_on_this_site"></a>
<a href="javascript:void 0" id="enable-on-this-site" data-i18n="chrome_enable_on_this_site"></a>
<section id="RuleManagement" class="settings_block">
<section id="settingsForThisSite">
<h1 data-i18n="chrome_settings_for_this_site_header"></h1>
<img class="settingsForThisSite__gear-icon" src="../../images/icons/SettingsIcon.png" alt="gear icon" aria-hidden="true" >
<h2 data-i18n="chrome_settings_for_this_site_subheader"></h2>
</section>

<section id="addRuleSection">
<a href="javascript:void 0" id="add-rule-link" data-i18n="chrome_add_rule"></a>
<div id="add-new-rule-div" style="display: none">
<h3 data-i18n="about_add_new_rule"></h3>
<p data-i18n="chrome_always_https_for_host"></p>
<label for="new-rule-host" data-i18n="chrome_host"></label><br>
<input size="50" id="new-rule-host" type="text" disabled><br>
<div id="new-rule-regular-text">
<a href="javascript:void 0" id="new-rule-show-advanced-link" data-i18n="chrome_show_advanced"></a><br>
</div>
<div id="new-rule-advanced" style="display: none">
<a href="javascript:void 0" id="new-rule-hide-advanced-link" data-i18n="chrome_hide_advanced"></a><br>
<br>
<label for="new-rule-name" data-i18n="chrome_rule_name"></label><br>
<input size="50" id="new-rule-name" type="text"><br>
<label for="new-rule-regex" data-i18n="chrome_regex"></label><br>
<input size="50" id="new-rule-regex" type="text"><br>
<label for="new-rule-redirect" data-i18n="chrome_redirect_to"></label><br>
<input size="50" id="new-rule-redirect" type="text"><br>
<span id="RuleManagement__see_more" class="see_more__arrow down" aria-label="Listen or See more explanation"></span>
<span id="RuleManagement__see_more--prompt" class="see_more__prompt" data-i18n="menu_seeMore"></span>
<div class="see_more__content hide">
<p class="see_more--clarified" data-i18n="chrome_settings_for_this_site_explained"></p>

<section id="disableEnableSection">
<a href="javascript:void 0" id="disable-on-this-site" class="button" data-i18n="chrome_disable_on_this_site"></a>
<a href="javascript:void 0" id="enable-on-this-site" class="button" data-i18n="chrome_enable_on_this_site"></a>
</section>

<section id="addRuleSection">
<a href="javascript:void 0" id="add-rule-link" class="button" data-i18n="chrome_add_rule"></a>
<div id="add-new-rule-div" style="display: none">
<h3 data-i18n="about_add_new_rule"></h3>
<p data-i18n="chrome_always_https_for_host"></p>
<label for="new-rule-host" data-i18n="chrome_host" class="label_nontoggle"></label>
<input size="50" id="new-rule-host" type="text" disabled><br>
<div id="new-rule-regular-text">
<a href="javascript:void 0" id="new-rule-show-advanced-link" class="button" data-i18n="chrome_show_advanced"></a><br>
</div>
<div id="new-rule-advanced" style="display: none">
<a href="javascript:void 0" id="new-rule-hide-advanced-link" class="button" data-i18n="chrome_hide_advanced"></a><br>
<label for="new-rule-name" data-i18n="chrome_rule_name" class="label_nontoggle"></label>
<input size="50" id="new-rule-name" type="text">
<label for="new-rule-regex" data-i18n="chrome_regex" class="label_nontoggle"></label>
<input size="50" id="new-rule-regex" type="text">
<label for="new-rule-redirect" data-i18n="chrome_redirect_to" class="label_nontoggle"></label>
<input size="50" id="new-rule-redirect" type="text">
</div>
<button id="add-new-rule-button" class="button" data-i18n="chrome_add_new_rule"></button>
<button id="cancel-new-rule" class="button" data-i18n="chrome_status_cancel_button"></button>
</div>
<button id="add-new-rule-button" data-i18n="chrome_add_new_rule"></button><br>
<button id="cancel-new-rule" data-i18n="chrome_status_cancel_button"></button>
</div>
</section>
</section>

<section id="StableRules" class="rules">
<h3 data-i18n="chrome_stable_rules"></h3>
<p class="description" data-i18n="chrome_stable_rules_description"></p>
</section>
<section id="StableRules" class="rules">
<h3 data-i18n="chrome_stable_rules"></h3>
<span id="RuleManagement--counter"></span>
<h2 class="description" data-i18n="chrome_stable_rules_description"></h2>
</section>

<section id="UnstableRules" class="rules">
<h3 data-i18n="chrome_experimental_rules"></h3>
<p class="description" data-i18n="chrome_experimental_rules_description"></p>
</section>
<section id="UnstableRules" class="rules">
<h3 data-i18n="chrome_experimental_rules"></h3>
<h2 class="description" data-i18n="chrome_experimental_rules_description"></h2>
</section>

<section id="resetButton" class="options">
<a href="javascript:void 0" id="reset-to-defaults" data-i18n="prefs_reset_defaults"></a>
</section>
</div>
<section id="resetButton" class="options">
<a href="javascript:void 0" id="reset-to-defaults" class="button" data-i18n="prefs_reset_defaults"></a>
</section>
</div>

</section>

<footer>
<a id="viewAllRules" href="https://atlas.eff.org/index.html" target="_blank" data-i18n="menu_viewAllRules"></a><br>
<br>
<a id="aboutTitle" href="https://www.eff.org/https-everywhere" target="_blank" data-i18n="about_title"></a><br>
<br>
<a id="donateEFF" href="https://supporters.eff.org/donate/support-https-everywhere" target="_blank" data-i18n="menu_donate_eff_imperative"></a>
<p>
<small>
<span data-i18n="about_version">Version</span>: <span id="current-version"></span>
<span id="rulesets-versions">
</span>
</small>
</p>
<a class="button" id="viewAllRules" href="https://atlas.eff.org/index.html" target="_blank" data-i18n="menu_viewAllRules"></a>
<a class="button" id="aboutTitle" href="https://www.eff.org/https-everywhere" target="_blank" data-i18n="about_title"></a>
<a class="button" id="donateEFF" href="https://supporters.eff.org/donate/support-https-everywhere" target="_blank" data-i18n="menu_donate_eff_imperative"></a>
</footer>

</body>
Expand Down
Loading

0 comments on commit 59c3655

Please sign in to comment.