Add basic confirm button.

src/csui/Popup.vue

@@ -13,30 +13,41 @@
         class="popup flex flex-col no-overflow"
         :class="{'popup-chrome': ! BrowserDetect?.firefox}"
     >
-      <div class="flex-row flex-nogrow flex-noshrink relative header"
+      <div class="flex flex-col w-full relative header"
       >
-        <div class="grow shrink">
-          <h1>
+        <div class="flex flex-row w-full" style="height: 42px">
+          <h1 class="flex-grow">
             <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
           </h1>
-          <div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row">
+          <button
+            class="settings-header-button"
+            style="align-self: stretch"
+            @click="showInPlayerUi()"
+          >
+            Show settings window
+          </button>
+        </div>
+
+        <div class="flex flex-row w-full">
+          <div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row flex-grow items-center">
             <div>site: {{site.host}}</div>
             <SupportLevelIndicator
               :siteSupportLevel="siteSupportLevel"
             >
             </SupportLevelIndicator>
           </div>
-        </div>
+
+          <!-- Version info -->
           <div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
-          Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
             <label>Version:</label> <br/>
-          {{ settings.getExtensionVersion() }}
+            {{ settings.getExtensionVersion() }} (non-stable)
           </div>
           <div v-else class="version-info">
             <label>Version:</label> <br/>
             {{ settings.getExtensionVersion() }}
           </div>
         </div>
+      </div>
 
 
       <!-- CONTAINER ROOT -->
@@ -152,10 +163,10 @@ export default {
       logger: undefined,
       site: undefined,
       siteSettings: undefined,
-      selectedTab: 'playerUiCtl',
+      selectedTab: 'videoSettings',
       tabs: [
         // see this for icons: https://pictogrammers.com/library/mdi/
-        {id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'},
+        // {id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'},
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
@@ -259,6 +270,9 @@ export default {
   },
 
   methods: {
+    showInPlayerUi() {
+      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
+    },
     async sleep(t) {
       return new Promise( (resolve,reject) => {
         setTimeout(() => resolve(), t);
@@ -365,12 +379,15 @@ export default {
 
 .header {
   background-color: rgb(90, 28, 13);
+  background-color: rgb(0,0,0);
   color: #fff;
   padding: 8px;
 
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  // display: flex;
+  // flex-direction: row;
+  // justify-content: space-between;
+
+  border-bottom: 1px dotted #fa6;
 
 
   h1 {
@@ -388,6 +405,21 @@ export default {
 
 }
 
+.settings-header-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding: 0.5rem 2rem;
+  text-transform: lowercase;
+  font-variant: small-caps;
+
+  background-color: #000;
+  border: 1px solid #fa68;
+
+  color: #eee;
+}
+
 .site-support-info {
   display: flex;
   flex-direction: row;

src/csui/res/css/flex.scss

@@ -27,6 +27,9 @@
   flex-shrink: 0;
 }
 
+.items-center {
+  align-items: center;
+}
 
 .flex-wrap {
   flex-wrap: wrap;

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -64,12 +64,12 @@
       <p>
         Pressing the button will reset settings to default without asking.
       </p>
-      <button
+      <ConfirmButton
         class="danger"
-        @click="resetSettings"
+        @onConfirmed="resetSettings"
       >
         Reset settings
-      </button>
+      </ConfirmButton>
     </div>
   </div>
 </template>
@@ -77,6 +77,7 @@
 <script>
 import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue';
 import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSettings.vue';
+import ConfirmButton from '@csui/src/components/ConfirmButton';
 
 export default {
   data() {
@@ -93,8 +94,9 @@ export default {
   ],
   components: {
     SiteExtensionSettings,
-    OtherSiteSettings
-},
+    OtherSiteSettings,
+    ConfirmButton
+  },
   computed: {
     globalSettings() {
       return this.settings?.getSiteSettings('@global') ?? null;

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue

@@ -357,6 +357,7 @@ export default {
      * Compiles our extension settings into more user-friendly options
      */
     compileSimpleSettings(component, getFor = 'site') {
+      console.log('compiling simple settings!', component, getFor);
       let settingsData;
       switch (getFor) {
         case 'site':
@@ -370,6 +371,8 @@ export default {
           break;
       }
 
+      console.log('getting data from:', settingsData);
+
       try {
         if (
           (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
@@ -383,6 +386,14 @@ export default {
           && settingsData?.[component]?.theater    === ExtensionMode.Default
           && settingsData?.[component]?.fullscreen === ExtensionMode.Default
         ) {
+          console.log(
+            component, 'is set to default because:\n'
+            `\nsettingsData[${component}].normal: ${settingsData?.[component]?.normal} || component is enableUI?`, component,
+            `\nsettingsData[${component}].theater: ${settingsData?.[component]?.normal}`,
+            `\nsettingsData[${component}].fullscreen: ${settingsData?.[component]?.normal}`,
+
+            `\n\n(expected values:`, ExtensionMode.Default
+          )
           return 'default';
         }
         if (

src/csui/src/components/ConfirmButton.vue

@@ -0,0 +1,83 @@
+<template>
+  <div v-if="popupVisible" class="popup">
+    <div class="popup-window">
+      <div
+        class="header"
+        :class="{
+          'danger': dialogType === 'danger',
+          'warning': dialogType === 'warning',
+          'info': dialogType === 'info',
+          'normal': dialogType === 'normal'
+        }"
+      >
+        {{ dialogText || 'Confirm action' }}
+      </div>
+      <div class="body">
+        {{ dialogText || 'Are you sure you want to do that?' }}
+      </div>
+      <div class="footer">
+        <button
+          class="button confirm"
+          :class="{
+            'danger': dialogType === 'danger',
+            'warning': dialogType === 'warning',
+            'info': dialogType === 'info',
+            'normal': dialogType === 'normal'
+          }"
+          @click="confirmAction"
+        >
+          {{ confirmText || 'Confirm' }}
+        </button>
+        <button @click="popupVisible = false">{{ cancelText  || 'Cancel' }}</button>
+      </div>
+    </div>
+  </div>
+  <button @click="popupVisible = true">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      popupVisible: false,
+    }
+  },
+  props: [
+    'dialogTitle',
+    'dialogText',
+    'confirmText',
+    'cancelText',
+    'dialogType'
+  ],
+  methods: {
+    confirmAction() {
+      this.$emit('onConfirmed');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: saturate(50%) backdrop-blur(1rem);
+  z-index: 99999;
+
+  .header {
+    font-size: 1.33rem;
+    color: #fff;
+    background-color: #000;
+  }
+  .body {
+    min-height: 5rem;
+  }
+}
+</style>