Various fixes, trying to get application of user css styles to work again-

src/ext/UWServer.ts

@@ -104,22 +104,11 @@ export default class UWServer {
   //#region CSS managemeent
 
   async injectCss(css, sender) {
+    this.logger.info('injectCss', 'Trying to inject CSS into tab', sender.tab.id, ', frameId:', sender.frameId, 'css:\n', css)
     if (!css) {
       return;
     }
     try {
-      if (BrowserDetect.firefox) {
-        chrome.scripting.insertCSS({
-          target: {
-            tabId: sender.tab.id,
-            frameIds: [
-              sender.frameId
-            ]
-          },
-          css,
-          origin: "USER"
-        });
-      } else {
       await chrome.scripting.insertCSS({
         target: {
           tabId: sender.tab.id,
@@ -130,26 +119,12 @@ export default class UWServer {
         css,
         origin: "USER"
       });
-      }
     } catch (e) {
       this.logger.error('injectCss', 'Error while injecting css:', {error: e, css, sender});
     }
   }
   async removeCss(css, sender) {
     try {
-      if (BrowserDetect.firefox) {
-        chrome.scripting.removeCSS({
-          target: {
-            tabId: sender.tab.id,
-            frameIds: [
-              sender.frameId
-            ]
-          },
-          css,
-          origin: "USER"
-        });
-      } else {
-
       await chrome.scripting.removeCSS({
         target: {
           tabId: sender.tab.id,
@@ -160,7 +135,6 @@ export default class UWServer {
         css,
         origin: "USER"
       });
-      }
     } catch (e) {
       this.logger.error('injectCss', 'Error while removing css:', {error: e, css, sender});
     }

src/ext/lib/aard/Aard.ts

@@ -263,7 +263,7 @@ export class Aard {
       // console.log('--- video data: ---\n', this.videoData);
       return;
     }
-    if (this.siteSettings.data.enableAard <= this.videoData.player.environment) {
+    if (this.siteSettings.canRunAard(this.videoData.player.environment)) {
       this.start();
     } else {
       this.stop();

src/ext/lib/aard/AardLegacy.ts

@@ -433,7 +433,7 @@ export class AardLegacy {
       // console.log('--- video data: ---\n', this.videoData);
       return;
     }
-    if (this.videoData.player.environment <= this.siteSettings.data.enableAard) {
+    if (this.siteSettings.canRunAard(this.videoData.player.environment)) {
       this.start();
     } else {
       this.stop();

src/ext/lib/settings/SiteSettings.ts

@@ -299,6 +299,20 @@ export class SiteSettings {
   }
   //#endregion
 
+  canRunExtension(environment: ExtensionEnvironment) {
+    return environment <= this.data.enable;
+  }
+  canRunAard(environment: ExtensionEnvironment) {
+    return environment <= this.data.enableAard;
+  }
+  canRunUI(environment: ExtensionEnvironment) {
+    return environment <= this.data.enableUI;
+  }
+  canRunKeyboard(environment: ExtensionEnvironment) {
+    return environment <= this.data.enableKeyboard;
+  }
+
+
   //#region get shit
   /**
    * Gets custom query selector for player or video, if configuration for it exists, is manually defined, and has querySelectors property.

src/ext/lib/uwui/UI.js

@@ -340,7 +340,7 @@ class UI {
       canShowUI: false,
     }
 
-    if (this.playerData?.environment && this.playerData?.environment <= this.siteSettings.data.enableUI) {
+    if (this.playerData?.environment && this.siteSettings.canRunUI(this.playerData?.environment)) {
       return result;
     }
 

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

@@ -128,6 +128,8 @@ class VideoData {
     this.pageInfo = pageInfo;
     this.videoStatusOk = false;
 
+    this.vdid = `${ (Math.random() * 421) % 420}`;
+
     this.userCssClassName = `uw-fuck-you-and-do-what-i-tell-you_${this.vdid}`;
 
     this.videoLoaded = false;
@@ -227,7 +229,6 @@ class VideoData {
   }
   //#endregion
 
-
   //#region lifecycle-ish
   /**
    * Sets up event listeners for this video
@@ -276,8 +277,8 @@ class VideoData {
     const defaultCrop = this.siteSettings.getDefaultOption('crop') as Ar;
     const defaultStretch = this.siteSettings.getDefaultOption('stretch') as Stretch;
 
-    this.resizer.setAr(defaultCrop);
     this.resizer.setStretchMode(defaultStretch);
+    this.resizer.setAr(defaultCrop);
   }
 
   /**
@@ -408,7 +409,7 @@ class VideoData {
       this.logger.warn('onEnvironmentChanged', 'environment changed from:', this.currentEnvironment, 'to:', this.player.environment);
 
       this.currentEnvironment = this.player.environment;
-      if (this.player.environment <= this.siteSettings.data.enable) {
+      if (this.siteSettings.canRunExtension(this.player.environment)) {
         this.setRunLevel(RunLevel.Off);
       } else {
         this.restoreAr();
@@ -417,23 +418,35 @@ class VideoData {
   }
 
   setRunLevel(runLevel: RunLevel, options?: {fromPlayer?: boolean}) {
-    if (this.player && this.siteSettings.data.enable >= this.player.environment) {
+    this.logger.log('setRunLevel', '%cRUN LEVEL%c', 'background-color: #fff; color: #000;', '');
+
+    if (this.player && !this.siteSettings.canRunExtension(this.player.environment)) {
+      this.logger.log('setRunLevel', '%cExtension is not enabled for this environment.', 'color: #d00', {enable: this.siteSettings.data.enable, playerEnv: this.player.environment});
       runLevel = RunLevel.Off;
     }
 
     if (this.runLevel === runLevel) {
+      this.logger.log('setRunLevel', '%crun level did not change — doing nothing.', 'color: #999');
       return; // also no need to propagate to the player
     }
 
     // Run level decreases towards 'off'
     if (this.runLevel > runLevel) {
       if (runLevel < RunLevel.CustomCSSActive) {
+        this.logger.log(
+          `setRunLevel`,
+          '%cEXTENSION CANNOT RUN IN CURRENT CONDITION — REMOVING CSS CLASSES FROM VIDEO!', 'color: #ffa, background-color: #d00',
+          `%c  run level: ${runLevel}`, ''
+        );
+
         this.video.classList.remove(this.baseCssName);
         this.video.classList.remove(this.userCssClassName);
         this.enabled = false;
       }
     } else { // Run level increases towards 'everything runs'*
       if (runLevel >= RunLevel.CustomCSSActive) {
+        this.logger.log(`setRunLevel`, '%cAdding CSS classes to the video due to change in run level.', 'color: #77d5c1ff');
+
         this.video.classList.add(this.baseCssName);
         this.video.classList.add(this.userCssClassName);
 

src/ext/lib/video-transform/Resizer.ts

@@ -497,10 +497,12 @@ class Resizer {
   }
 
 
-  setStretchMode(stretch: {type: StretchType, ratio?: number}) {
+  setStretchMode(stretch: {type: StretchType, ratio?: number}, options?: {skipRestore?: boolean}) {
     this.stretcher.setStretchMode(stretch);
+    if (!options?.skipRestore) {
       this.restore();
     }
+  }
 
   panHandler(event, forcePan) {
     if (this.canPan || forcePan) {
@@ -940,7 +942,7 @@ class Resizer {
 
     for(let i in styleArray) {
       if(styleArray[i]) {
-        styleString += styleArray[i] + " !important; ";
+        styleString += styleArray[i];
       }
     }
 

src/ui/components/SettingsWindowContent.vue

@@ -101,7 +101,6 @@
             ></FrameSiteSettings>
           </template>
 
-
           <template v-if="settings && selectedTab === 'default-extension-settings'" >
             <h3>Default settings</h3>
             <SiteExtensionSettings
@@ -117,6 +116,14 @@
             :enableSettingsEditor="true"
           ></OtherSiteSettings>
 
+          <PlayerElementSettings
+            v-if="selectedTab === 'settings.player-element-settings'"
+            :settings="settings"
+            :eventBus="eventBus"
+          >
+
+          </PlayerElementSettings>
+
           <AutodetectionSettings
             v-if="selectedTab === 'autodetectionSettings'"
             :settings="settings"
@@ -126,7 +133,7 @@
           >
           </AutodetectionSettings>
           <UISettings
-            v-if="selectedTab === 'uiSettings'"
+            v-if="selectedTab === 'ui-settings'"
             :settings="settings"
             :siteSettings="siteSettings"
             :eventBus="eventBus"
@@ -182,6 +189,8 @@
 import { defineComponent } from 'vue';
 import VideoSettings from '@components/segments/VideoSettings/VideoSettings.vue';
 import OtherSiteSettings from '@components/segments/ExtensionSettings/Panels/OtherSiteSettings.vue';
+import PlayerElementSettings from '@components/segments/PlayerElementSelection/PlayerElementSettings.vue';
+import PlayerElementWindow from '@components/segments/PlayerElementSelection/PlayerElementWindow.vue';
 import AutodetectionSettings from '@components/segments/AutodetectionSettings/AutodetectionSettings.vue';
 import UISettings from '@components/segments/UISettings/UISettings.vue';
 import KeyboardShortcutSettings from '@components/segments/KeyboardShortcuts/KeyboardShortcutSettings.vue';
@@ -213,8 +222,10 @@ const AVAILABLE_TABS = {
   },
   'extensionSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
   'siteSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
+  'settings.player-element-settings': { id: 'settings.player-element-settings', label: 'Advanced video player options', icon: 'play-box-edit-outline' },
+  'window.player-element-settings': { id: 'window.player-element-settings', label: 'Advanced video player options', icon: 'play-box-edit-outline' },
   'autodetectionSettings': {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
-  'uiSettings': {id: 'uiSettings', label: 'UI settings', icon: 'movie-cog-outline' },
+  'ui-settings': {id: 'ui-settings', label: 'UI settings', icon: 'movie-cog-outline' },
   'keyboardShortcuts': {id: 'keyboardShortcuts', label: 'Keyboard shortcuts', icon: 'keyboard-outline' },
   'playerDetection': {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
 
@@ -230,14 +241,18 @@ const AVAILABLE_TABS = {
 const TAB_LOADOUT = {
   'settings': [
     'extensionSettings',
+    'settings.player-element-settings',
     'autodetectionSettings',
-    'uiSettings',
+    'ui-settings',
     'keyboardShortcuts',
     'changelog',
     'about',
     'import-export-settings',
     'debugging',
   ],
+  'ui': [
+    'window.player-element-settings'
+  ],
   'updated': [
     'updated',
     'changelog',
@@ -255,6 +270,8 @@ export default defineComponent({
   components: {
     VideoSettings,
     OtherSiteSettings,
+    PlayerElementSettings,
+    PlayerElementWindow,
     AutodetectionSettings,
     KeyboardShortcutSettings,
     UISettings,
@@ -276,16 +293,7 @@ export default defineComponent({
       },
 
       tabs: [
-        // // {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
+
-        // {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
-        // {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
-        // {id: 'uiSettings', label: 'UI settings', icon: 'movie-cog-outline' },
-        // {id: 'keyboardShortcuts', label: 'Keyboard shortcuts', icon: 'keyboard-outline' },
-        // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
-        // // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
-        // {id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
-        // {id: 'about', label: 'About', icon: 'information-outline'},
-        // {id: 'debugging', label: 'Debugging', icon: 'bug-outline', hidden: true},
       ],
       selectedTab: 'extensionSettings',
       BrowserDetect: BrowserDetect,

src/ui/components/segments/Debugging/Debugging.vue

@@ -32,6 +32,9 @@
         ></JsonEditor>
 
         <div class="flex flex-row justify-end mt-4 w-full">
+          <button class="bg-black button" @click="resetLoggerSettings()">
+            Load default
+          </button>
           <button class="bg-black button" @click="getLoggerSettings()">
             Revert
           </button>
@@ -281,6 +284,10 @@ export default defineComponent({
     loadDefaultConfig() {
       this.lastSettings = JSON.parse(JSON.stringify(BLANK_LOGGER_CONFIG));
     },
+    async resetLoggerSettings() {
+      await LogAggregator.resetConfig();
+      await this.getLoggerSettings();
+    },
     async getLoggerSettings() {
       this.lastSettings = await LogAggregator.getConfig() || BLANK_LOGGER_CONFIG;
     },

src/ui/components/segments/PlayerElementSelection/Panels/PlayerSelectorSnapshots.vue

@@ -0,0 +1,15 @@
+<template>
+
+
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Popup from '@components/common/Popup.vue';
+
+
+export default defineComponent({
+  components: {
+    Popup,
+  }
+})
+</script>

src/ui/components/segments/PlayerElementSelection/PlayerElementSettings.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex flex-col w-full">
+    <div class="flex flex-col">
+      <h2 class="text-[1.75em]">Video player options</h2>
+      <p class="text-stone-500">This page allows you to edit query selectors and custom CSS for video player on known websites.</p>
+      <p>List of sites:</p>
+    </div>
+    <div class="w-full max-w-[520px]">
+      <template v-for="(siteConf, domain) in settings.active.sites" :key="domain">
+        <div
+          v-if="domain !== '@global' && domain !== '@empty'"
+          class="
+            my-2 px-4 py-2
+            border border-stone-800
+          "
+        >
+          <div class="flex gap-2">
+            <div>{{domain}}</div>
+            <button @click="edit"></button>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+
+export default({
+  components: {
+
+  },
+  data() {
+    return {
+      tutorialVisible: false,
+      tutorialStep: 0
+    };
+  },
+  computed: {
+  },
+  mixins: [],
+  props: [
+    'settings',
+    'eventBus',
+  ],
+  created() {
+  },
+  mounted() {
+  },
+  destroyed() {
+    this.eventBus.unsubscribeAll(this);
+  },
+  methods: {
+    showTutorial() {
+      this.tutorialVisible = true;
+      this.tutorialStep = 0;
+    },
+    async setPlayer(index) {
+      // yup.
+      this.siteSettings.getDOMConfig('modified', 'original');
+      await this.siteSettings.setUpdateFlags(['PlayerData']);
+      await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
+      await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
+
+      // if user agrees with ultrawidify on what element player should be,
+      // we just unset our settings for this site
+      if (this.elementStack[index].heuristics?.autoMatch) {
+        await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
+        this.getPlayerTree();
+      } else {
+        // ensure settings exist:
+        await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
+        await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
+        await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
+        this.getPlayerTree();
+      }
+    },
+    edit() {
+
+    }
+  }
+})
+</script>
+<style lang="postcss" scoped>
+
+</style>

src/ui/components/segments/PlayerElementSelection/PlayerElementWindow.vue

@@ -93,6 +93,7 @@
   </div>
 </template>
 <script lang="ts">
+
 export default({
   components: {
 
@@ -215,213 +216,5 @@ export default({
 })
 </script>
 <style lang="scss" scoped>
-p {
-  font-size: 1rem;
-}
 
-.info-button {
-  color: $info-color;
-  border: 1px solid $info-color;
-  padding: 0.5rem 2rem;
-
-  &:hover {
-    background-color: rgba($info-color, 0.25);
-    color: #eee;
-    border: 1px solid $info-color !important;
-  }
-}
-
-.tutorial-step {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-
-  h3 {
-    color: #fa6;
-    text-transform: uppercase;
-    font-weight: bold !important;
-  }
-
-  .tutorial-list {
-    margin-top: 1rem;
-    margin-bottom: 3rem;
-
-    .card {
-      position: relative;
-
-      margin: 0.5rem;
-      padding: 1rem;
-
-      max-width: 32rem;
-
-      border: 1px solid #333;
-      border-radius: 0.5rem;
-      background-color: #121110dd;
-
-      display: flex;
-      flex-direction: column;
-
-      .card-text {
-        color: #aaa;
-        flex-grow: 1;
-      }
-
-      img {
-        width: 100%;
-      }
-
-      .icon {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        padding: 0rem;
-        transform: translate(-50%, 50%);
-
-        background-color: #000;
-        border-radius: 50%;
-
-        &.wrong {
-          color: #dc3c14;
-        }
-        &.correct {
-          color: rgb(102, 241, 218);
-        }
-      }
-    }
-  }
-
-  button {
-    color: #000 !important;
-    background-color: #fa6 !important;
-    border-radius: 0.5rem !important;
-
-    &:hover {
-      border: 1px solid #fa6 !important;
-      color: #fff !important;
-      background-color: transparent !important;
-    }
-  }
-}
-
-.element-tree {
-  .element-row {
-    margin: 0.5rem;
-
-    .status {
-      width: 6.9rem;
-      margin-right: 1rem;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      align-items: center;
-
-      .invalid {
-        color: #f00;
-      }
-    }
-    .element-data {
-      border: 1px solid rgba(255,255,255,0.5);
-      padding: 0.5rem 1rem;
-
-      max-width: 30rem;
-
-      display: flex;
-      flex-direction: column;
-
-      .tag {
-        text-transform: lowercase;
-        font-weight: bold;
-      }
-      .id {
-        font-style: italic;
-      }
-      .class-list {
-        font-style: italic;
-        opacity: 0.75;
-        font-size: 0.75rem;
-
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-
-        > div {
-          background-color: rgba(255,255,255,0.5);
-          border-radius: 0.25rem;
-          padding: 0.125rem 0.5rem;
-          margin: 0.125rem 0.25rem;
-        }
-      }
-      .dimensions {
-        color: #473c85;
-      }
-    }
-
-  }
-}
-
-.css-line {
-  display: inline-block;
-  flex-grow: 0;
-  flex-shrink: 0;
-  border: 1px solid rgba(255,255,255,0.5);
-  background: #000;
-  margin: 0.125rem 0.25rem;
-  padding: 0.125rem 0.25rem;
-
-  &.active, >span.active {
-    background: rgb(255, 174, 107);
-    color: #000;
-  }
-}
-
-.status-relative {
-  position: relative;
-
-  .element-symbol-legend {
-    position: absolute;
-    top: 100%;
-    left: 0;
-
-    z-index: 20000;
-
-    width: 32rem;
-
-    text-align: left;
-
-    background-color: #000;
-    padding: 1rem;
-    border: 1px solid rgba(255,255,255,0.5);
-  }
-}
-
-.tab-root {
-  width: 100%;
-}
-
-.demo-images {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  padding-top: 2rem;
-
-  .fig1, .fig2 {
-    margin-top: -2rem;
-    max-height: 18rem;
-    width: 100%;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .fig1 {
-    align-self: start;
-  }
-  .fig2 {
-    align-self: end;
-  }
-
-  img {
-    max-width: 32rem;
-  }
-}
 </style>

src/ui/pages/settings/App.vue

@@ -56,6 +56,7 @@ import CommsClient, { CommsOrigin } from '@src/ext/lib/comms/CommsClient';
 import {ChromeShittinessMitigations as CSM} from '@src/common/js/ChromeShittinessMitigations';
 
 import PopupHead from '@components/PopupHead.vue';
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
 
 export default defineComponent({
   components: {