diff --git a/popup.html b/popup.html index 9ab450d7..5bd8225c 100644 --- a/popup.html +++ b/popup.html @@ -10,13 +10,11 @@ .disabled { color: #BBB; } - .disabled .disable { - display: none; - } - .enabled .enable { - display: none; + .checker { + display: inline; } .style-name { + display: inline; font-weight: bold; } .actions { @@ -53,4 +51,4 @@ - + \ No newline at end of file diff --git a/popup.js b/popup.js index 1abc467f..44af1a81 100644 --- a/popup.js +++ b/popup.js @@ -1,5 +1,5 @@ var styleTemplate = document.createElement("div"); -styleTemplate.innerHTML = "
" + t('editStyleLabel') + " " + t('enableStyleLabel') + " " + t('disableStyleLabel') + " " + t('deleteStyleLabel') + "
"; +styleTemplate.innerHTML = "
" + t('editStyleLabel') + " " + t('deleteStyleLabel') + "
"; chrome.tabs.getSelected(null, function(tab) { chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url}, showStyles); @@ -18,6 +18,16 @@ function showStyles(styles) { function createStyleElement(style) { var e = styleTemplate.cloneNode(true); + var checkbox = e.querySelector(".checker"); + checkbox.setAttribute("type","checkbox"); + checkbox.setAttribute("class","checker") + if (style.enabled == "true") { + checkbox.checked = true; + } + else { + checkbox.checked = false; + } + e.setAttribute("class", "entry " + (style.enabled == "true" ? "enabled" : "disabled")); e.setAttribute("style-id", style.id); var styleName = e.querySelector(".style-name"); @@ -25,8 +35,13 @@ function createStyleElement(style) { var editLink = e.querySelector(".style-edit-link"); editLink.setAttribute("href", editLink.getAttribute("href") + style.id); editLink.addEventListener("click", openLink, false); - e.querySelector(".enable").addEventListener("click", function() { enable(event, true); }, false); - e.querySelector(".disable").addEventListener("click", function() { enable(event, false); }, false); + + if (checkbox.checked == true) { + (checkbox).addEventListener("click", function() { enable(event, false); }, false); + } + else { + (checkbox).addEventListener("click", function() { enable(event, true); }, false); + } e.querySelector(".delete").addEventListener("click", function() { doDelete(event, false); }, false); return e; }