Add: UI for schemeSwitcher

_locales/en/messages.json

@@ -950,6 +950,18 @@
   "optionsAdvancedNewStyleAsUsercss": {
     "message": "Write new style as usercss"
   },
+  "optionsAdvancedAutoSwitchScheme": {
+    "message": "Toggle Light/Dark Mode styles automatically"
+  },
+  "optionsAdvancedAutoSwitchSchemeNever": {
+    "message": "Never"
+  },
+  "optionsAdvancedAutoSwitchSchemeBySystem": {
+    "message": "By system preference"
+  },
+  "optionsAdvancedAutoSwitchSchemeByTime": {
+    "message": "By night time:"
+  },
   "optionsBadgeDisabled": {
     "message": "Background color when disabled"
   },

js/dom.js

@@ -462,7 +462,6 @@ function setupLivePrefs(
       oldValue = input.checked;
       // FIXME: use == because we use number value in iconset
       newValue = input.checked = value == input.value;
-      console.log(value, input.value);
     } else if (input.type === 'checkbox') {
       oldValue = input.checked;
       newValue = input.checked = value;

options.html

@@ -41,7 +41,7 @@
         <label>
           <span i18n-text="optionsIconDark"></span>
           <div class="iconset">
-            <input type="radio" name="iconset">
+            <input type="radio" name="iconset" value="0">
             <img src="/images/icon/16.png">
             <img src="/images/icon/16w.png">
             <img src="/images/icon/16x.png">
@@ -50,7 +50,7 @@
         <label>
           <span i18n-text="optionsIconLight"></span>
           <div class="iconset">
-            <input type="radio" name="iconset">
+            <input type="radio" name="iconset" value="1">
             <img src="/images/icon/light/16.png">
             <img src="/images/icon/light/16w.png">
             <img src="/images/icon/light/16x.png">
@@ -153,7 +153,7 @@
         </h1>
       </div>
       <div class="items">
-        <label>
+        <label class="option-item">
           <span i18n-text="optionsAdvancedExposeIframes">
             <a data-cmd="note"
                i18n-title="optionsAdvancedExposeIframesNote"
@@ -168,13 +168,33 @@
             <span></span>
           </span>
         </label>
-        <label class="chromium-only">
+        <label class="chromium-only option-item">
           <span i18n-text="optionsAdvancedContextDelete"></span>
           <span class="onoffswitch">
             <input type="checkbox" id="editor.contextDelete" class="slider">
             <span></span>
           </span>
         </label>
+        <div class="radio-group option-item">
+          <span i18n-text="optionsAdvancedAutoSwitchScheme" class="radio-group-label"></span>
+          <label class="radio-group-item">
+            <input type="radio" value="never" name="schemeSwitcher.enabled" class="radio">
+            <span i18n-text="optionsAdvancedAutoSwitchSchemeNever"></span>
+          </label>
+          <label class="radio-group-item">
+            <input type="radio" value="system" name="schemeSwitcher.enabled" class="radio">
+            <span i18n-text="optionsAdvancedAutoSwitchSchemeBySystem"></span>
+          </label>
+          <label class="radio-group-item">
+            <input type="radio" value="time" name="schemeSwitcher.enabled" class="radio">
+            <span>
+              <span i18n-text="optionsAdvancedAutoSwitchSchemeByTime"></span>
+              <input type="text" pattern="\d{2}:\d{2}" required id="schemeSwitcher.nightStart" class="input-sm">
+              ~
+              <input type="text" pattern="\d{2}:\d{2}" required id="schemeSwitcher.nightEnd" class="input-sm">
+            </span>
+          </label>
+        </div>
       </div>
     </div>
 

options/options.css

@@ -117,7 +117,8 @@ input[type=number] {
   text-align: right;
 }
 
-input[type=number]:invalid {
+input[type=number]:invalid,
+input[type=text]:invalid {
   background-color: rgba(255, 0, 0, 0.1);
   color: darkred;
 }
@@ -297,6 +298,44 @@ html:not(.firefox):not(.opera) #updates {
   background-color: transparent;
 }
 
+/* radio group */
+.radio-group-item {
+  display: flex;
+  align-items: center;
+  min-height: 1.5em;
+}
+.radio-group-item > input {
+  margin: 0 8px 0 0;
+  flex-grow: 0;
+}
+.radio-group-label {
+  display: block;
+  margin: 0 0 .3em;
+}
+
+.input-sm {
+  width: 3em;
+}
+
+.option-item {
+  margin: .25ex 0;
+}
+
+/* pixel perfect radio */
+input[type="radio"].radio::after {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  height: auto;
+  width: auto;
+  transform: scale(0);
+}
+input[type="radio"].radio:checked::after {
+  transform: scale(.65);
+}
+
 @keyframes fadeinout {
   0%   { opacity: 0 }
   10%  { opacity: 1 }