diff --git a/content_script.js b/content_script.js index 6483c75..edfff22 100644 --- a/content_script.js +++ b/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) +}); diff --git a/popup/main.js b/popup/main.js index fd96aa0..395dc50 100644 --- a/popup/main.js +++ b/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) diff --git a/popup/manage_env.html b/popup/manage_env.html index 92500fb..c517b50 100644 --- a/popup/manage_env.html +++ b/popup/manage_env.html @@ -1,4 +1,4 @@ - +
@@ -17,7 +17,17 @@Select visual style
+ + + diff --git a/style.css b/style.css index 7cef13b..5e3562a 100644 --- a/style.css +++ b/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; }