misc menu changes WIP

web-extension/_locales/en/messages.json

@@ -4,13 +4,10 @@
         "description": "Extension name"
     },
     "includeStyle": {
-        "message": "Include Style"
+        "message": "Include Original Style"
-    },
-    "styleLabel": {
-        "message": "Custom Style:"
     },
     "applyStyle": {
-        "message": "Apply"
+        "message": "Apply Custom Style"
     },
     "editStyles": {
         "message": "Edit Styles ..."

web-extension/menu.html

@@ -24,13 +24,22 @@
       font-weight: bold;
       padding: 5px 0;
       font-family: sans-serif;
+      padding-top: 10px;
+      padding-left: 5px;
+    }
+
+    .optionContainer {
+        font-family: sans-serif;
+        font-size: 14px;
+        padding: 6px 0;
+        padding-left: 3px;
     }
 
     button {
       font-family: sans-serif;
       font-size: 14px;
       width: 100%;
-      padding: 4px 0;
+      padding: 6px 0;
       padding-left: 8px;
       border: none;
       background-color: white;
@@ -82,29 +91,11 @@
       }
     }
 
-    #styleLabel {
-      padding: 5px 0;
-      font-family: sans-serif;
-      font-size: 15px;
-      padding: 7px 0;
-      background-color: white;
-    }
-    #styleLabel:disabled {
-        color: gray;
-    }
-
-    #allStylesList {
-      display: inline-block;
-      width: 100%;
-      padding: 3px;
-    }
-
     #includeStyle {
       font-family: sans-serif;
       font-size: 14px;
       padding: 0;
       padding-bottom: 8px;
-      border-bottom: dashed 1px #ccc;
       background-color: white;
       text-align: left;
     }
@@ -116,8 +107,15 @@
       outline: none;
     }
 
-    #includeStyleCheck {
+    input[type="checkbox"] {
         outline: none;
+        font-family: sans-serif;
+        font-size: 14px;
+    }
+    #applyStyle, #includeStyle {
+        outline: none;
+        font-family: sans-serif;
+        font-size: 14px;
     }
     .shortcut {
         font-size: 10px;
@@ -130,17 +128,13 @@
   <div class="menu-holder">
     <div id="menuTitle"></div>
     <hr/>
-    <div><input type="checkbox" name="button" id="includeStyleCheck"></input><span id="includeStyle"></span></div>
+    <div class="optionContainer">
-    <div id="customStyles">
+        <input type="checkbox" name="button" id="includeStyleCheck"></input><span id="includeStyle"></span>
-        <div id="styleLabel"></div>
-        <div>
-          <select id="allStylesList"></select>
-        </div>
-        <div class="">
-          <button id="applyStyle" type="button" name="button" style="display:inline-block;width:47%;border-right:solid 1px black;"></button>
-          <button id="editStyles" type="button" name="button" style="display:inline-block;width:47%;"></button>
     </div>
+    <div class="optionContainer">
+        <input type="checkbox" name="button" id="applyStyleCheck"></input><span id="applyStyle"></span>
     </div>
+    <button id="editStyles" type="button" name="button"></button>
     <hr/>
     <button id="savePage" type="button" name="button">
         <div id="savePageLabel"></div>

web-extension/menu.js

@@ -5,7 +5,7 @@ var appliedStyles = [];
 // create menu labels
 document.getElementById('menuTitle').innerHTML = chrome.i18n.getMessage('extName');
 document.getElementById('includeStyle').innerHTML = chrome.i18n.getMessage('includeStyle');
-document.getElementById('styleLabel').innerHTML = chrome.i18n.getMessage('styleLabel');
+// document.getElementById('styleLabel').innerHTML = chrome.i18n.getMessage('styleLabel');
 document.getElementById('applyStyle').innerHTML = chrome.i18n.getMessage('applyStyle');
 document.getElementById('editStyles').innerHTML = chrome.i18n.getMessage('editStyles');
 document.getElementById('savePageLabel').innerHTML = chrome.i18n.getMessage('savePage');
@@ -26,7 +26,7 @@ function createStyleList(styles) {
             return;
         }
 
-        var existingStyles = document.getElementById('allStylesList');
+        var existingStyles = {} //document.getElementById('allStylesList');
         var foundMatchingUrl = false;
 
         while (existingStyles.hasChildNodes() && existingStyles.childElementCount > 1) {
@@ -78,7 +78,7 @@ function createStyleList(styles) {
 function createIncludeStyle(data) {
     var includeStyleCheck = document.getElementById('includeStyleCheck');
     includeStyleCheck.checked = data;
-    document.getElementById('customStyles').style.display = !includeStyleCheck.checked ? 'none' : 'block';
+    // document.getElementById('customStyles').style.display = !includeStyleCheck.checked ? 'none' : 'block';
 }
 
 getIncludeStyle(createIncludeStyle);
@@ -86,17 +86,18 @@ getIncludeStyle(createIncludeStyle);
 document.getElementById('includeStyleCheck').onclick = function () {
     var includeStyleCheck = document.getElementById('includeStyleCheck');
     setIncludeStyle(includeStyleCheck.checked);
-    document.getElementById('customStyles').style.display = !includeStyleCheck.checked ? 'none' : 'block';
+    // document.getElementById('customStyles').style.display = !includeStyleCheck.checked ? 'none' : 'block';
 }
 
-document.getElementById('allStylesList').onchange = function () {
+// document.getElementById('allStylesList').onchange = function () {
-    var newValue = this.value;
+//     var newValue = this.value;
-    newValue = newValue.replace('option_', '');
+//     newValue = newValue.replace('option_', '');
-    newValue = parseInt(newValue);
+//     newValue = parseInt(newValue);
-    currentStyle = allStyles[newValue];
+//     currentStyle = allStyles[newValue];
-    setCurrentStyle(currentStyle);
+//     setCurrentStyle(currentStyle);
-}
+// }
 
+// FIXME
 document.getElementById("applyStyle").onclick = function() {
     chrome.tabs.query({
         currentWindow: true,