WebExt Settings UI: Add possibility to display hidden settings via co…

…ntext menu (darrinhenein#13) this is necessary to be able to change these settings at all, since about:config won't be possible anymore
DavidShepherdson · Apr 17, 2017 · e896df0 · e896df0
1 parent 5f61af8
commit e896df0
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 20 deletions.
diff --git a/webextension/manifest.json b/webextension/manifest.json
@@ -10,8 +10,8 @@
         "name": "Michael 'Croydon' Keck"
     },
     "homepage_url": "https://github.com/Croydon/vertical-tabs-reloaded",
-    "permissions": ["storage", "tabs"],
-    "background":
+    "permissions": ["contextMenus", "storage", "tabs"],
+    "background": 
     {
         "scripts": ["main.js"]
     },

diff --git a/webextension/options/options.html b/webextension/options/options.html
@@ -27,6 +27,33 @@
         padding-right: 10px !important;
         padding-left: 10px !important;
     }
+
+    select {
+        padding: 0.1em 3.5em 0.1em 1em !important;
+        background-image: url("chrome://global/skin/arrow/arrow-dn.gif") !important;
+        background-position:
+            calc(100% - 20px) calc(1em + 2px),
+            calc(100% - 15px) calc(1em + 2px),
+            100% 0 !important;
+        background-size:
+            5px 5px,
+            5px 5px,
+            2.5em 2.5em !important;
+        background-repeat: no-repeat !important;
+        box-sizing: border-box !important;
+    }
+
+    select option {
+        font-size: 1em;
+        padding-top: 0.2em;
+        padding-bottom: 0.2em;
+        padding-inline-start: 10px;
+        padding-inline-end: 30px;
+    }
+
+    .hidden-setting {
+        display: none;
+    }
     </style>
 </head>
 

diff --git a/webextension/options/options.js b/webextension/options/options.js
@@ -74,6 +74,26 @@ var settings = [
 		"title": "Hotkey for hiding/showing tabbar",
 		"value": "control-shift-v"
 	},
+	{
+		"name": "toggleDrawInTitlebar",
+		"type": "control",
+		"title": "Enable/Disable titlebar",
+		"label": "Toggle titlebar",
+		"description": "Enable the titlebar if the window control buttons are overlapping with Firefox elements"
+	},
+	{
+		"name": "setDefaultPrefs",
+		"type": "control",
+		"title": "Reset preferences of VTR",
+		"label": "Restore default preferences"
+	},
+    {
+        "name": "showHiddenSettings",
+        "type": "bool",
+        "title": "Display hidden settings",
+        "value": false,
+        "hidden": true
+    },
 	{
 		"name": "width",
 		"type": "integer",
@@ -88,19 +108,6 @@ var settings = [
 		"value": false,
 		"hidden": true
 	},
-	{
-		"name": "toggleDrawInTitlebar",
-		"type": "control",
-		"title": "Enable/Disable titlebar",
-		"label": "Toggle titlebar",
-		"description": "Enable the titlebar if the window control buttons are overlapping with Firefox elements"
-	},
-	{
-		"name": "setDefaultPrefs",
-		"type": "control",
-		"title": "Reset preferences of VTR",
-		"label": "Restore default preferences"
-	}
 ];
 
 function setDefaultPrefs()
@@ -144,24 +151,35 @@ function build()
 
         if(setting.hidden == true)
         {
-            return;
+            var classHidden = "hidden-setting";
+        }
+        else
+        {
+            var classHidden = "";
         }
 
         if(setting.type == "bool")
         {
-            settingsHTML += '<tr class="detail-row-complex"><td> <div class="checkboxItem"><label for="' + setting.name + '">' + setting.title + '</label> </td> <td> <input type="checkbox" id="' + setting.name + '"></div></td></tr>';
+            settingsHTML += '<tr class="detail-row-complex ' + classHidden + '"><td> <div class="checkboxItem"><label for="' + setting.name + '">' + setting.title + '</label> </td> <td> <input type="checkbox" id="' + setting.name + '"></div></td></tr>';
         }
 
         if(setting.type == "string")
         {
             if(setting.placeholder == undefined) { setting.placeholder = ""; }
 
-            settingsHTML += '<tr class="detail-row-complex"><td>' + setting.title + '</td> <td> <input type="text" id="' + setting.name + '" placeholder="' + setting.placeholder + '"></td></tr>';
+            settingsHTML += '<tr class="detail-row-complex ' + classHidden + '"><td>' + setting.title + '</td> <td> <input type="text" id="' + setting.name + '" placeholder="' + setting.placeholder + '"></td></tr>';
+        }
+
+        if(setting.type == "integer")
+        {
+            if(setting.placeholder == undefined) { setting.placeholder = ""; }
+
+            settingsHTML += '<tr class="detail-row-complex ' + classHidden + '"><td>' + setting.title + '</td> <td> <input type="number" id="' + setting.name + '" placeholder="' + setting.placeholder + '"></td></tr>';
         }
 
         if(setting.type == "menulist")
         {
-            newInnerHTML = '<tr class="detail-row-complex"><td>' + setting.title + ' </td> <td><select id="' + setting.name + '">';
+            newInnerHTML = '<tr class="detail-row-complex ' + classHidden + '"><td>' + setting.title + ' </td> <td><select id="' + setting.name + '">';
             Object.keys(setting.options).forEach(function(key)
             {
                 let option = setting.options[key];
@@ -175,7 +193,7 @@ function build()
 
         if(setting.type == "control")
         {
-            settingsHTML += '<tr class="detail-row-complex"><td>' + setting.title + '</td> <td> <button type="button" id="'+ setting.name +'">'+ setting.label +'</button> </td></tr>';
+            settingsHTML += '<tr class="detail-row-complex ' + classHidden + '"><td>' + setting.title + '</td> <td> <button type="button" id="'+ setting.name +'">'+ setting.label +'</button> </td></tr>';
         }
 
         if(setting.description != undefined)
@@ -246,6 +264,25 @@ function update_all_inputs()
     }
 
     blockSaveEvent = false;
+
+    main.get_setting("showHiddenSettings").then(value => {
+        if(value == false)
+        {
+            var newDisplay = ""; // see default CSS
+        }
+        else
+        {
+            var newDisplay = "table-row";
+        }
+
+        var elements = document.getElementsByClassName("hidden-setting");
+        for(var i=0; i<elements.length; i++)
+        {
+           main.debug_log(elements[i]);
+           elements[i].style.display = newDisplay;
+        }
+
+    });
 }
 
 document.addEventListener('DOMContentLoaded', function()
@@ -260,6 +297,17 @@ document.addEventListener('DOMContentLoaded', function()
         add_events(inputs[i]);
     }
 
+    chrome.contextMenus.create({
+        id: "hiddenSettingToggle",
+        title: "VTR: Show hidden settings",
+        contexts: ["all"]
+    });
+
+
+    browser.contextMenus.onClicked.addListener((info) => {
+        main.save_setting("showHiddenSettings", true);
+    });
+
     browser.storage.onChanged.addListener(update_all_inputs);
 
 });