WebExt settings UI: Quick CSS fix (darrinhenein#13)

DavidShepherdson · Jan 28, 2017 · 80b7a51 · 80b7a51
1 parent e8c6b4a
commit 80b7a51
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -7,15 +7,15 @@
 	"icon": "resource://verticaltabsreloaded-at-go-dev-dot-de/data/icon.png",
 	"author": "Croydon",
 	"license": "MPL-2.0",
-	"version": "0.8.0",
+	"version": "0.8.1-alpha",
 	"permissions": 
 	{
 		"private-browsing": true,
 		"multiprocess": true
 	},
 	"engines": 
 	{
-		"firefox": "51.0 - 53.0"
+		"firefox": "52.0 - 53.0"
     },
     "hasEmbeddedWebExtension": true,
 	"preferences-branch": "@verticaltabsreloaded",

diff --git a/webextension/manifest.json b/webextension/manifest.json
@@ -24,7 +24,7 @@
         "gecko": 
         {
             "id": "[email protected]",
-            "strict_min_version": "51.0"
+            "strict_min_version": "52.0"
         }
     }
 }
diff --git a/webextension/options.html b/webextension/options.html
@@ -2,14 +2,70 @@
 <html>
 <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+    <!--<link rel="stylesheet" href="chrome://mozapps/content/preferences/preferences.css">
+    <link rel="stylesheet" href="chrome://browser/skin/preferences/preferences.css">
+    <link rel="stylesheet" href="chrome://browser/skin/preferences/in-content/preferences.css">
+    <link rel="stylesheet" href="chrome://browser/content/preferences/handlers.css">-->
+    <link rel="stylesheet" href="chrome://mozapps/content/extensions/extensions.css">
+    <link rel="stylesheet" href="chrome://mozapps/skin/extensions/extensions.css">
+    <link rel="stylesheet" href="chrome://global/skin/dropmarker.css">
+    <style>
+    .preferences-description {
+        font-size: 90.9%;
+        color: graytext;
+        margin-top: -3px;
+        white-space: pre-wrap;
+    }
+
+    table {
+        border-collapse: collapse;
+    }
+
+    tr td {
+        border-top: 1px solid #c1c1c1;
+    }
+
+    select, input {
+        margin-left: 2px;
+    }
+
+    button {
+        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;
+    }
+    </style>
 </head>
 
-<body>
+<body class="detail-view-container">
     <form>
 
-        <div id="settings">
-
-        </div>
+        <table id="settings" style="width: 100%;">
+            <tr> <td style="width: 40%; max-width: 30%; border: none !important;"> </td> <td style="border: none !important;"> </td> </tr>
+        </table>
 
     </form>
 

diff --git a/webextension/options.js b/webextension/options.js
@@ -145,44 +145,41 @@ function build()
             return;
         }
 
-        document.getElementById("settings").innerHTML += "<hr>";
-
         if(setting.type == "bool")
         {
-            document.getElementById("settings").innerHTML += '<div class="checkboxItem"><label for="' + setting.name + '">' + setting.title + '</label><input type="checkbox" id="' + setting.name + '"></div>';
+            document.getElementById("settings").innerHTML += '<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>';
         }
 
         if(setting.type == "string")
         {
             if(setting.placeholder == undefined) { setting.placeholder = ""; }
 
-            document.getElementById("settings").innerHTML += setting.title + ' <input type="text" id="' + setting.name + '" placeholder="' + setting.placeholder + '">';
+            document.getElementById("settings").innerHTML += '<tr class="detail-row-complex"><td>' + setting.title + '</td> <td> <input type="text" id="' + setting.name + '" placeholder="' + setting.placeholder + '"></td></tr>';
         }
 
         if(setting.type == "menulist")
         {
-            newInnerHTML = setting.title + ' <select id="' + setting.name + '">';
+            newInnerHTML = '<tr class="detail-row-complex"><td>' + setting.title + ' </td> <td><select id="' + setting.name + '">';
             Object.keys(setting.options).forEach(function(key)
             {
                 let option = setting.options[key];
                 newInnerHTML += '<option value="' + option.value + '">' + option.label + '</option>';
             });
 
-            newInnerHTML += '</select>';
+            newInnerHTML += '</select></td></tr>';
 
             document.getElementById("settings").innerHTML += newInnerHTML;
         }
 
         if(setting.type == "control")
         {
-            document.getElementById("settings").innerHTML += setting.title + ' <button type="button" id="'+ setting.name +'">'+ setting.label +'</button>';
+            document.getElementById("settings").innerHTML += '<tr class="detail-row-complex"><td>' + setting.title + '</td> <td> <button type="button" id="'+ setting.name +'">'+ setting.label +'</button> </td></tr>';
         }
 
         if(setting.description != undefined)
         {
-            document.getElementById("settings").innerHTML += '<br>' + setting.description;
+            document.getElementById("settings").innerHTML += '<span class="preferences-description">' + setting.description + '</span>';
         }
-
     });
 }