Add zoom option

src/_locales/en/messages.json

@@ -635,6 +635,9 @@
   "optionsThemeCustomText": {
     "message": "Text"
   },
+  "optionsThemeCustomZoom": {
+    "message": "Zoom"
+  },
   "optionsThemeDetail": {
     "message": "Choose theme."
   },

src/_locales/fa/messages.json

@@ -635,6 +635,9 @@
   "optionsThemeCustomText": {
     "message": "متن"
   },
+  "optionsThemeCustomZoom": {
+    "message": "بزرگ‌نمایی"
+  },
   "optionsThemeDetail": {
     "message": "پوسته ای را انتخاب کنید."
   },

src/_locales/ja/messages.json

@@ -635,6 +635,9 @@
   "optionsThemeCustomText": {
     "message": "テキスト色"
   },
+  "optionsThemeCustomZoom": {
+    "message": "ズーム"
+  },
   "optionsThemeDetail": {
     "message": "テーマを選択してください。"
   },

src/css/options.css

@@ -235,6 +235,35 @@ pre > code {
   vertical-align: middle;
 }
 
+/* zoom slider */
+#customThemeSettings tr:has(#customZoom) {
+  display: none;
+}
+
+@supports (zoom: 1) {
+  #customThemeSettings tr:has(#customZoom) {
+    border-top: double;
+    display: table-row;
+  }
+
+  span:has(> #customZoom) {
+    display: inline-block;
+  }
+
+  #customZoom + datalist {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    line-height: 0.5;
+  }
+
+  #customZoom + datalist > option {
+    margin: 0 0.25em;
+    padding: 0;
+    font-family: monospace;
+  }
+}
+
 #userCSS {
   display: block;
 }

src/css/sidebar.css

@@ -44,6 +44,7 @@
   --tab-group-4-heading-text: #395672;
   --throbber-connecting-color: #0061e0;
   --font-weight-active: normal;
+  --zoom-level: 1;
 
   color-scheme: light dark;
   font: menu;
@@ -70,6 +71,7 @@ main {
   height: 100vh;
   overflow-y: auto;
   scrollbar-width: auto;
+  zoom: var(--zoom-level);
 }
 
 .narrow main {

src/html/options.html

@@ -156,6 +156,24 @@ <h1 data-i18n="optionsTitle">Sidebar Tabs - Options</h1>
                   <td>
                   </td>
                 </tr>
+                <tr>
+                  <th data-i18n="optionsThemeCustomZoom">
+                    Zoom
+                  </th>
+                  <td colspan="3">
+                    <span>
+                      <input type="range" id="customZoom"
+                             list="customZoomMarker"
+                             min="0.5" max="2" step="0.1" value="1" />
+                      <datalist id="customZoomMarker">
+                        <option value="0.5" label="0.5"></option>
+                        <option value="1" label="1.0"></option>
+                        <option value="1.5" label="1.5"></option>
+                        <option value="2" label="2.0"></option>
+                      </datalist>
+                    </span>
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>

src/mjs/constant.js

@@ -71,6 +71,7 @@ export const CSS_VAR_HEADING_TEXT_GROUP_4 = '--tab-group-4-heading-text';
 export const CSS_VAR_HEADING_TEXT_PINNED = '--tab-group-pinned-heading-text';
 export const CSS_VAR_OUTLINE_FOCUS = '--focus-outline-color';
 export const CSS_VAR_THROBBER_CONNECT = '--throbber-connecting-color';
+export const CSS_VAR_ZOOM = '--zoom-level';
 export const CUSTOM_BG = 'customBackgroundColor';
 export const CUSTOM_BG_ACTIVE = 'customActiveBackgroundColor';
 export const CUSTOM_BG_DISCARDED = 'customDiscardedBackgroundColor';
@@ -100,6 +101,7 @@ export const CUSTOM_HEADING_TEXT_GROUP_4 = 'customTabGroup4HeadingText';
 export const CUSTOM_HEADING_TEXT_PINNED = 'customPinnedTabGroupHeadingText';
 export const CUSTOM_OUTLINE_FOCUS = 'customFocusOutlineColor';
 export const CUSTOM_THROBBER_CONNECT = 'customThrobberConnectingColor';
+export const CUSTOM_ZOOM = 'customZoom';
 export const DATA_I18N = 'data-i18n';
 export const DISCARDED = 'discarded';
 export const DROP_TARGET = 'drop-target';

src/mjs/main.js

@@ -45,7 +45,8 @@ import {
 import {
   applyCustomTheme, applyTheme, initCustomTheme, sendCurrentTheme,
   setActiveTabFontWeight, setNewTabSeparator, setScrollbarWidth,
-  setSidebarTheme, setTabGroupColorBarWidth, setTabHeight, setUserCss
+  setSidebarTheme, setTabGroupColorBarWidth, setTabHeight, setUserCss,
+  setZoomLevel
 } from './theme.js';
 import {
   activateTab, createSidebarTab, getSidebarTab, getSidebarTabContainer,
@@ -59,11 +60,11 @@ import {
   CLASS_TAB_CONTAINER, CLASS_TAB_CONTAINER_TMPL, CLASS_TAB_CONTENT,
   CLASS_TAB_CONTEXT, CLASS_TAB_GROUP, CLASS_TAB_ICON, CLASS_TAB_IDENT_ICON,
   CLASS_TAB_ITEMS, CLASS_TAB_TITLE, CLASS_TAB_TMPL, CLASS_TAB_TOGGLE_ICON,
-  COLOR_SCHEME_DARK, COOKIE_STORE_DEFAULT, DISCARDED, EXT_INIT, FONT_ACTIVE,
-  FONT_ACTIVE_BOLD, FONT_ACTIVE_NORMAL, FRAME_COLOR_USE, HIGHLIGHTED, NEW_TAB,
-  NEW_TAB_BUTTON, NEW_TAB_OPEN_CONTAINER, NEW_TAB_OPEN_NO_CONTAINER,
-  NEW_TAB_SEPARATOR_SHOW, OPTIONS_OPEN, PINNED, PINNED_HEIGHT,
-  SCROLL_DIR_INVERT, SIDEBAR, SIDEBAR_MAIN, SIDEBAR_STATE_UPDATE,
+  COLOR_SCHEME_DARK, COOKIE_STORE_DEFAULT, CUSTOM_ZOOM, DISCARDED, EXT_INIT,
+  FONT_ACTIVE, FONT_ACTIVE_BOLD, FONT_ACTIVE_NORMAL, FRAME_COLOR_USE,
+  HIGHLIGHTED, NEW_TAB, NEW_TAB_BUTTON, NEW_TAB_OPEN_CONTAINER,
+  NEW_TAB_OPEN_NO_CONTAINER, NEW_TAB_SEPARATOR_SHOW, OPTIONS_OPEN, PINNED,
+  PINNED_HEIGHT, SCROLL_DIR_INVERT, SIDEBAR, SIDEBAR_MAIN, SIDEBAR_STATE_UPDATE,
   TAB_ALL_BOOKMARK, TAB_ALL_RELOAD, TAB_ALL_SELECT,
   TAB_BOOKMARK, TAB_CLOSE, TAB_CLOSE_DUPE, TAB_CLOSE_UNDO, TAB_DUPE,
   TAB_GROUP, TAB_GROUP_BOOKMARK, TAB_GROUP_CLOSE, TAB_GROUP_COLLAPSE,
@@ -101,6 +102,7 @@ export const userOpts = new Map();
 /* user options keys */
 export const userOptsKeys = new Set([
   BROWSER_SETTINGS_READ,
+  CUSTOM_ZOOM,
   FONT_ACTIVE_BOLD,
   FONT_ACTIVE_NORMAL,
   FRAME_COLOR_USE,
@@ -155,7 +157,7 @@ export const setUserOpts = async (opt = {}) => {
       }
       default: {
         const { checked, value: itemValue } = value;
-        if (key === PINNED_HEIGHT) {
+        if (key === CUSTOM_ZOOM || key === PINNED_HEIGHT) {
           userOpts.set(key, itemValue);
         } else if (key === TABS_CLOSE_MDLCLICK_PREVENT) {
           userOpts.set(TABS_CLOSE_MDLCLICK, !checked);
@@ -2392,6 +2394,16 @@ export const setStorageValue = async (item, obj, changed = false) => {
           func.push(storeCloseTabsByDoubleClickValue(!!checked));
         }
         break;
+      case CUSTOM_ZOOM:
+        func.push(setUserOpts({
+          [item]: {
+            value
+          }
+        }));
+        if (changed) {
+          func.push(setZoomLevel(value));
+        }
+        break;
       case FONT_ACTIVE_BOLD:
       case FONT_ACTIVE_NORMAL:
         func.push(setUserOpts({
@@ -2741,7 +2753,12 @@ export const startup = async () => {
     useFrame: userOpts.get(FRAME_COLOR_USE) ?? false,
     startup: true
   }).then(applyUserCustomTheme);
-  await setActiveTabFontWeight(userOpts.get(FONT_ACTIVE) ?? '');
+  if (userOpts.has(FONT_ACTIVE)) {
+    await setActiveTabFontWeight(userOpts.get(FONT_ACTIVE));
+  }
+  if (userOpts.has(CUSTOM_ZOOM)) {
+    await setZoomLevel(userOpts.get(CUSTOM_ZOOM));
+  }
   return emulateTabs().then(restoreTabGroups).then(restoreTabContainers)
     .then(toggleTabGrouping).then(setPinnedObserver)
     .then(restoreHighlightedTabs).then(requestSaveSession)

src/mjs/options-main.js

@@ -10,7 +10,7 @@ import {
 } from './browser.js';
 import { isObjectNotEmpty, isString, throwErr } from './common.js';
 import {
-  BOOKMARK_LOCATION, BROWSER_SETTINGS_READ, COLOR_SCHEME, EXT_INIT,
+  BOOKMARK_LOCATION, BROWSER_SETTINGS_READ, COLOR_SCHEME, CUSTOM_ZOOM, EXT_INIT,
   MENU_SHOW_MOUSEUP, THEME_CUSTOM, THEME_CUSTOM_DARK, THEME_CUSTOM_INIT,
   THEME_CUSTOM_LIGHT, THEME_CUSTOM_REQ, THEME_CUSTOM_SETTING, THEME_ID,
   THEME_RADIO, USER_CSS, USER_CSS_SAVE, USER_CSS_USE, USER_CSS_WARN
@@ -50,6 +50,10 @@ export const initExt = async (init = false) => {
 export const initCustomTheme = async (init = false) => {
   let func;
   if (init) {
+    const elm = document.getElementById(CUSTOM_ZOOM);
+    if (elm) {
+      elm.value = '1';
+    }
     func = sendMsg({
       [THEME_CUSTOM_INIT]: !!init
     });
@@ -403,6 +407,24 @@ export const setHtmlInputValue = async (data = {}) => {
         elm.value = isString(value) ? value.trim() : '';
         break;
       }
+      case 'range': {
+        if (id === CUSTOM_ZOOM) {
+          const val = parseFloat(value);
+          if (Number.isNaN(val)) {
+            elm.value = '1';
+          } else {
+            let { min, max } = elm;
+            min = parseFloat(min);
+            max = parseFloat(max);
+            if (min <= val && val <= max) {
+              elm.value = `${val}`;
+            } else {
+              elm.value = '1';
+            }
+          }
+        }
+        break;
+      }
       default: {
         if (localName === 'select' && id === BOOKMARK_LOCATION && value) {
           const child = elm.querySelector(`#${value.trim()}`);

src/mjs/theme.js

@@ -25,6 +25,7 @@ import {
   CSS_VAR_HEADING_TEXT_GROUP_1, CSS_VAR_HEADING_TEXT_GROUP_2,
   CSS_VAR_HEADING_TEXT_GROUP_3, CSS_VAR_HEADING_TEXT_GROUP_4,
   CSS_VAR_HEADING_TEXT_PINNED, CSS_VAR_OUTLINE_FOCUS, CSS_VAR_THROBBER_CONNECT,
+  CSS_VAR_ZOOM,
   CUSTOM_BG, CUSTOM_BG_ACTIVE, CUSTOM_BG_DISCARDED, CUSTOM_BG_FIELD,
   CUSTOM_BG_FIELD_ACTIVE, CUSTOM_BG_FRAME, CUSTOM_BG_HOVER,
   CUSTOM_BG_HOVER_SHADOW, CUSTOM_BG_SELECT, CUSTOM_BG_SELECT_HOVER,
@@ -35,6 +36,7 @@ import {
   CUSTOM_HEADING_TEXT_GROUP_1, CUSTOM_HEADING_TEXT_GROUP_2,
   CUSTOM_HEADING_TEXT_GROUP_3, CUSTOM_HEADING_TEXT_GROUP_4,
   CUSTOM_HEADING_TEXT_PINNED, CUSTOM_OUTLINE_FOCUS, CUSTOM_THROBBER_CONNECT,
+  CUSTOM_ZOOM,
   NEW_TAB, NEW_TAB_SEPARATOR_SHOW, TAB,
   THEME, THEME_ALPEN, THEME_ALPEN_DARK, THEME_ALPEN_ID, THEME_AUTO,
   THEME_CURRENT, THEME_CURRENT_ID, THEME_CUSTOM, THEME_CUSTOM_DARK,
@@ -965,10 +967,11 @@ export const initCustomTheme = async (opt = {}) => {
     if (remove) {
       const dark = window.matchMedia(COLOR_SCHEME_DARK).matches;
       if (dark) {
-        await removeStorage([THEME_CUSTOM_DARK]);
+        await removeStorage([THEME_CUSTOM_DARK, CUSTOM_ZOOM]);
       } else {
-        await removeStorage([THEME_CUSTOM_LIGHT]);
+        await removeStorage([THEME_CUSTOM_LIGHT, CUSTOM_ZOOM]);
       }
+      await updateCustomThemeCss(CSS_ROOT, CSS_VAR_ZOOM, '1');
     }
     currentThemeColors.clear();
     currentTheme.clear();
@@ -1417,6 +1420,21 @@ export const setActiveTabFontWeight = async value => {
   return func || null;
 };
 
+/* zoom level */
+/**
+ * set zoom level
+ * @param {string|number} value - zoom level value
+ * @returns {Promise.<?Promise>} - updateCustomThemeCss()
+ */
+export const setZoomLevel = async value => {
+  value = parseFloat(value);
+  let func;
+  if (!Number.isNaN(value)) {
+    func = updateCustomThemeCss(CSS_ROOT, CSS_VAR_ZOOM, `${value}`);
+  }
+  return func || null;
+};
+
 /**
  * apply CSS
  * @returns {Promise.<void>} - void