Implemented top and bottom bars

content_script.js

@@ -5,8 +5,6 @@ function matchRule(str, rule) {
 function getColorFromUrl(url) {
 	var color = null
 
-  console.log(url)
-  console.log(env)
 	env.forEach(function(env) {
 		if (matchRule(url, env.match)) {
 			color = env.color
@@ -16,18 +14,27 @@ function getColorFromUrl(url) {
 	return color
 }
 
-function setColorInsideTab(color) {
-
+function setColorInsideTab(color, visualStyle) {
   if (color == null)
     return
 
   envify_left_div = document.createElement('div')
   envify_left_div.classList.add('envify')
-  envify_left_div.classList.add('left')
+
+  if (visualStyle === "left" || visualStyle === "leftright")
+    envify_left_div.classList.add('left')
+
+  if (visualStyle === "top" || visualStyle === "topbottom")
+    envify_left_div.classList.add('top')
 
   envify_right_div = document.createElement('div')
   envify_right_div.classList.add('envify')
-  envify_right_div.classList.add('right')
+
+  if (visualStyle === "right" || visualStyle === "leftright")
+    envify_right_div.classList.add('right')
+
+  if (visualStyle === "bottom" || visualStyle === "topbottom")
+    envify_right_div.classList.add('bottom')
 
   envify_right_div.style.backgroundColor = color
   envify_left_div.style.backgroundColor = color
@@ -36,17 +43,19 @@ function setColorInsideTab(color) {
   document.body.appendChild(envify_right_div)
 }
 
-url = window.location.href
-
-chrome.storage.sync.get("environments", function(results){
-  console.log(results);
+browser.storage.sync.get(["environments", "visualStyle"]).then((results) => {
   env = []
-  let { environments } = results;
+  let environments = results.environments;
+  let visualStyle = results.visualStyle;
 
-  if (environments == undefined) {
+  if (environments === undefined) {
     return
   }
 
+  if (visualStyle === undefined) {
+	visualStyle = "leftright"
+  }
+
   Object.keys(environments).map(function(value){
     env.push( { match: value, color: environments[value] });
   });
@@ -55,6 +64,7 @@ chrome.storage.sync.get("environments", function(results){
     return a.match.length - b.match.length
   })
 
-  setColorInsideTab(getColorFromUrl(url))
-})
-
+  setColorInsideTab(getColorFromUrl(window.location.href), visualStyle)
+}, function(error){
+  console.error("Could not retrieve settings from browser.storage.sync, error was " + error)
+});

popup/main.js

@@ -1,6 +1,7 @@
 let listEnvironments = document.querySelector(".list-environments")
 let btnAddEnv = document.getElementById("btn-add-env");
 let btnSaveEnv = document.getElementById("btn-save-env");
+let selectVisualStyle = document.getElementById("select-visual-style");
 
 let addEnvironment = function(url, color){
 	let environmentNode =  document.createElement("section");
@@ -50,19 +51,39 @@ let updateEnvironments = function(){
 	});
 }
 
-btnAddEnv.addEventListener("click", function() { addEnvironment() }, false)
+let updateVisualStyle = function(){
+	let visualStyle = selectVisualStyle.value;
+	browser.storage.sync.set({"visualStyle": visualStyle}).catch(function(err){
+		selectVisualStyle.setCustomValidity("Could not save the selected visual style");
+		selectVisualStyle.reportValidity();
+	});
+}
+
+btnAddEnv.addEventListener("click", addEnvironment, false)
 btnSaveEnv.addEventListener("click", updateEnvironments, false)
+selectVisualStyle.addEventListener("change", updateVisualStyle, false)
 
 document.addEventListener("DOMContentLoaded", function(){
-	browser.storage.sync.get("environments")
-	.then(function(results){
-		let { environments } = results;
-		Object.keys(environments).map(function(value){
-			addEnvironment(value, environments[value]);
-		});
+	browser.storage.sync.get(["environments", "visualStyle"]).then((results) => {
+		let environments = results.environments;
+		let visualStyle = results.visualStyle;
+
+		if(environments != undefined){
+			Object.keys(environments).map(function(value){
+				addEnvironment(value, environments[value]);
+			});
+		}
+
+		if(visualStyle === undefined){
+			selectVisualStyle.value = "leftright";
+		}else{
+			selectVisualStyle.value = visualStyle;
+		}
 	})
 	.catch(function(err){
 		btnAddEnv.setCustomValidity("Could not load your environments");
 		btnAddEnv.reportValidity();
+		selectVisualStyle.setCustomValidity("Could not load your selected visual style");
+		selectVisualStyle.reportValidity();
 	})
 }, false)

popup/manage_env.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
@@ -17,7 +17,17 @@ <h1>Envify</h1>
 
 	<button id="btn-save-env">Save</button>
 
-  <script src="browser-polyfill.min.js"></script>
+	<p>Select visual style</p>
+	<select id="select-visual-style">
+		<option value="left">Left bar</option>
+		<option value="right">Right bar</option>
+		<option value="leftright">Left and right bar</option>
+		<option value="top">Top bar</option>
+		<option value="bottom">Bottom bar</option>
+		<option value="topbottom">Top and bottom bar</option>
+	</select>
+
+	<script src="browser-polyfill.min.js"></script>
 	<script src="main.js"></script>
 </body>
 </html>

style.css

@@ -1,20 +1,37 @@
-body.envify {
-  padding-left: 35px !important;
-  padding-right: 35px !important;
-}
-
 body div.envify.left {
+  padding-left: 5px !important;
   position: fixed;
   top: 0px;
   left: 0px;
   height: 100%;
-  width: 35px;
+  width: 5px;
 }
 
 body div.envify.right {
+  padding-right: 5px !important;
   position: fixed;
   top: 0px;
   right: 0px;
   height: 100%;
-  width: 35px;
+  width: 5px;
+}
+
+body div.envify.top {
+  padding-top: 5px !important;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 5px;
+  width: 100%;
+  z-index: 9999;
+}
+
+body div.envify.bottom {
+  padding-bottom: 5px !important;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  height: 5px;
+  width: 100%;
+  z-index: 9999;
 }