more refactoring + reworked pages

claustromaniac · Nov 30, 2019 · 627b24c · 627b24c
1 parent 1480898
commit 627b24c
Show file tree

Hide file tree

Showing 12 changed files with 429 additions and 287 deletions.
diff --git a/src/bg/main.js b/src/bg/main.js
@@ -33,6 +33,7 @@ const local = browser.storage.local;
 const pageAction = browser.pageAction;
 const runtime = browser.runtime;
 const tabs = browser.tabs;
+const processed = new Set();
 //FF56 compatibility
 tabs._update = tabs.update;	
 tabs.update = async function (id, p) { 

diff --git a/src/bg/runtime.js b/src/bg/runtime.js
@@ -6,10 +6,14 @@ const wlSaver = new DelayableAction(10, 60, () => {
 		incognitoWhitelist: sAPI.incognitoWhitelist
 	});
 });
-runtime.onMessage.addListener((msg, sender, sendResponse) => {
-	if (msg.action === 'get settings') return sAPI.getAll();		// options.js
+runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
 	const tabId = sender.tab ? sender.tab.id : undefined;
 	switch (msg.action) {
+		case 'get settings':				// options.js
+			return sAPI.getAll();
+		case 'update sAPI':					// options.js
+			for (const i in msg.data) sAPI[i] = msg.data[i]
+			return;
 		case 'add to whitelist':			// popup.js
 			wlSaver.run();
 			msg.incognito
@@ -22,14 +26,17 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
 			delete sAPI.incognitoWhitelist[msg.host];
 			return tabs.reload(tabId, {bypassCache: true} );
 		case 'get tabsData URL':			// error.js, redirect.js
-			return promisify({url: tabsData[tabId].url});
+			return {url: tabsData[tabId].url};
+		case 'get error code':			// error.js
+			return {error: tabsData[tabId].error};
 		case 'ignore':
-			return promisify(ignore(msg.host, tabId));
+			return ignore(msg.host, tabId);
 		case 'content script':				// cs.js
 			if (tabsData[tabId]) delete tabsData[tabId].loading;
+			await sAPI.loading;
 			if (
-				(processed.has(msg.host) && msg.protocol === 'https:') || 
-				(isWhitelisted(msg.host) && msg.protocol === 'http:')
+				processed.has(msg.host) && msg.protocol === 'https:' || 
+				isWhitelisted(msg.host) && msg.protocol === 'http:'
 			) return pageAction.show(tabId);
 	}
 });
diff --git a/src/bg/webRequest.js b/src/bg/webRequest.js
@@ -6,7 +6,6 @@ const exceptions = new Set([
 	'NS_ERROR_UNKNOWN_HOST'
 ]);
 const filter = {urls: ["http://*/*"], types: ['main_frame']};
-const processed = new Set();
 const sfilter = {urls: ["https://*/*"], types: ['main_frame']};
 const warningPage = runtime.getURL('pages/error.htm');
 const redirectPage = runtime.getURL('pages/redirect.htm');
@@ -175,6 +174,7 @@ webReq.onErrorOccurred.addListener(d => {
 	const url = new URL(d.url);
 	if (processed.has(url.hostname)) {
 		if (tabsData[d.tabId]) {
+			tabsData[d.tabId].error = d.error;
 			delete tabsData[d.tabId].loading;
 			if (tabsData[d.tabId].timerID) clearTimeout(tabsData[d.tabId].timerID);
 		}

diff --git a/src/pages/error.css b/src/pages/error.css
@@ -1,29 +1,22 @@
-* {
-	box-sizing: border-box;
-	text-align: center;
-}
+* {text-align: center !important;}
 body {
-	background: #444;
-	color: #FFF;
-	font-family: "Consolas";
-	font-size: 1.5vw;
+	font-size: 1.3em;
 	font-weight: 100;
 }
-button {
-	background: #FFF;
-	border-radius: 0.3em;
-	color: #000;
-	font-size: 1.5vw;
-	margin-top: 1em;
-	padding: 0 0.75em;
-}
+button {margin: 2em auto;}
 div {
-	margin: 15% auto 0;
+	margin: 10% auto 0;
 	width: 75%;
 }
-code {color: #6CF;}
+abbr {color: #FFA;}
+code {
+	background: #474749;
+	border-radius: 4px;
+	padding: 0.1em 1em;
+}
 img {
-	margin: auto;
-	width: 5em;
 	display: block;
+	margin: 1em auto;
+	width: 5em;
 }
+#error {width: 100%;}
diff --git a/src/pages/error.htm b/src/pages/error.htm
@@ -2,16 +2,19 @@
 <html>
 	<head>
 		<meta charset="utf-8">
+		<link href="chrome://browser/content/extension.css" rel="stylesheet">
+		<link href="httpz.css" rel="stylesheet">
 		<link href="error.css" rel="stylesheet">
 	</head>
 	<body>
 		<div>
 			<img src="../assets/httpz.svg"><img>
-			<p>HTTPZ tried to load <abbr id="abbr" title=""><code id="hostname">(loading...)</code></abbr> over HTTPS, but this resulted in an error.</p>
+			<p>HTTPZ tried to load <code id="host" tabindex="0" data-info="">(loading...)</code> over HTTPS, but failed. This is the error code returned by the browser:</p>
+			<input id="error" class="browser-style" type="text" readonly></input>
 			<p>Errors are expected when servers do not support the protocol, or when there are network issues, but they could also mean that an intermediary is trying to exploit this extension to perform a Man-in-the-Middle attack against you.</p>
 			<p>Proceed at your own discretion.</p>
-			<button id="retry" disabled>Retry</button>
-			<button id="continue" disabled>Proceed over HTTP</button>
+			<button id="retry" type="button" class="browser-style" disabled>Retry</button>
+			<button id="continue" type="button" class="browser-style" disabled>Proceed over HTTP</button>
 		</div>
 		<script src="error.js"></script>
 	</body>

diff --git a/src/pages/error.js b/src/pages/error.js
@@ -1,18 +1,23 @@
 'use strict';
 
+const runtime = browser.runtime;
 const ui = document.getElementsByTagName('*');
 
-browser.runtime.sendMessage({action: 'get tabsData URL'}).then(msg => {
+runtime.sendMessage({action: 'get error code'}).then(msg => {
+	if (!msg.error) return;
+	ui.error.value = msg.error;
+});
+runtime.sendMessage({action: 'get tabsData URL'}).then(msg => {
 	if (!msg.url) return;
 	ui.retry.disabled = false;
 	ui.continue.disabled = false;
 	const url = new URL(msg.url);
-	ui.hostname.textContent = url.hostname;
-	ui.abbr.title = msg.url;
+	ui.host.textContent = url.hostname;
+	ui.host.setAttribute('data-info', msg.url);
 	ui.continue.onclick = e => {
 		ui.retry.disabled = true;
 		ui.continue.disabled = true;
-		browser.runtime.sendMessage({
+		runtime.sendMessage({
 			action: 'ignore',
 			host: url.hostname
 		}).then(() => {

diff --git a/src/pages/httpz.css b/src/pages/httpz.css
@@ -0,0 +1,40 @@
+* {box-sizing: border-box;}
+body {
+	background: #323234;
+	color: #FFF;
+}
+button[type="button"] {
+	min-width: 10em;
+	text-align: center;
+}
+button, input, textarea {filter: invert(100%) hue-rotate(180deg);}
+x-fill {
+	flex-grow: 10;
+	min-height: 1em;
+	min-width: 1em;
+}
+.info {
+	background: #FFC;
+	border-radius: 4px;
+	color: #000;
+	cursor: help;
+	font-weight: 700;
+	margin-left: 1em;
+	padding: 0.1em 0.5em;
+}
+[data-info]:hover::after,
+[data-info]:focus::after {
+	background: #474749;
+	border-radius: 8px;
+	color: #FFF;
+	content: attr(data-info);
+	display: block;
+	font-weight: 100;
+	padding: 1em;
+	position: absolute;
+	text-shadow: 1px 1px black;
+	text-align: inherit;
+	white-space: pre-line;
+	width: 20em;
+	z-index: 9;
+}
diff --git a/src/pages/options.css b/src/pages/options.css
@@ -1,42 +1,36 @@
-* {
-	box-sizing: border-box;
-	margin: 0;
+* {margin: 0;}
+body {
+	min-height: 40em;
+	padding: 1em;
+	width: 95vw;
 }
-.fb {
-	align-items: center;
-	display: flex;
-	flex-flow: row wrap;
-}
-.fb > * {margin: auto inherit;}
-.fill {
-	flex-grow: 10;
-	min-height: 1em;
-	min-width: 1em;
+hr {margin: 1em 0;}
+input[type="file"] {display: none;}
+input[type="radio"] {margin-left: 1em;}
+input[type="text"] {text-align-last: center !important;}
+textarea {
+	font-weight: 100;
+	resize: none;
+	width: 75%;
 }
-.inlb {display: inline-block;}
+.flex {display: flex;}
+.col {flex-flow: column nowrap;}
+.row {flex-flow: row nowrap;}
+.align-center {align-items: center;}
+.align-top {align-items: top;}
+.justify-end {justify-content: end;}
+.justify-space-around {justify-content: space-around;}
 .num {width: 3.5em;}
-.red {color: red;}
-code, fieldset, textarea {border-radius: 5px;}
-body > * {
-	margin: 0.5em auto;
-	width: 90vw;
+#main {
+	border-radius: 5px;
+	padding: 1em;
+	width: 80%;
 }
-fieldset > div {padding: 1em 1em;}
-fieldset > div > * {margin-top: 1em;}
-button {
-	min-width: 6em;
-	padding: 0 0.75em;
-	text-align: center;
-}
-button.wide {min-width: 10em;}
-button+button, input+* {margin-left: 1em;}
-textarea {
-	font-family: "Consolas";
-	font-weight: 100;
+#sidebar {width: 20%;}
+#sidebar button {
+	margin: 0.2em 0;
 	width: 100%;
 }
-input[type="file"] {display: none;}
-input[type="text"] {text-align-last: center !important;}
-#clearIgnored {align-self: flex-end;}
-#clearWhitelist {margin-top: 1em;}
+#sidebar button:disabled {border: none;}
+#i_days {margin: 0 1em;}
 #save {font-weight: 700;}