abstract path to localstorage and improve styles

dewwwald · Apr 8, 2017 · d4365f7 · d4365f7
1 parent 097fd96
commit d4365f7
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 35 deletions.
diff --git a/default-popup.html b/default-popup.html
diff --git a/main.js b/main.js
@@ -22,7 +22,7 @@ let loadFile = function (resolve) {
 		}
 	};
 	ajax.withCredentials = true;
-	ajax.open('GET', 'file:///Users/dewald/node-debugger-url.json', true);
+	ajax.open('GET', 'file://' + JSON.parse(localStorage.getItem('prefs')).path, true);
 	ajax.setRequestHeader("Content-type", "application/json");
 	ajax.send();
 }
@@ -39,7 +39,6 @@ let checkLazyLoadAvailability = function (object) {
 }
 
 let lazyLoadQueue = function (object, resolve) {
-	console.log(response);
 	checkLazyLoadAvailability(object);
 	if (waitForLazyLoader.length > 0) {
 		t = setTimeout(() => {
@@ -80,12 +79,21 @@ let startWatchingLinkChages = function () {
 
 // Start
 // Chrismas tree, I know
-new Promise(loadFile)
-	.then(() => new Promise(lazyLoadQueue.bind(null, chrome))
-	.then(() => new Promise(boot)
-	.then(() => new Promise(function (resolve) {
-		debuggerTab = debuggerWindow.tabs[0];
-		resolve();
-	})
-	.then(startWatchingLinkChages))));
+chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
+	if (request.action === 'start') {
+		new Promise(loadFile)
+			.then(() => new Promise(lazyLoadQueue.bind(null, chrome))
+			.then(() => new Promise(boot)
+			.then(() => new Promise(function (resolve) {
+				debuggerTab = debuggerWindow.tabs[0];
+				resolve();
+			})
+			.then(startWatchingLinkChages))));
+	}
+});
 
+chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
+	if (request.action === 'prefs') {
+		sendResponse(JSON.parse(localStorage.getItem('prefs')));
+	}
+});
diff --git a/manifest.json b/manifest.json
@@ -17,6 +17,6 @@
 		"file:///Users/dewald/node-debugger-url.json"
 	],
 	"browser_action": {
-		"default_popup": "default-popup.html"
+		"default_popup": "popup/default-popup.html"
 	}
 }
diff --git a/popup/default-popup.html b/popup/default-popup.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="style.css">
+    <script src="main.js"></script>
+  </head>
+  <body>
+    <h1>Node Debug Manager</h1>
+    <div class="config-area">
+      <h1>Config:</h1>
+      <label for="path-input-field">Location of file:</label>
+      <input id="path-input-field" type="text" placeholder="/Users/dewwwald/your.json">
+      <button id="start-debugger">start</button>
+    </div>
+    <div class="about-me">
+      <p>
+        For more about me visit my website at <a target="_blank" href="http://dewwwald.com">dewwwald.com</a>.
+      </p>
+    </div>
+    <p style="margin-bottom: 0px;"><small>licened under MIT</small></p>
+  </body>
+
+</html>
diff --git a/popup/main.js b/popup/main.js
@@ -0,0 +1,22 @@
+document.onreadystatechange = function () {
+	if (document.readyState === 'complete') {		
+		let startButton = document.getElementById('start-debugger');
+		let pathInputField = document.getElementById('path-input-field');
+
+		pathInputField.addEventListener('change', function () {
+			localStorage.setItem('prefs', JSON.stringify({ path: this.value }));
+		}, false);
+
+		startButton.addEventListener('click', function () {
+			chrome.extension.sendMessage('kjppjhifcapacgldhmagolflapbdgnko', {
+			  action: 'start'
+			});
+		}, false);
+
+		chrome.extension.sendMessage('kjppjhifcapacgldhmagolflapbdgnko', {
+		  action: 'prefs'
+		}, function (response) {
+			pathInputField.value = response.path
+		});
+	}
+}
diff --git a/popup/style.css b/popup/style.css
@@ -0,0 +1,41 @@
+* { 
+	box-sizing: border-box;
+}
+
+html {
+	font-size: calc(12 / 16 * 100%);
+}
+body {
+	min-width: 300px;
+	min-height: 100px;
+	overflow-x: hidden;
+	font-family: helvetica, sans-serif;
+	font-size: 12px;
+}
+
+input, 
+button {
+	margin-bottom: 5px;
+	display: block;
+	width: 100%;
+	outline: none !important;
+	font-size: 1rem;
+	padding: 5px 10px;
+}
+
+h1 {
+	font-size: 14px;
+}
+
+.config-area {
+	margin-bottom: 10px;
+	padding: 5px;
+	border: 1px #999 solid;
+	border-radius: 5px;
+}
+
+.about-me {
+	padding: 5px;
+	border: 1px #999 solid;
+	border-radius: 5px;	
+}