WIP popup redesign

src/common/interfaces/SettingsInterface.ts

@@ -330,7 +330,7 @@ interface SettingsInterface {
       popupAlignment: 'left' | 'right',
       minEnabledWidth: number,                 // don't show UI if player is narrower than % of screen width
       minEnabledHeight: number,                // don't show UI if player is narrower than % of screen height
-      activation: 'trigger-zone' | 'player',   // what needs to be hovered in order for UI to be visible
+      activation: 'player' | 'trigger-zone' | 'distance' | 'none',   // what needs to be hovered in order for UI to be visible
       triggerZoneDimensions: {                 // how large the trigger zone is (relative to player size)
         width: number
         height: number,

src/ext/lib/video-data/PlayerData.ts

@@ -259,7 +259,7 @@ class PlayerData {
    * Stops manually scanning for dimension changes
    */
   stopFallbackDimensionMonitor() {
-    clearImmediate(this.fallbackDimensionChangeInterval);
+    clearInterval(this.fallbackDimensionChangeInterval);
     this.fallbackDimensionChangeInterval = undefined;
   }
 

src/main.css

@@ -2,6 +2,9 @@
 @import "tailwindcss/utilities";
 
 @theme {
+  --breakpoint-popup: 640px;
+  --breakpoint-window: 960px;
+
   --color-primary: #ff872c;
   --color-primary-50:  #ffddbe;
   --color-primary-100: #ffcda0;
@@ -28,6 +31,9 @@ html, body {
   html, body {
     font-size: 12px;
   }
+  .mdi svg {
+    transform: scale(0.75)
+  }
 }
 
 @layer base {
@@ -74,4 +80,26 @@ html, body {
   small, strike {
     @apply opacity-50;
   }
+
+
+  /* Site support levels */
+  .site-support-level {
+    &.official {
+      @apply text-primary-400;
+    }
+    &.community {
+      @apply text-indigo-600;
+    }
+    &.officially-disabled {
+      @apply text-red-600;
+    }
+    &.no-support {
+      @apply text-slate-600;
+    }
+    &.user-added {
+      @apply text-cyan-700;
+    }
+  }
+  /* END site support levels */
+
 }

src/manifest.json

@@ -9,7 +9,7 @@
   },
   "action": {
     "default_title": "Ultrawidify",
-    "default_popup": "csui/csui-popup.html"
+    "default_popup": "ui/pages/settings/index.html#popup"
   },
 
 

src/ui/components/ExtensionSettings/Panels/FrameSiteSettings.vue

@@ -92,9 +92,6 @@ export default {
 }
 </script>
 
-<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
 <style lang="scss" scoped>
 .hoverable {
   border: 1px solid #333;

src/ui/components/PopupHead/PopupHead.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="w-full flex flex-row justify-between items-start border-b border-b-stone-700">
+    <div class="flex flex-col grow items-baseline grow px-4">
+      <div class="flex flex-row">
+        <h1 class="text-[3rem] text-white">Ultrawidify</h1><small v-if="settingsInitialized">{{settings.getExtensionVersion()}}-{{BrowserDetect.processEnvBrowser}}</small>
+      </div>
+      <div class="flex flex-row items-center gap-4 -mt-4">
+        <div>{{site?.host}}</div>
+        <SupportLevelIndicator
+          :siteSettings="siteSettings"
+        ></SupportLevelIndicator>
+      </div>
+    </div>
+    <div class="pt-4 pb-2 flex flex-col justify-start mr-8">
+      <div class="
+        flex flex-row
+        font-semibold
+      ">
+        <div
+          class="
+            pl-3 pr-4 py-2 flex flex-row items-center
+            bg-black text-stone-400 border border-stone-500
+            hover:text-white hover:border-white
+          "
+          @click="showInPlayerUi()"
+        >
+          <mdicon name="cog" size="24" class="mr-1"></mdicon>
+          Open settings window
+        </div>
+        <div class="
+          dropdown-parent
+          relative
+          py-2 bg-black text-stone-400 border border-stone-500
+          hover:text-white hover:border-white
+          transition-transform duration-100
+        ">
+          <mdicon name="chevron-down" size="24" class="group-hover:rotate-90"></mdicon>
+          <div
+            class="
+              open-settings-popup
+              bg-black text-stone-400 border border-stone-500
+              absolute top-0 right-[2rem]
+              hidden w-48
+              group-hover:flex group-hover:flex-col
+              hover:flex hover:flex-col
+            "
+          >
+            <div
+              @click="showInPlayerUi()"
+            >
+              Open settings in-page
+            </div>
+            <div
+              @click="openSettingsInTab()"
+            >
+              Open settings in a new tab
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
+import SupportLevelIndicator from '@components/common/components/SupportLevelIndicator.vue';
+
+
+export default defineComponent({
+  components: {
+
+    SupportLevelIndicator
+  },
+  props: [
+    'settings',
+    'siteSettings',
+    'eventBus',
+    'site'
+  ],
+  data() {
+    return {
+      BrowserDetect,
+    }
+  },
+  methods: {
+    showInPlayerUi() {
+      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
+    },
+    openSettingsInTab() {
+      chrome.runtime.openOptionsPage();
+    }
+  }
+})
+</script>
+<style lang="postcss" scoped>
+@import '../../../main.css'; /** postcss processor doesn't support aliases */
+
+.open-settings-popup {
+  width: 16rem;
+}
+
+.dropdown-parent:hover {
+  .mdi {
+    @apply rotate-90;
+  }
+
+  .open-settings-popup {
+    @apply flex flex-col border-white -mt-[1px];
+
+    div {
+      @apply w-full hover:text-white cursor-pointer px-4 py-1 hover:bg-stone-800;
+    }
+  }
+}
+
+</style>

src/ui/components/SettingsWindowContent.vue

@@ -4,28 +4,54 @@
   >
     <div class="flex flex-row w-full h-full overflow-hidden">
       <div class="settings-categories">
-        <div
+        <div class="tab-column">
-          v-for="tab of tabs"
-          :key="tab.id"
-        >
           <div
-            v-if="!tab.hidden"
+            v-for="tab of tabs"
-            class="tab"
+            :key="tab.id"
-            :class="{
-              'active': tab.id === selectedTab,
-              'highlight-tab': tab.highlight,
-            }"
-            @click="selectTab(tab.id)"
           >
-            <div class="label">
+            <div
-              {{tab.label}}
+              v-if="!tab.hidden"
-            </div>
+              class="tab"
-            <div class="icon-container">
+              :class="{
-              <mdicon
+                'active': tab.id === selectedTab || tab.children?.find(x => x.id === selectedTab),
-                v-if="tab.icon"
+                'highlight-tab': tab.highlight,
-                :name="tab.icon"
+              }"
-                :size="32"
+            >
-              />
+              <div
+                class="main-tab"
+                @click="selectTab(tab.id)"
+              >
+                <div class="label">
+                  {{tab.label}}
+                </div>
+                <div class="icon-container">
+                  <mdicon
+                    v-if="tab.icon"
+                    :name="tab.icon"
+                    :size="32"
+                  />
+                </div>
+              </div>
+              <div v-if="tab.children && (tab.id === selectedTab ||  tab.children?.find(x => x.id === selectedTab))" class="suboptions flex flex-col">
+                <div
+                  v-for="suboption of tab.children"
+                  :key="suboption.id"
+                  class="suboption"
+                  :class="{'active': suboption.id === selectedTab}"
+                  @click="selectTab(suboption.id)"
+                >
+                  <div class="label">
+                    {{suboption.label}}
+                  </div>
+                  <div class="icon-container">
+                    <mdicon
+                      v-if="suboption.icon"
+                      :name="suboption.icon"
+                      :size="32"
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -48,7 +74,7 @@
           </div>
         </div>
 
-        <div class="flex flex-row panel-content">
+        <div class="flex flex-col panel-content">
           <!-- Panel section -->
           <VideoSettings
             v-if="selectedTab === 'video-settings'"
@@ -57,6 +83,43 @@
             :eventBus="eventBus"
             :site="site"
           ></VideoSettings>
+
+          <template
+            v-if="settings && selectedTab === 'site-extension-settings'"
+          >
+            <h3>Settings for {{site?.host}}</h3>
+            <SiteExtensionSettings
+              :settings="settings"
+              :siteSettings="siteSettings"
+              :isDefaultConfiguration="false"
+            ></SiteExtensionSettings>
+
+            <pre>{{JSON.stringify(siteSettings.data, null, 2)}}</pre>
+          </template>
+
+          <template
+            v-if="settings && selectedTab === 'embedded-extension-settings'"
+          >
+            <h3>Settings for embedded sites</h3>
+            <FrameSiteSettings
+              :parentHost="site?.host"
+              :hosts="site?.hostnames"
+              :settings="settings"
+            ></FrameSiteSettings>
+          </template>
+
+
+          <template
+            v-if="settings && selectedTab === 'default-extension-settings'"
+          >
+            <h3>Default settings</h3>
+            <SiteExtensionSettings
+              :settings="settings"
+              :siteSettings="siteSettings"
+              :isDefaultConfiguration="false"
+            ></SiteExtensionSettings>
+          </template>
+
           <OtherSiteSettings
             v-if="selectedTab === 'extensionSettings'"
             :settings="settings"
@@ -129,6 +192,8 @@ import OtherSiteSettings from '@components/ExtensionSettings/Panels/OtherSiteSet
 import AutodetectionSettings from '@components/AutodetectionSettings/AutodetectionSettings.vue';
 import UISettings from '@components/UISettings/UISettings.vue';
 import KeyboardShortcutSettings from '@components/KeyboardShortcuts/KeyboardShortcutSettings.vue';
+import SiteExtensionSettings from '@components/ExtensionSettings/Panels/SiteExtensionSettings.vue';
+import FrameSiteSettings from '@components/ExtensionSettings/Panels/FrameSiteSettings.vue';
 
 import WhatsNew from '@components/ExtensionInfo/WhatsNew.vue';
 import About from '@components/ExtensionInfo/About.vue';
@@ -143,8 +208,17 @@ import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vu
 
 
 const AVAILABLE_TABS = {
-  'video-settings': {id: 'video-settings', label: 'Video settings', icon: 'crop'},
+  'video-settings': {
-  'site-extension-settings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
+    id: 'video-settings', label: 'Video settings', icon: 'crop',
+  },
+  'site-extension-settings': {
+    id: 'site-extension-settings', label: 'Site and Extension options', icon: 'cogs',
+    children: [
+      { id: 'site-extension-settings', label: 'For this site', },
+      { id: 'embedded-extension-settings', label: 'For embedded sites' },
+      { id: 'default-extension-settings', label: 'Default settings' }
+    ]
+  },
   'extensionSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
   'siteSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
   'autodetectionSettings': {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
@@ -181,6 +255,8 @@ export default defineComponent({
     AutodetectionSettings,
     KeyboardShortcutSettings,
     UISettings,
+    SiteExtensionSettings,
+    FrameSiteSettings,
 
     WhatsNew,
     About,
@@ -226,6 +302,11 @@ export default defineComponent({
     'inPlayer',
     'site',
   ],
+  watch: {
+    'initialPath': function (newVal) {
+      this.setInitialPath(newVal);
+    }
+  },
   computed: {
     // LPT: NO ARROW FUNCTIONS IN COMPUTED,
     // IS SUPER HARAM
@@ -238,9 +319,7 @@ export default defineComponent({
     this.generateTabs();
     this.settings.listenAfterChange(this.setDebugTabVisibility);
 
-    if (this.initialPath && this.initialPath.length) {
+    this.setInitialPath();
-      this.selectedTab = this.initialPath[0];
-    }
     const changelogTab  = this.tabs.find(x => x.id === 'changelog');
     if (changelogTab) {
       changelogTab.highlight = !this.settings.active?.whatsNewChecked;
@@ -283,6 +362,12 @@ export default defineComponent({
       }
       this.tabs = tabs;
     },
+    setInitialPath(path: string[] = this.initialPath) {
+      console.log('setting initial path:', this.initialPath)
+      if (path && path.length) {
+        this.selectedTab = path[0];
+      }
+    },
     selectTab(tab) {
       console.log("Selecting tab", tab);
       this.selectedTab = tab;
@@ -307,23 +392,62 @@ export default defineComponent({
 @import '../../main.css'; /** postcss processor doesn't support aliases */
 
 .settings-categories {
-  @apply w-[20em] max-w-[20em] flex flex-col grow-0 shrink-0 mr-4 border-r border-r-stone-800 text-right;
+  @apply
+    relative
+    w-[4.5em] popup:w-[18em] window:w-[24em]
+    mr-[1em]
+    grow-0 shrink-0 flex flex-col
 
-  .tab {
+    text-right;
-    @apply flex flex-row gap-4 px-4 py-2 justify-end items-center
-      text-[1.125em] text-stone-300 text-right font-mono
-      cursor-pointer
-      border-r-2 border-r-transparent
-      hover:bg-stone-800
-      hover:text-primary-200
-      hover:border-r-stone-600;
 
-      .label {
+  .tab-column {
-        @apply grow-0;
+    @apply absolute popup:relative top-0 right-0
+      w-[18em] window:w-full h-full z-[1000]
+      hover:bg-stone-950 popup:hover:bg-transparent
+      border-r border-r-stone-800
+      hover:translate-x-[calc(100%-4.5em)] popup:hover:translate-x-0
+      transition-transform duration-200;
+
+    .tab {
+      @apply
+        flex flex-col
+        cursor-pointer
+        border-r-2 border-r-transparent
+        border-r-primary-400;
+
+      &.active {
+        .main-tab {
+          @apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200 ;
+        }
       }
+    }
 
-    &.active {
+    .main-tab {
-      @apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200 border-r-primary-400;
+      @apply
+        px-[1em] py-[0.5em]
+        flex flex-row gap-4 justify-end items-center
+        text-[1.125em] text-stone-300 text-right font-mono
+        cursor-pointer
+        hover:bg-stone-800
+        hover:text-primary-200
+        hover:border-r-stone-600;
+
+        .label {
+          @apply grow-0;
+        }
+    }
+
+    .suboption {
+      @apply
+        px-6 py-2
+        text-[1.125rem] text-stone-500 font-mono
+        hover:bg-stone-800
+        hover:text-primary-200
+        hover:border-r-stone-600;
+
+      &.active {
+        @apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200;
+      }
     }
   }
 }

src/ui/components/VideoSettings/VideoSettings.vue

@@ -1,23 +1,26 @@
 <template>
-  <div class="flex flex-col" style="position: relative; width: 100%;">
+  <div class="flex flex-col w-full h-full">
+
     <!-- 'Change UI' options is a tiny bit in upper right corner. -->
     <h3>Crop</h3>
-    <div class="w-full grid grid-cols-4 gap-2 pt-2">
+    <div class="button-container">
       <ShortcutButton
         v-for="(command, index) of settings?.active.commands.crop"
         :key="index"
         :label="command.label"
         :shortcut="getKeyboardShortcutLabel(command)"
+        @click="execAction(command)"
       ></ShortcutButton>
     </div>
 
     <h3>Zoom</h3>
-    <div class="w-full grid grid-cols-4 gap-2 pt-2">
+    <div class="button-container">
       <ShortcutButton
         v-for="(command, index) of settings?.active.commands.zoom"
         :key="index"
         :label="command.label"
         :shortcut="getKeyboardShortcutLabel(command)"
+        @click="execAction(command)"
       ></ShortcutButton>
     </div>
     <div class="text-white font-mono text-semibold mt-4 mb-1">Free-form zoom</div>
@@ -87,12 +90,13 @@
     </div>
 
     <h3>Stretch</h3>
-    <div class="w-full grid grid-cols-4 gap-2 pt-2">
+    <div class="button-container">
       <ShortcutButton
         v-for="(command, index) of settings?.active.commands.stretch"
         :key="index"
         :label="command.label"
         :shortcut="getKeyboardShortcutLabel(command)"
+        @click="execAction(command)"
       ></ShortcutButton>
     </div>
 
@@ -225,6 +229,12 @@ export default defineComponent({
 <style lang="postcss" scoped>
 @import '../../../main.css';
 
+.button-container {
+  @apply w-full pt-2
+    grid grid-cols-[repeat(auto-fill,minmax(9em,1fr))]
+    gap-[0.5em];
+}
+
 .xy-lock-bar-break {
   @apply relative;
 

src/ui/components/VideoSettings/components/ShortcutButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="flex flex-col justify-center items-center" :class="classList">
+  <button class="flex flex-col min-h-[3rem] justify-center items-center" :class="classList">
     <div class="flex justify-self-center">
       {{label}}
     </div>

src/ui/components/common/components/SupportLevelIndicator.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    v-if="computedSiteSupportLevel === 'official'"
+    class="site-support site-support-level official"
+    :style="supportLevelStyle"
+  >
+    <mdicon name="check-decagram" />
+    <div v-if="!small">Verified</div>
+    <div class="tooltip" :style="tooltipStyle">
+      <template v-if="small">Verified&nbsp;—&nbsp;</template>
+      The extension is being tested and should work on this site.
+    </div>
+  </div>
+  <div v-if="computedSiteSupportLevel === 'community'" class="site-support site-support-level community" :style="supportLevelStyle">
+    <mdicon name="account-group" />
+    <div v-if="!small">Community</div>
+    <div class="tooltip" :style="tooltipStyle">
+      <template v-if="small">Community&nbsp;—&nbsp;</template>
+      People say extension works on this site (or have provided help getting the extension to work if it didn't).<br/><br/>
+      Tamius (the dev) does not test the extension on this site, probably because it requires a subscription or
+      is geoblocked.
+    </div>
+  </div>
+  <div v-if="computedSiteSupportLevel === 'no-support' || computedSiteSupportLevel === 'unknown'" class="site-support site-support-level no-support" :style="supportLevelStyle">
+    <mdicon name="help-circle-outline" />
+    <div v-if="!small">Untested</div>
+    <div class="tooltip" :style="tooltipStyle">
+      <template v-if="small">Untested&nbsp;—&nbsp;</template>
+      Extension will try to fix things, but no promises; for you are exploring the uncharted lands.<br/><br/>
+      Tamius (the dev) does not test the extension on this site for various reasons
+      (unaware, not using the site, language barrier, geoblocking, paid services Tam doesn't use).
+    </div>
+  </div>
+  <div v-if="computedSiteSupportLevel === 'user-added' || computedSiteSupportLevel === 'user-defined'" class="site-support site-support-level user-added" :style="supportLevelStyle">
+    <mdicon name="account" />
+    <div v-if="!small">Modified by you</div>
+    <div class="tooltip" :style="tooltipStyle">
+      <template v-if="small">Modified by you&nbsp;—&nbsp;</template>
+      You are on your own. You have manually changed settings for this site. The extension is doing what you told it to do.
+    </div>
+  </div>
+  <div v-if="computedSiteSupportLevel === 'officially-disabled'" class="site-support site-support-level officially-disabled" :style="supportLevelStyle">
+    <mdicon name="close-circle" />
+    <div v-if="!small">Blacklisted</div>
+    <div class="tooltip" :style="tooltipStyle">
+      <template v-if="small">Blacklisted&nbsp;—&nbsp;</template>
+      Extension is known to not work with this site.
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    siteSupportLevel: String,
+    siteSettings: Object,
+    small: Boolean,
+    supportLevelStyle: String,
+    tooltipStyle: String,
+  },
+  computed: {
+    computedSiteSupportLevel() {
+      return this.siteSupportLevel ?? this.siteSettings ? this.siteSettings.data.type || 'no-support' : 'waiting';
+    }
+  }
+
+});
+</script>
+
+<style lang="postcss" scoped>
+@import '../../../../main.css'; /** postcss processor doesn't support aliases */
+
+.site-support {
+  @apply inline-flex flex-row items-center gap-1 rounded-[0.5rem] relative;
+
+  .tooltip {
+    padding: 1rem;
+    display: none;
+    position: absolute;
+    bottom: 0;
+    transform: translateY(110%);
+    width: 42em;
+
+    background-color: rgba(0,0,0,0.90);
+    color: #ccc;
+    z-index: 99999 !important;
+
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+  }
+  &:hover {
+    .tooltip {
+      display: block;
+    }
+  }
+}
+
+
+</style>

src/ui/pages/popup/popup.js

@@ -1,30 +0,0 @@
-import EventBus from '../../../ext/lib/EventBus';
-import { ComponentLogger } from '../../../ext/lib/logging/ComponentLogger';
-import { LogAggregator } from '../../../ext/lib/logging/LogAggregator';
-import Settings from '../../../ext/lib/settings/Settings';
-
-const loadedTabs = [
-  'videoSettings',
-  'extensionSettings',
-  'changelog',
-  'about',
-];
-
-async function load() {
-  const _uw_data = {
-    eventBus: new EventBus(),
-    settings: {},
-    settingsInitialized: false,
-    logAggregator: undefined,
-    logger: undefined,
-    site: undefined,
-    siteSettings: undefined,
-    comms: undefined,
-  };
-
-  _uw_data.logAggregator = new LogAggregator('🔵ext-popup🔵');
-  _uw_data.logger = new ComponentLogger(_uw_data.logAggregator, 'Popup');
-  _uw_data.settings = new Settings({logAggregator: _uw_data.logAggregator});
-
-  _uw_data.
-}

src/ui/pages/settings/App.vue

@@ -1,9 +1,23 @@
 <template>
-  <div class="w-full h-[100dvh] overflow-hidden flex flex-row justify-center items-center py-4 px-16">
+  <div class="
+    w-full h-[100dvh] overflow-hidden
+    p-1 popup-lg:py-2 popup-lg:px-2 window:py-4 window:px-8
+    flex flex-row justify-center items-center
+  ">
 
     <!-- page content -->
     <div class="w-full max-w-[1920px] h-[100dvh] overflow-hidden flex flex-col">
-      <h1 class="text-[3em] grow-0 shrink-0">Ultrawidify settings</h1>
+      <PopupHead
+        v-if="role === 'popup' && settings && siteSettings && eventBus"
+        :settings="settings"
+        :siteSettings="siteSettings"
+        :site="site"
+        :eventBus="eventBus"
+      >
+      </PopupHead>
+      <div v-else>
+        <h1 class="text-[3em] grow-0 shrink-0">Ultrawidify settings</h1>
+      </div>
 
       <div v-if="!settingsInitialized" class="flex flex-row w-full justify-center items-center">
         Loading settings...
@@ -17,7 +31,7 @@
         :eventBus="eventBus"
         :logger="logger"
         :inPlayer="false"
-        :site="null"
+        :site="site"
       >
       </SettingsWindowContent>
     </div>
@@ -26,23 +40,31 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import BrowserDetect from '../../../ext/conf/BrowserDetect';
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
 import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
 import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
 import Settings from '@src/ext/lib/settings/Settings';
+import { SiteSettings } from '@src/ext/lib/settings/SiteSettings';
 import SettingsWindowContent from '@components/SettingsWindowContent.vue';
 
 import EventBus from '@src/ext/lib/EventBus';
 import CommsClient, { CommsOrigin } from '@src/ext/lib/comms/CommsClient';
 import {ChromeShittinessMitigations as CSM} from '@src/common/js/ChromeShittinessMitigations';
 
+import PopupHead from '@components/PopupHead/PopupHead.vue';
+
 export default defineComponent({
   components: {
-    SettingsWindowContent
+    SettingsWindowContent,
+    PopupHead,
   },
   data () {
     return {
+      BrowserDetect,
+      site: undefined,
       settings: undefined as Settings | undefined,
+      siteSettings: undefined as SiteSettings | undefined,
+      eventBus: undefined as EventBus | undefined,
       logger: undefined as ComponentLogger | undefined,
       logAggregator: undefined as LogAggregator | undefined,
       settingsInitialized: false,
@@ -121,6 +143,18 @@ export default defineComponent({
               this.site = config.site;
               // this.selectedSite = this.selectedSite || config.site.host;
               this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
+
+              console.log('set-site received:', this.site, this.siteSettings, 'current path:', this.initialPath);
+              if (!this.initialPath || this.initialPath.length < 1) {
+                if (this.siteSettings.data.enable) {
+                  this.initialPath = ['video-settings'];
+                } else {
+                  this.initialPath = ['site-extension-settings'];
+                }
+              }
+              console.log('New path:', this.initialPath);
+
+
               this.eventBus.setupPopupTunnelWorkaround({
                 origin: CommsOrigin.Popup,
                 comms: {
@@ -206,7 +240,67 @@ export default defineComponent({
           },
         }
       )
-    }
+    },
+
+    //#region EXTENSION POPUP
+
+    showInPlayerUi() {
+      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
+    },
+    async sleep(t) {
+      return new Promise<void>( (resolve,reject) => {
+        setTimeout(() => resolve(), t);
+      });
+    },
+    toObject(obj) {
+      return JSON.parse(JSON.stringify(obj));
+    },
+    requestSite() {
+      try {
+        this.logger.log('info','popup', '[popup::getSite] Requesting current site ...')
+        // CSM.port.postMessage({command: 'get-current-site'});
+        this.eventBus.send(
+          'get-current-site',
+          {},
+          {
+            comms: {forwardTo: 'active'}
+          }
+        );
+      } catch (e) {
+        this.logger.log('error','popup','[popup::getSite] sending get-current-site failed for some reason. Reason:', e);
+      }
+    },
+    getRandomColor() {
+      return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
+    },
+    selectTab(tab) {
+      this.selectedTab = tab;
+    },
+    isDefaultFrame(frameId) {
+      return frameId === '__playing' || frameId === '__all';
+    },
+    loadHostnames() {
+      this.activeHosts = this.site.hostnames;
+    },
+    loadFrames() {
+      this.activeFrames = [{
+        host: this.site.host,
+        isIFrame: false,  // not used tho. Maybe one day
+      }];
+
+      for (const frame in this.site.frames) {
+        if (!this.activeFrames.find(x => x.host === this.site.frames[frame].host)) {
+          this.activeFrames.push({
+            id: `${this.site.id}-${frame}`,
+            label: this.site.frames[frame].host,
+            host: this.site.frames[frame].host,
+            ...this.site.frames[frame],
+            ...this.settings.active.sites[this.site.frames[frame].host]
+          })
+        };
+      }
+    },
+    //#endregion
   }
 });
 </script>

src/ui/pages/settings/index-dark.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en"; style="position: relative; width: 799px; min-width: 320px; height: 600px; overflow: hidden;">
+<head>
+  <meta charset="UTF-8">
+  <meta name="color-scheme" content="dark">
+  <title>Ultrawidify - settings</title>
+  <!-- <link rel="stylesheet" href="csui.css"> -->
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body class="uw-ultrawidify-container-root" style="overflow: hidden">
+  <div id="app">
+    <!-- <div style="width: 799px; height: 599px">test</div> -->
+  </div>
+  <script src="settings.js"></script>
+</body>
+</html>

src/ui/pages/settings/index-light.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en"; style="position: relative; width: 799px; min-width: 320px; height: 600px; overflow: hidden;">
+<head>
+  <meta charset="UTF-8">
+  <meta name="color-scheme" content="light">
+  <title>Ultrawidify - settings</title>
+  <!-- <link rel="stylesheet" href="csui.css"> -->
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body class="uw-ultrawidify-container-root" style="overflow: hidden">
+  <div id="app">
+    <!-- <div style="width: 799px; height: 599px">test</div> -->
+  </div>
+  <script src="settings.js"></script>
+</body>
+</html>

src/ui/pages/settings/index-none.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en"; style="position: relative; width: 799px; min-width: 320px; height: 600px; overflow: hidden;">
+<head>
+  <meta charset="UTF-8">
+  <title>Ultrawidify - settings</title>
+  <!-- <link rel="stylesheet" href="csui.css"> -->
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body class="uw-ultrawidify-container-root" style="overflow: hidden">
+  <div id="app">
+    <!-- <div style="width: 799px; height: 599px">test</div> -->
+  </div>
+  <script src="settings.js"></script>
+</body>
+</html>

src/ui/pages/settings/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"; style="position: relative">
+<html lang="en"; style="position: relative; width: 799px; min-width: 320px; height: 600px; overflow: hidden;">
 <head>
   <meta charset="UTF-8">
   <meta name="color-scheme" content="light dark">
@@ -9,8 +9,10 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body class="uw-ultrawidify-container-root">
+<body class="uw-ultrawidify-container-root" style="overflow: hidden">
-  <div id="app"></div>
+  <div id="app">
+    <!-- <div style="width: 799px; height: 599px">test</div> -->
+  </div>
   <script src="settings.js"></script>
 </body>
 </html>

tailwind.config.json

@@ -4,6 +4,11 @@
   ],
   "theme": {
     "extend": {
+      "screens": {
+        "popup-sm": {"max": "639px"},
+        "popup-lg": {"min": "640px", "max": "899px"},
+        "window": {"min": "900px"}
+      },
       "colors": {
         "primary": {
           "50": "#ffddbe",