Skip to content

Commit faeb987

Browse files
jayschwajayschwa
committed
Update GUI and manifest for Chrome 20 and above.
The page popup has been modified to match the look-and-feel of Chrome's latest Settings page. Additionally, the manifest.json has been updated to the version 2 format. Version 1 was deprecated in Chrome 18. CSS and Javascript had to be moved out of popup.html and into separate files in order to comply with version 2. Tested on: * Debian Linux, Chrome 20 * Mac OS X Lion, Chrome 21 * Windows 7, Chrome 21
1 parent 49b61be commit faeb987

File tree

6 files changed

+202
-140
lines changed

6 files changed

+202
-140
lines changed

chromium/background.html renamed to chromium/background.js

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
<script src="rule_list.js"></script>
2-
<script src="util.js"></script>
3-
<script src="rules.js"></script>
4-
<script src="jsuri-1.1.1.js"></script>
51

6-
<script>
72
var all_rules = new RuleSets();
83
var wr = chrome.webRequest;
94

@@ -33,7 +28,7 @@
3328
if (details.tabId != -1 && this.activeRulesets.getRulesets(details.tabId)) {
3429
chrome.tabs.get(details.tabId, function(tab) {
3530
if(typeof(tab) == "undefined") {
36-
log(DBUG, "Not a real tab. Skipping showing pageAction.");
31+
log(DBUG, "Not a real tab. Skipping showing pageAction.");
3732
}
3833
else {
3934
chrome.pageAction.show(details.tabId);
@@ -89,7 +84,7 @@
8984
var tmpuserinfo = tmpuri.userInfo();
9085
var tmphost = tmpuri.host();
9186
if (tmphost.charAt(tmphost.length - 1) == ".") {
92-
while (tmphost.charAt(tmphost.length - 1) == ".")
87+
while (tmphost.charAt(tmphost.length - 1) == ".")
9388
tmphost = tmphost.slice(0,-1);
9489
}
9590
tmpuri.host(tmphost);
@@ -124,7 +119,7 @@
124119
var newuristr = null;
125120

126121
var i = 0;
127-
122+
128123
var rs = all_rules.applicableRulesets(a.host);
129124
for(i = 0; i < rs.length; ++i) {
130125
activeRulesets.addRulesetToTab(details.tabId, rs[i]);
@@ -258,6 +253,3 @@
258253
{urls: ["https://*/*", "http://*/*"]});
259254

260255
chrome.cookies.onChanged.addListener(onCookieChanged);
261-
262-
263-
</script>

‎chromium/manifest.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
{
2-
"background_page": "background.html",
2+
"manifest_version": 2,
3+
"background": {
4+
"scripts": ["util.js", "jsuri-1.1.1.js", "rule_list.js", "rules.js", "background.js"]
5+
},
36
"description": "Automatically encrypt your connection to major websites.",
47
"homepage_url": "https://www.eff.org/https-everywhere",
58
"icons": {
69
"128": "icon128.png",
710
"16": "icon16.png",
811
"48": "icon48.png"
912
},
10-
"minimum_chrome_version": "17.0.963.37",
13+
"minimum_chrome_version": "18",
1114
"name": "HTTPS Everywhere",
1215
"page_action": {
1316
"default_icon": "icon48.png",
@@ -23,4 +26,4 @@
2326
],
2427
"update_url": "https://www.eff.org/files/https-everywhere-chrome-updates.xml",
2528
"version": "2012.6.21"
26-
}
29+
}

‎chromium/popup.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
body {
2+
margin-left: 1em;
3+
margin-top: 0;
4+
margin-right: 1em;
5+
margin-bottom: 0;
6+
min-width: 256px;
7+
}
8+
9+
/* Don't wrap text for important stuff. */
10+
h1, h2, h3, .rule {
11+
white-space: nowrap;
12+
}
13+
14+
/* Initially hide section (until rules get added). */
15+
section.rules {
16+
position: fixed;
17+
visibility: hidden;
18+
}
19+
20+
/* Underline rules that have notes. */
21+
.rule [title] {
22+
border-bottom: 1px dotted;
23+
cursor: help;
24+
}
25+
26+
/*** Everything below is "reverse-engineered" from Chrome's Settings page. ***/
27+
28+
/* Override a strange pixel offset in widgets.css. */
29+
input[type="checkbox"] {
30+
bottom: 0;
31+
}
32+
33+
body {
34+
/* Fonts Chrome specifies for each OS: */
35+
/* Linux: 'DejaVu Sans', Arial, sans-serif */
36+
/* Mac: 'Lucida Grande', sans-serif */
37+
/* Windows: 'Segoe UI', Tahoma, sans-serif */
38+
font-family: 'Lucida Grande', 'Segoe UI', Tahoma, 'DejaVu Sans', Arial, sans-serif;
39+
font-size: 75%;
40+
color: #303942;
41+
padding-top: 55px;
42+
}
43+
44+
header {
45+
background-image: -webkit-linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92));
46+
left: 1em;
47+
position: fixed;
48+
right: 1em;
49+
top: 0;
50+
z-index: 3;
51+
}
52+
53+
header > h1 {
54+
margin: 0;
55+
padding: 21px 0 13px;
56+
}
57+
58+
/* Create a border under the h1 (but before anything that gets appended
59+
* to the end of the header). */
60+
header > h1::after {
61+
background-color: #eee;
62+
content: ' ';
63+
display: block;
64+
height: 1px;
65+
position: relative;
66+
top: 13px;
67+
}
68+
69+
section {
70+
-webkit-padding-start: 18px;
71+
-webkit-padding-end: 18px;
72+
margin-bottom: 24px;
73+
margin-top: 8px;
74+
}
75+
76+
section > h3 {
77+
-webkit-margin-start: -18px;
78+
}
79+
80+
footer {
81+
border-top: 1px solid #EEE;
82+
margin-top: 16px;
83+
padding: 8px 0;
84+
}

‎chromium/popup.html‎

Lines changed: 30 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,30 @@
1-
<link href="chrome://resources/css/widgets.css" rel="stylesheet" type="text/css"/>
2-
<style type="text/css" rel="stylesheet">
3-
<!--
4-
/* attempt to emulate Chrome's connection / site information popup */
5-
/* (click the globe or lock icon on the left side of the omnibox) */
6-
body {
7-
/* based off Chrome's WebUI */
8-
font-family: 'Segoe UI', Tahoma, sans-serif;
9-
font-size: 75%;
10-
cursor: default;
11-
12-
margin-top: 0;
13-
margin-bottom: 0;
14-
margin-left: 6px;
15-
margin-right: 6px;
16-
}
17-
18-
body > div {
19-
padding-top: 14px;
20-
padding-bottom: 14px;
21-
padding-right: 22px;
22-
border-top: 1px solid rgb(233, 233, 233);
23-
}
24-
25-
a {
26-
cursor: auto;
27-
white-space: nowrap;
28-
}
29-
30-
#About {
31-
background-image: url('icon48.png');
32-
background-repeat: no-repeat;
33-
background-position: 12px 14px; /* y position = div's padding-top */
34-
min-width: 9em; /* encourage text to populate at least 3 lines */
35-
min-height: 48px; /* icon height */
36-
padding-left: 68px; /* icon x position + icon width + 8px spacing */
37-
border-top: 0;
38-
}
39-
40-
div.rule {
41-
white-space: nowrap;
42-
}
43-
44-
.rule > * {
45-
vertical-align: middle;
46-
}
47-
48-
/* cb_block */
49-
.rule > div {
50-
display: inline-block;
51-
width: 68px; /* #About's padding-left */
52-
text-align: right;
53-
}
54-
55-
/* checkbox */
56-
.rule > div > input {
57-
margin-right: 8px;
58-
}
59-
--->
60-
</style>
61-
62-
<div id="About"><a href="https://www.eff.org/https-everywhere" target="_blank" tabindex="-1">HTTPS Everywhere</a> rulesets applicable to this site:</div>
63-
<div id="AppliedRules"></div>
64-
65-
<script>
66-
var backgroundPage = chrome.extension.getBackgroundPage();
67-
var appliedDiv = document.getElementById("AppliedRules");
68-
var tab = null;
69-
70-
function toggleRuleLine(checkbox, ruleset) {
71-
ruleset.active = checkbox.checked;
72-
73-
if (ruleset.active != ruleset.default_state) {
74-
localStorage[ruleset.name] = ruleset.active;
75-
} else {
76-
delete localStorage[ruleset.name];
77-
}
78-
}
79-
80-
function createRuleLine(ruleset) {
81-
// parent block for line
82-
var line = document.createElement("div");
83-
line.className = "rule checkbox";
84-
85-
// checkbox
86-
var checkbox = document.createElement("input");
87-
checkbox.type = "checkbox";
88-
var rand = Math.random().toString(36).substring(8); // for uniqueness
89-
checkbox.id = ruleset.name + " " + rand;
90-
checkbox.checked = ruleset.active;
91-
checkbox.onchange = function(ev) { toggleRuleLine(checkbox, ruleset); };
92-
93-
// checkbox container (used for spacing)
94-
var cb_block = document.createElement("div");
95-
cb_block.appendChild(checkbox);
96-
97-
// label for checkbox
98-
var label = document.createElement("label");
99-
label.innerText = ruleset.name;
100-
label.htmlFor = checkbox.id;
101-
102-
line.appendChild(cb_block);
103-
line.appendChild(label);
104-
105-
return line;
106-
}
107-
108-
function gotTab(tab) {
109-
var rulesets = backgroundPage.activeRulesets.getRulesets(tab.id);
110-
111-
for (r in rulesets) {
112-
appliedDiv.appendChild(createRuleLine(rulesets[r]));
113-
}
114-
}
115-
116-
chrome.tabs.getSelected(null, gotTab);
117-
118-
119-
</script>
1+
<head>
2+
<title>HTTPS Everywhere</title>
3+
4+
<!-- Chrome 21 --->
5+
<link href="chrome://resources/css/chrome_shared.css" rel="stylesheet" type="text/css"/>
6+
7+
<!-- Chrome 20 (remove this once stable channel is 21) --->
8+
<link href="chrome://resources/css/chrome_shared2.css" rel="stylesheet" type="text/css"/>
9+
10+
<link href="popup.css" rel="stylesheet" type="text/css"/>
11+
<script src="popup.js"></script>
12+
</head>
13+
14+
<body>
15+
<header>
16+
<h1>HTTPS Everywhere</h1>
17+
</header>
18+
<section id="StableRules" class="rules">
19+
<h3>Stable rules</h3>
20+
<p class="description">Force <a href="https://wikipedia.org/wiki/Transport_Layer_Security" title="Wikipedia article about encryption" target="_blank" tabindex="-1">encrypted</a> connections to the following websites and services. Enabled by default.</p>
21+
</section>
22+
<section id="UnstableRules" class="rules">
23+
<h3>Experimental rules</h3>
24+
<p class="description">May generate excessive browser warnings or cause websites to break. Disabled by default.</p>
25+
</section>
26+
<footer>
27+
<a href="https://www.eff.org/https-everywhere" title="HTTPS Everywhere website" target="_blank" tabindex="-1">What is this?</a>
28+
<!-- <a href="" title="HTTPS Everywhere Options">Options</a> --->
29+
</footer>
30+
</body>

‎chromium/popup.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
var backgroundPage = null;
2+
var stableRules = null;
3+
var unstableRules = null;
4+
5+
function toggleRuleLine(checkbox, ruleset) {
6+
ruleset.active = checkbox.checked;
7+
8+
if (ruleset.active != ruleset.default_state) {
9+
localStorage[ruleset.name] = ruleset.active;
10+
} else {
11+
delete localStorage[ruleset.name];
12+
}
13+
}
14+
15+
function createRuleLine(ruleset) {
16+
17+
// parent block for line
18+
var line = document.createElement("div");
19+
line.className = "rule checkbox";
20+
21+
// label "container"
22+
var label = document.createElement("label");
23+
24+
// checkbox
25+
var checkbox = document.createElement("input");
26+
checkbox.type = "checkbox";
27+
checkbox.checked = ruleset.active;
28+
checkbox.onchange = function(ev) { toggleRuleLine(checkbox, ruleset); };
29+
30+
// label text
31+
var labelText = document.createElement("span");
32+
labelText.innerText = ruleset.name;
33+
if (ruleset.note.length) {
34+
labelText.title = ruleset.note;
35+
}
36+
37+
label.appendChild(checkbox);
38+
label.appendChild(labelText);
39+
line.appendChild(label);
40+
41+
return line;
42+
}
43+
44+
function gotTab(tab) {
45+
var rulesets = backgroundPage.activeRulesets.getRulesets(tab.id);
46+
47+
for (r in rulesets) {
48+
var listDiv = stableRules;
49+
if (!rulesets[r].default_state) {
50+
listDiv = unstableRules;
51+
}
52+
listDiv.appendChild(createRuleLine(rulesets[r]));
53+
listDiv.style.position = "static";
54+
listDiv.style.visibility = "visible";
55+
}
56+
}
57+
58+
document.addEventListener('DOMContentLoaded', function () {
59+
backgroundPage = chrome.extension.getBackgroundPage();
60+
stableRules = document.getElementById("StableRules");
61+
unstableRules = document.getElementById("UnstableRules");
62+
chrome.tabs.getSelected(null, gotTab);
63+
});

0 commit comments

Comments
 (0)