browser-extension-settings 0.6.5 → 0.7.1

package/lib/common.ts

@@ -1,4 +1,5 @@
-export const besVersion = 62
+// Version 0.7.1
+export const besVersion = 71
 export const openButton = `<svg viewBox="0 0 60.2601318359375 84.8134765625" version="1.1" xmlns="http://www.w3.org/2000/svg" class=" glyph-box" style="height: 9.62969px; width: 6.84191px;"><g transform="matrix(1 0 0 1 -6.194965820312518 77.63671875)"><path d="M66.4551-35.2539C66.4551-36.4746 65.9668-37.5977 65.0391-38.4766L26.3672-76.3672C25.4883-77.1973 24.4141-77.6367 23.1445-77.6367C20.6543-77.6367 18.7012-75.7324 18.7012-73.1934C18.7012-71.9727 19.1895-70.8496 19.9707-70.0195L55.5176-35.2539L19.9707-0.488281C19.1895 0.341797 18.7012 1.41602 18.7012 2.68555C18.7012 5.22461 20.6543 7.12891 23.1445 7.12891C24.4141 7.12891 25.4883 6.68945 26.3672 5.81055L65.0391-32.0312C65.9668-32.959 66.4551-34.0332 66.4551-35.2539Z"></path></g></svg>`
 export const openInNewTabButton = `<svg viewBox="0 0 72.127685546875 72.2177734375" version="1.1" xmlns="http://www.w3.org/2000/svg" class=" glyph-box" style="height: 8.19958px; width: 8.18935px;"><g transform="matrix(1 0 0 1 -12.451127929687573 71.3388671875)"><path d="M84.5703-17.334L84.5215-66.4551C84.5215-69.2383 82.7148-71.1914 79.7852-71.1914L30.6641-71.1914C27.9297-71.1914 26.0742-69.0918 26.0742-66.748C26.0742-64.4043 28.1738-62.4023 30.4688-62.4023L47.4609-62.4023L71.2891-63.1836L62.207-55.2246L13.8184-6.73828C12.9395-5.85938 12.4512-4.73633 12.4512-3.66211C12.4512-1.31836 14.5508 0.878906 16.9922 0.878906C18.1152 0.878906 19.1895 0.488281 20.0684-0.439453L68.5547-48.877L76.6113-58.0078L75.7324-35.2051L75.7324-17.1387C75.7324-14.8438 77.7344-12.6953 80.127-12.6953C82.4707-12.6953 84.5703-14.6973 84.5703-17.334Z"></path></g></svg>`
 export const settingButton = `<svg viewBox="0 0 16 16" version="1.1">

package/lib/settings.ts

@@ -8,14 +8,12 @@ import {
   $$,
   addElement,
   addEventListener,
-  addStyle,
   createHTML,
   doc,
   parseInt10,
   registerMenuCommand,
   removeEventListener,
-  runWhenDomReady,
-  runWhenHeadExists,
+  createElement,
 } from "browser-extension-utils"
 import styleText from "data-text:./style.scss"
 import {
@@ -23,14 +21,7 @@ import {
   getPrefferedLocale,
 } from "browser-extension-i18n"
 import { createSwitchOption } from "./switch"
-import {
-  createExtensionList,
-  addCurrentExtension,
-  activeExtension,
-  activeExtensionList,
-  deactiveExtensionList,
-} from "./extension-list"
-import { besVersion, settingButton } from "./common"
+import { besVersion } from "./common"
 import { i, resetI18n, localeNames } from "./messages/index"
 
 // Declare GM global variable for userscript environment
@@ -41,7 +32,7 @@ declare const GM:
     }
   | undefined
 
-const prefix = "browser_extension_settings_"
+const prefix = "browser_extension_settings_v2_"
 
 type SettingsOptions = {
   id: string
@@ -116,20 +107,14 @@ type RelatedExtension = {
   url: string
 }
 
-type InstalledExtension = {
-  id: string
-  title: string
-  version: string
+const getSettingsElement = () => {
+  const wrapper = getSettingsWrapper()
+  return (
+    (wrapper?.querySelector(`.${prefix}main`) as HTMLElement | undefined) ||
+    undefined
+  )
 }
 
-const randomId = String(Math.round(Math.random() * 10_000))
-const settingsContainerId = prefix + "container_" + randomId
-const settingsElementId = prefix + "main_" + randomId
-const getSettingsElement = () => $("#" + settingsElementId)
-const getSettingsStyle: () => string = () =>
-  styleText
-    .replaceAll(/browser_extension_settings_container/gm, settingsContainerId)
-    .replaceAll(/browser_extension_settings_main/gm, settingsElementId)
 const storageKey = "settings"
 
 let settingsOptions: SettingsOptions
@@ -184,26 +169,25 @@ const closeModal = () => {
   const settingsContainer = getSettingsContainer()
   if (settingsContainer) {
     settingsContainer.style.display = "none"
+    settingsContainer.remove()
   }
 
   removeEventListener(document, "click", onDocumentClick, true)
   removeEventListener(document, "keydown", onDocumentKeyDown, true)
+  removeEventListener(
+    globalThis,
+    "beforeShowSettings",
+    onBeforeShowSettings,
+    true
+  )
 }
 
 export function hideSettings() {
   closeModal()
 }
 
-function destroySettings() {
-  closeModal()
-  const settingsContainer = getSettingsContainer()
-  if (settingsContainer) {
-    settingsContainer.remove()
-  }
-}
-
 function isSettingsShown() {
-  const settingsContainer = getSettingsContainer()
+  const settingsContainer = $(`.${prefix}container`)
   if (settingsContainer) {
     return settingsContainer.style.display === "block"
   }
@@ -212,8 +196,15 @@ function isSettingsShown() {
 }
 
 const onDocumentClick = (event: Event) => {
-  const target = event.target as HTMLElement
-  if (target?.closest(`.${prefix}container`)) {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+  const path = (event as any).composedPath?.() || []
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+  const insideContainer = path.some(
+    (node: unknown) =>
+      node instanceof HTMLElement &&
+      node.classList?.contains(`${prefix}container`)
+  )
+  if (insideContainer) {
     return
   }
 
@@ -246,8 +237,10 @@ async function updateOptions() {
       // console.log(key, type)
       switch (type) {
         case "switch": {
+          const root = getSettingsElement()!
           const checkbox = $(
-            `#${settingsElementId} .option_groups .switch_option[data-key="${key}"] input`
+            `.option_groups .switch_option[data-key="${key}"] input`,
+            root
           ) as HTMLInputElement
           if (checkbox) {
             checkbox.checked = getSettingsValue(key) as boolean
@@ -257,8 +250,10 @@ async function updateOptions() {
         }
 
         case "select": {
+          const root = getSettingsElement()!
           const options = $$(
-            `#${settingsElementId} .option_groups .select_option[data-key="${key}"] .bes_select option`
+            `.option_groups .select_option[data-key="${key}"] .bes_select option`,
+            root
           ) as HTMLOptionElement[]
 
           for (const option of options) {
@@ -269,8 +264,10 @@ async function updateOptions() {
         }
 
         case "textarea": {
+          const root = getSettingsElement()!
           const textArea = $(
-            `#${settingsElementId} .option_groups textarea[data-key="${key}"]`
+            `.option_groups textarea[data-key="${key}"]`,
+            root
           ) as HTMLTextAreaElement
           if (textArea) {
             textArea.value = getSettingsValue(key) as string
@@ -292,48 +289,59 @@ async function updateOptions() {
   }
 }
 
-function getSettingsContainer() {
+function getSettingsContainer(create = false) {
   const container = $(`.${prefix}container`)
   if (container) {
     const theVersion = parseInt10(container.dataset.besVersion, 0)
     if (theVersion < besVersion) {
-      container.id = settingsContainerId
       container.dataset.besVersion = String(besVersion)
     }
 
     return container
   }
 
-  return addElement(doc.body, "div", {
-    id: settingsContainerId,
-    class: `${prefix}container`,
-    "data-bes-version": besVersion,
-    style: "display: none;",
-  })
+  if (create) {
+    return addElement(doc.body, "div", {
+      class: `${prefix}container`,
+      "data-bes-version": besVersion,
+      style: "display: none;",
+    })
+  }
 }
 
-function getSettingsWrapper() {
-  const container = getSettingsContainer()
-  return (
-    $(`.${prefix}wrapper`, container) ||
-    addElement(container, "div", {
-      class: `${prefix}wrapper`,
-    })
-  )
+function getSettingsShadowRoot(): ShadowRoot | undefined {
+  const container = getSettingsContainer(true)
+  if (container?.attachShadow) {
+    return container.shadowRoot || container.attachShadow({ mode: "open" })
+  }
+
+  return undefined
 }
 
-function initExtensionList() {
-  const wrapper = getSettingsWrapper()
-  if (!$(".extension_list_container", wrapper)) {
-    const list = createExtensionList([])
-    wrapper.append(list)
+function getSettingsWrapper() {
+  const shadow = getSettingsShadowRoot()
+  if (!shadow) {
+    const container = getSettingsContainer(true)!
+    return (
+      $(`.${prefix}wrapper`, container) ||
+      addElement(container, "div", { class: `${prefix}wrapper` })
+    )
   }
 
-  addCurrentExtension({
-    id: settingsOptions.id,
-    title: settingsOptions.title,
-    onclick: showSettings,
-  })
+  let wrapper = shadow.querySelector(`.${prefix}wrapper`)
+  if (!wrapper) {
+    wrapper = createElement("div", { class: `${prefix}wrapper` })
+    shadow.append(wrapper)
+
+    const existStyle = shadow.querySelector(`style`)
+    if (!existStyle) {
+      const styleElm = createElement("style")
+      styleElm.textContent = styleText
+      shadow.append(styleElm)
+    }
+  }
+
+  return wrapper as HTMLElement
 }
 
 function createSettingsElement() {
@@ -346,18 +354,9 @@ function createSettingsElement() {
     }
 
     settingsMain = addElement(wrapper, "div", {
-      id: settingsElementId,
       class: `${prefix}main thin_scrollbar`,
     })
 
-    // addElement(settingsMain, "a", {
-    //   textContent: i("settings.title"),
-    //   class: "navigation_go_previous",
-    //   onclick() {
-    //     activeExtensionList()
-    //   },
-    // })
-
     if (settingsOptions.title) {
       addElement(settingsMain, "h2", { textContent: settingsOptions.title })
     }
@@ -538,41 +537,6 @@ function createSettingsElement() {
   return settingsMain
 }
 
-function addSideMenu() {
-  if (!getSettingsValue("displaySettingsButtonInSideMenu")) {
-    return
-  }
-
-  const menu =
-    $("#browser_extension_side_menu") ||
-    addElement(doc.body, "div", {
-      id: "browser_extension_side_menu",
-      "data-bes-version": besVersion,
-    })
-
-  const button = $("button[data-bes-version]", menu)
-
-  if (button) {
-    const theVersion = parseInt10(button.dataset.besVersion, 0)
-    if (theVersion >= besVersion) {
-      return
-    }
-
-    button.remove()
-  }
-
-  addElement(menu, "button", {
-    type: "button",
-    "data-bes-version": besVersion,
-    title: i("settings.menu.settings"),
-    onclick() {
-      setTimeout(showSettings, 1)
-    },
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    innerHTML: createHTML(settingButton),
-  })
-}
-
 function addCommonSettings(settingsTable: SettingsTable) {
   let maxGroup = 0
   for (const key in settingsTable) {
@@ -613,8 +577,22 @@ function handleShowSettingsUrl() {
   }
 }
 
+function onBeforeShowSettings() {
+  // Close opened modal before showing settings from other extension
+  closeModal()
+}
+
 export async function showSettings() {
-  const settingsContainer = getSettingsContainer()
+  // Close opened modal before showing settings
+  closeModal()
+
+  const event = new CustomEvent("beforeShowSettings")
+  globalThis.dispatchEvent(event)
+
+  // Listen to beforeShowSettings event to close opened modal before showing settings from other extension
+  addEventListener(globalThis, "beforeShowSettings", onBeforeShowSettings, true)
+
+  const settingsContainer = getSettingsContainer(true)!
 
   const settingsMain = createSettingsElement()
   await updateOptions()
@@ -673,7 +651,7 @@ export const initSettings = async (optionsProvider: () => SettingsOptions) => {
     console.log("lastLocale:", lastLocale, "newLocale:", newLocale)
     if (lastLocale !== newLocale) {
       const isShown = isSettingsShown()
-      destroySettings()
+      closeModal()
       resetI18n(newLocale)
       lastLocale = newLocale
 
@@ -699,10 +677,6 @@ export const initSettings = async (optionsProvider: () => SettingsOptions) => {
     resetSettingsUI(optionsProvider)
   }, 50)
 
-  runWhenHeadExists(() => {
-    addStyle(getSettingsStyle())
-  })
-
   void registerMenuCommand(i("settings.menu.settings"), showSettings, {
     accessKey: "o",
   })

package/lib/style.scss

@@ -1,7 +1,8 @@
-#browser_extension_settings_container {
+:host {
   --browser-extension-settings-background-color: #f2f2f7;
   --browser-extension-settings-text-color: #444444;
   --browser-extension-settings-link-color: #217dfc;
+  --browser-extension-settings-border-radius: 8px;
   --sb-track-color: #00000000;
   --sb-thumb-color: #33334480;
   --sb-size: 2px;
@@ -10,23 +11,18 @@
   position: fixed;
   top: 10px;
   right: 30px;
-  max-height: 90%;
-  height: 600px;
-  overflow: hidden;
   display: none;
-
-  z-index: 100000;
-  border-radius: 5px;
+  z-index: 200000;
+  border-radius: var(--browser-extension-settings-border-radius);
   -webkit-box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22);
   -moz-box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22);
   box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22) !important;
 
-  .browser_extension_settings_wrapper {
+  .browser_extension_settings_v2_wrapper {
     display: flex;
-    height: 100%;
-    overflow: hidden;
     background-color: var(--browser-extension-settings-background-color);
     font-family: var(--font-family);
+    border-radius: var(--browser-extension-settings-border-radius);
 
     h1,
     h2 {
@@ -77,75 +73,6 @@
         font-family: var(--font-family);
       }
     }
-
-    a.navigation_go_previous {
-      color: var(--browser-extension-settings-link-color);
-      cursor: pointer;
-      display: none;
-
-      &::before {
-        content: "< ";
-      }
-    }
-
-    .extension_list_container {
-      overflow-x: auto;
-      box-sizing: border-box;
-      padding: 10px 15px;
-      background-color: var(--browser-extension-settings-background-color);
-      color: var(--browser-extension-settings-text-color);
-
-      .installed_extension_list,
-      .related_extension_list {
-        div {
-          background-color: #fff;
-          font-size: 14px;
-          border-top: 1px solid #cccccc;
-          padding: 6px 15px 6px 15px;
-
-          a,
-          a:visited {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            text-decoration: none;
-            color: var(--browser-extension-settings-text-color);
-            font-family: var(--font-family);
-
-            &:hover {
-              text-decoration: none;
-              color: var(--browser-extension-settings-text-color);
-            }
-
-            span {
-              margin-right: 10px;
-              line-height: 24px;
-              font-family: var(--font-family);
-            }
-          }
-
-          &.active,
-          &:hover {
-            background-color: #e4e4e6;
-          }
-
-          &.active a {
-            cursor: default;
-          }
-
-          &:first-of-type {
-            border-top: none;
-            border-top-right-radius: 10px;
-            border-top-left-radius: 10px;
-          }
-          &:last-of-type {
-            border-bottom-right-radius: 10px;
-            border-bottom-left-radius: 10px;
-          }
-        }
-      }
-    }
   }
 
   .thin_scrollbar {
@@ -169,11 +96,12 @@
   }
 }
 
-#browser_extension_settings_main {
-  min-width: 250px;
-  /*max-height: 90%;*/
+.browser_extension_settings_v2_main {
+  min-width: 300px;
+  max-height: 90vh;
   overflow-y: auto;
   overflow-x: hidden;
+  border-radius: var(--browser-extension-settings-border-radius);
 
   box-sizing: border-box;
   padding: 10px 15px;
@@ -217,8 +145,11 @@
   }
 
   .option_groups textarea {
+    background-color: var(--browser-extension-settings-background-color);
+    color: var(--browser-extension-settings-text-color);
     font-size: 12px;
     margin: 10px 0 10px 0;
+    padding: 4px 8px;
     height: 100px;
     width: 100%;
     border: 1px solid darkgray;
@@ -254,6 +185,7 @@
   }
 
   .bes_option > .bes_select {
+    color: var(--browser-extension-settings-text-color);
     box-sizing: border-box;
     background-color: #fff;
     height: 24px;
@@ -287,6 +219,8 @@
       background-color: #ffffff;
       color: var(--browser-extension-settings-text-color);
       text-align: left;
+      overflow-y: auto;
+      max-height: 300px;
       padding: 10px;
       display: none;
       border-radius: 5px;
@@ -392,62 +326,12 @@
   }
 }
 
-#browser_extension_side_menu {
-  min-height: 80px;
-  width: 30px;
-  opacity: 0;
-  position: fixed;
-  top: 80px;
-  right: 0;
-  padding-top: 20px;
-  z-index: 10000;
-}
-
-#browser_extension_side_menu:hover {
-  opacity: 1;
-}
-
-#browser_extension_side_menu button {
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  background-image: none;
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-}
-
-#browser_extension_side_menu button:hover {
-  opacity: 70%;
-}
-
-#browser_extension_side_menu button:active {
-  opacity: 100%;
-}
-
 @media (max-width: 500px) {
-  #browser_extension_settings_container {
+  :host {
     right: 10px;
+  }
 
-    .browser_extension_settings_wrapper {
-      a.navigation_go_previous {
-        display: block;
-      }
-
-      .extension_list_container {
-        display: none;
-      }
-      .extension_list_container.bes_active {
-        display: block;
-      }
-      .extension_list_container.bes_active + div {
-        display: none;
-      }
-    }
+  .browser_extension_settings_v2_main {
+    max-height: 85%;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.6.5",
+  "version": "0.7.1",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",