Merge branch 'master' into stable

CHANGELOG.md

@@ -13,7 +13,13 @@ QoL improvements for me:
 
 * logging: allow to enable logging at will and export said logs to a file
 
-### v4.4.4 (current)
+### v4.4.5 (current)
+
+* Extension no longer requires `allTabs` and `webNavigation` permissions
+* Some CSS on the debugger popup was not scoped, causing issues with some sites.
+* Fix some additional issues with video alignment when changing video on autoplay
+
+### v4.4.4
 
 * Tab detection in extension popup has been made more accurate
 * QoL: Added user-accessible logger (to make fixing sites I can't access a bit easier)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ultravidify",
-  "version": "4.4.4",
+  "version": "4.4.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultravidify",
-  "version": "4.4.4",
+  "version": "4.4.5",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {

src/common/components/JsonExplorer.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="root">
+    <template v-for="key in json"
+    >
+      <div class="element" :key="key">
+        <span class="json-key">"{{key}}"</span>:
+          <template v-if="Array.isArray(json[key])">
+            [<br/>
+              <div v-for="index of json[key]"
+                   class="json-table-row"
+                   :key="index"
+              >
+              
+              </div>
+            ]
+          </template>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: "json-explorer",
+  props: {
+    json: Object
+  }
+}
+</script>

src/csui/LoggerUi.vue

@@ -235,12 +235,13 @@ export default {
 }
 </script>
 
+<style scoped src="../res/css/flex.scss"></style> 
+
 <style lang="scss" scoped>
 @import '../res/css/colors.scss';
 @import '../res/css/font/overpass.css';
 @import '../res/css/font/overpass-mono.css';
 @import '../res/css/common.scss';
-@import '../res/css/flex.css';
 
 
 .root-window {

src/ext/lib/Logger.js

@@ -10,6 +10,7 @@ class Logger {
     this.isBackgroundScript = true;
 
     this.vuexStore = options?.vuexStore;
+    this.uwInstance = options?.uwInstance;
   }
 
   static saveConfig(conf) {
@@ -100,7 +101,7 @@ class Logger {
     br.storage.onChanged.addListener( (changes, area) => {
       if (process.env.CHANNEL === 'dev') {
         if (!changes.uwLogger) {
-          console.info('[Logger::<storage/on change> No new logger settings!');
+          // console.info('[Logger::<storage/on change> No new logger settings!');
         }
         if (changes['uwLogger'] && changes['uwLogger'].newValue) {
           console.log("[Logger::<storage/on change>] Logger have been changed outside of here. Updating active settings. Changes:", changes, "storage area:", area);
@@ -120,6 +121,10 @@ class Logger {
     });
   }
 
+  setVuexStore(store) {
+    this.vuexStore = store;
+  }
+  
   clear() {
     this.log = [];
     this.startTime = performance.now();
@@ -295,6 +300,10 @@ class Logger {
     return false;
   }
 
+  isLoggingAllowed() {
+    return this.conf.allowLogging;
+  }
+
   isLoggingToFile() {
     return this.conf.allowLogging && this.conf.fileOptions?.enabled;
   }
@@ -470,8 +479,13 @@ class Logger {
     }
 
     if (!this.vuexStore) {
-      console.error("[info] No vue store. Log will not be exported.");
+      console.error("[info] No vue store.");
-      return;
+      if (!this.uwInstance) {
+        console.error('[info] no vue instance either. Not logging.');
+        return;
+      }
+      console.info("[info] Initializing vue and vuex instance ...");
+      this.uwInstance.initVue();
     }
 
     console.info('[info] vuex store present. Parsing logs.');

src/ext/lib/Settings.js

@@ -52,14 +52,15 @@ class Settings {
     }
   }
 
-  getExtensionVersion() {
+  static getExtensionVersion() {
     if (currentBrowser.firefox) {
       return browser.runtime.getManifest().version;
     } else if (currentBrowser.chrome) {
       return chrome.runtime.getManifest().version;
-    } else if (currentBrowser.edge) {
+    } 
-      return browser.runtime.getManifest().version;
+  }
-    }
+  getExtensionVersion() {
+    return Settings.getExtensionVersion(); 
   }
 
   compareExtensionVersions(a, b) {
@@ -290,16 +291,16 @@ class Settings {
         sites[site].mode = ExtensionMode.Default;
       }
       if (sites[site].autoar === undefined) {
-        sites[site].mode = ExtensionMode.Default;
+        sites[site].autoar = ExtensionMode.Default;
       }
       if (sites[site].stretch === undefined) {
-        sites[site].mode = Stretch.Default;
+        sites[site].stretch = Stretch.Default;
       }
       if (sites[site].videoAlignment === undefined) {
-        sites[site].mode = VideoAlignment.Default;
+        sites[site].videoAlignment = VideoAlignment.Default;
       }
       if (sites[site].keyboardShortcutsEnabled === undefined) {
-        sites[site].mode = ExtensionMode.Default;
+        sites[site].keyboardShortcutsEnabled = ExtensionMode.Default;
       }
     }
   }

src/ext/lib/ar-detect/ArDetector.js

@@ -391,7 +391,11 @@ class ArDetector {
   //#endregion
 
   getDefaultAr() {
-    return this.video.videoWidth / this.video.videoHeight;
+    const ratio = this.video.videoWidth / this.video.videoHeight;
+    if (isNaN(ratio)) {
+      return undefined;
+    }
+    return ratio;
   }
 
   calculateArFromEdges(edges) {

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

@@ -121,6 +121,19 @@ class Resizer {
 
 
   updateAr(ar) {
+    if (!ar) {
+      return;
+    }
+
+    // Some options require a bit more testing re: whether they make sense
+    // if they don't, we refuse to update aspect ratio until they do
+    if (ar.type === AspectRatio.Automatic || ar.type === AspectRatio.Fixed) {
+      if (!ar.ratio || isNaN(ar.ratio)) {
+        return;
+      }
+    }
+
+    // Only update aspect ratio if there's a difference between the old and the new state
     if (!this.lastAr || ar.type !== this.lastAr.type || ar.ratio !== this.lastAr.ratio) {
       this.setAr(ar);
     }

src/ext/uw-bg.js

@@ -56,8 +56,6 @@ class UWServer {
     } else if (BrowserDetect.chrome) {
       chrome.tabs.onActivated.addListener(function(m) {ths.onTabSwitched(m)});
     }
-
-    this.scheduleGc();
   }
 
   async _promisifyTabsGet(browserObj, tabId){
@@ -97,23 +95,6 @@ class UWServer {
     }
   }
 
-  scheduleGc(timeout) {
-    if (this._gctimeout) {
-      return;
-    }
-    if (!timeout) {
-      timeout = 0;
-    }
-
-    const ths = this;
-    setTimeout( () => {
-      clearTimeout(ths._gctimeout);
-      ths.gcFrames();
-
-      ths._gctimeoutgcTimeout = ths.scheduleGc(5000);
-    }, timeout);
-  }
-
   extractHostname(url){
     var hostname;
     
@@ -157,28 +138,6 @@ class UWServer {
     //TODO: change extension icon based on whether there's any videos on current page
   }
 
-  async gcFrames() {
-    // does "garbage collection" on frames
-
-    let frames;
-    
-    if (BrowserDetect.firefox) {
-      frames = await browser.webNavigation.getAllFrames({tabId: this.currentTabId});
-    } else if (BrowserDetect.chrome) {
-      frames = await new Promise( (resolve, reject) => {
-        chrome.webNavigation.getAllFrames({tabId: this.currentTabId}, (data) => {resolve(data); return true});
-      });
-    }
-
-    if (this.videoTabs[this.currentTabId]) {
-      for (let key in this.videoTabs[this.currentTabId].frames) {
-        if (! frames.find(x => x.frameId == key)) {
-          delete this.videoTabs[this.currentTabId].frames[key];
-        }
-      }
-    }
-  }
-
   registerVideo(sender) {
     this.logger.log('info', 'comms', '[UWServer::registerVideo] Registering video.\nsender:', sender);
 

src/ext/uw.js

@@ -13,7 +13,6 @@ import Vuex from 'vuex';
 import VuexWebExtensions from 'vuex-webextensions';
 
 global.browser = require('webextension-polyfill');
-
 import LoggerUi from '../csui/LoggerUi';
 
 if(Debug.debug){
@@ -42,6 +41,8 @@ class UW {
     this.actionHandler = undefined;
     this.logger = undefined;
     this.vuexStore = {};
+    this.uiInitiated = false;
+    this.vueInitiated = false;
   }
 
   reloadSettings() {
@@ -88,9 +89,16 @@ class UW {
             'handleMouseMove': false
           }
         };
-        this.logger = new Logger({vuexStore: this.vuexStore});
+        this.logger = new Logger();
         await this.logger.init(loggingOptions);
 
+        if (this.logger.isLoggingAllowed()) {
+          console.info("[uw::init] Logging is allowed! Initalizing vue and UI!");
+          this.initVue();
+          this.initUi();
+          this.logger.setVuexStore(this.vuexStore);
+        }
+
         // show popup if logging to file is enabled
         if (this.logger.isLoggingToFile()) {
           console.info('[uw::init] Logging to file is enabled. Will show popup!');
@@ -215,7 +223,6 @@ class UW {
     rootDiv.setAttribute("id", uwid);
 
     document.body.appendChild(rootDiv);
-
    
     new Vue({
       el: `#${uwid}`,
@@ -230,14 +237,23 @@ class UW {
   }
 
   showLogger() {
+    if (! this.vueInitiated) {
+      this.initVue();
+    }
+    if (!this.uiInitiated) {
+      this.initUi();
+    }
+
     this.vuexStore.dispatch('uw-show-logger');
   }
   hideLogger() {
-    this.vuexStore.dispatch('uw-hide-logger');
+    // if either of these two is false, then we know that UI doesn't exist
+    // since UI doesn't exist, we don't need to dispatch uw-hide-logger
+    if (this.vueInitiated && this.uiInitiated) {
+      this.vuexStore.dispatch('uw-hide-logger');
+    }
   }
 }
 
 var main = new UW();
-main.initVue();
-main.initUi();
 main.init();

src/install/first-time/App.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="flex flex-column h100">
+    <div class="header flex-nogrow flex-noshrink">
+      Ultrawidify has been updated.
+    </div>
+    <div class="body flex-grow">
+      <h1>Where do you want to use Ultrawidify?</h1>
+      <div class="flex flex-row">
+        <div class=""
+             @click="() => {}"
+        >
+          All sites<br/>
+          <small>(Some sites are disabled by default. Requires access to all sites)</small>
+        </div>
+        <div>
+          Default sites and sites I explicitly allow
+        </div>
+        <div>
+          Only the sites I explicitly allow
+        </div>
+      </div>
+
+      <h1>Try to automatically detect aspect ratio?</h1>
+      <div class="flex flex-row">
+        <div class="">
+          Yes
+        </div>
+        <div>
+          Only on sites I allow
+        </div>
+        <div class="">
+          Never
+        </div>
+      </div>
+      
+      <h1>Do you want to see update notes when extension receives updates?</h1>
+      <p>Update notes will open a new tab, just like this one.</p>
+      <div class="flex flex-row">
+        <div class="">
+          Yes, even for the tiniest changes
+        </div>
+        <div class="">
+          Yes, but only for the big/important ones
+        </div>
+        <div class="">
+          No, never.
+        </div>
+      </div>
+    </div>
+    <div class="footer flex-nogrow flex-noshrink">
+    </div>
+  </div>
+</template>
+
+<script>
+import Debug from '../../ext/conf/Debug';
+import BrowserDetect from '../../ext/conf/BrowserDetect';
+import Logger from '../../ext/lib/Logger';
+
+export default {
+  data () {
+    return {
+      selectedTab: 'video',
+      selectedFrame: '__all',
+      selectedSite: '',
+      activeFrames: [],
+      activeSites: [],
+      port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
+      comms: new Comms(),
+      frameStore: {},
+      frameStoreCount: 0,
+      performance: {},
+      site: null,
+      currentZoom: 1,
+      execAction: new ExecAction(),
+      settings: {},
+      settingsInitialized: false,
+      logger: {},
+      siteTabDisabled: false,
+      videoTabDisabled: false,
+      canShowVideoTab: {canShow: true, warning: true},
+      showWhatsNew: false,
+    }
+  },
+  async created() {
+    this.logger = new Logger();
+    await this.logger.init({
+        allowLogging: true,
+    });
+
+    this.settings = new Settings({updateCallback: () => this.updateConfig(), logger: this.logger});
+    await this.settings.init();
+    this.settingsInitialized = true;
+  },
+  components: {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style src="../../res/css/font/overpass.css"></style>
+<style src="../../res/css/font/overpass-mono.css"></style>
+<style src="../../res/css/flex.scss"></style>
+<style src="../../res/css/common.scss"></style>
+
+<style lang="scss" scoped>
+html, body {
+  width: 800px !important;
+  max-width: 800px !important;
+  padding: 0px;
+  margin: 0px;
+}
+
+#tablist {
+  min-width: 275px;
+}
+
+.header {
+  overflow: hidden;
+  background-color: #7f1416;
+  color: #fff;
+  margin: 0px;
+  margin-top: 0px;
+  padding-top: 8px;
+  padding-left: 15px;
+  padding-bottom: 1px;
+  font-size: 2.7em;
+}
+
+
+.menu-item-inline-desc{
+  font-size: 0.60em;
+  font-weight: 300;
+  font-variant: normal;
+}
+
+.menu-item {
+  flex-grow: 0;
+  padding-left: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-variant: small-caps;
+  border-left: transparent 5px solid;
+  cursor: pointer;
+  user-select: none;
+}
+
+.menu-item-darker {
+  color: #999;
+}
+
+.suboption {
+  display: block;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 20px;
+  min-height: 250px;
+}
+
+
+#no-videos-display {
+  height: 100%;
+  padding-top: 50px;
+/*       text-align: center; */
+}
+
+.tabitem-container {
+  padding-top: 0.5em;
+}
+
+.selected-tab {
+  background-color: initial;
+  border-left: #f18810 5px solid;
+}
+
+.tabitem {
+  font-variant: normal;
+  // font-size: 0.69em;
+  // margin-left: 16px;
+  border-left: transparent 3px solid;
+  padding-left: 12px;
+  margin-left: -10px;
+}
+
+.site-list {
+  max-height: 200px;
+}
+
+.tabitem-selected {
+  color: #fff !important;
+  background-color: initial;
+  border-left: #f0c089 3px solid !important;
+}
+.tabitem-selected::before {
+  padding-right: 8px;
+}
+
+.tabitem-disabled {
+  color: #cc3b0f !important;
+}
+
+.tabitem-iframe::after {
+  content: "</>";
+  padding-left: 0.33em;
+}
+
+.popup {
+  // max-width: 780px;
+  // width: 800px;
+  height: 600px;
+}
+</style>

src/install/first-time/first-time.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="popup.css">
+
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body style="width: 800px; height: 600px; overflow: hidden !important">
+  <div id="app">
+
+  </div>
+  <script src="first-time.js"></script>
+</body>
+</html>

src/install/first-time/first-time.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App'
+
+// global.browser = require('webextension-polyfill')
+// Vue.prototype.$browser = global.browser
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

src/install/updated/App.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="flex flex-column h100">
+    <div class="header flex-nogrow flex-noshrink">
+      Thank you for installing Ultrawidify.
+    </div>
+    <div class="body flex-grow">
+      <p>Before we're ready to go, there are three quick questions. You will be able to change these later.</p>
+      <h1>Where do you want to use Ultrawidify?</h1>
+      <div class="flex flex-row">
+        <div class=""
+             @click="() => {}"
+        >
+          All sites<br/>
+          <small>(Some sites are disabled by default. Requires access to all sites)</small>
+        </div>
+        <div>
+          Default sites and sites I explicitly allow
+        </div>
+        <div>
+          Only the sites I explicitly allow
+        </div>
+      </div>
+
+      <h1>Should Ultrawidify automatically detect aspect ratio where possible?</h1>
+      <div class="flex flex-row">
+        <div class="">
+          Yes
+        </div>
+        <div>
+          Only on sites I allow
+        </div>
+        <div class="">
+          Never
+        </div>
+      </div>
+      
+      <h1>Do you want to see update notes when extension receives updates?</h1>
+      <p>Update notes will open a new tab, just like this one.</p>
+      <div class="flex flex-row">
+        <div class="">
+          Yes, even for the tiniest changes
+        </div>
+        <div class="">
+          Yes, but only for the big/important ones
+        </div>
+        <div class="">
+          No, never.
+        </div>
+      </div>
+    </div>
+    <div class="footer flex-nogrow flex-noshrink">
+    </div>
+  </div>
+</template>
+
+<script>
+import Debug from '../../ext/conf/Debug';
+import BrowserDetect from '../../ext/conf/BrowserDetect';
+import Logger from '../../ext/lib/Logger';
+
+export default {
+  data () {
+    return {
+      selectedTab: 'video',
+      selectedFrame: '__all',
+      selectedSite: '',
+      activeFrames: [],
+      activeSites: [],
+      port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
+      comms: new Comms(),
+      frameStore: {},
+      frameStoreCount: 0,
+      performance: {},
+      site: null,
+      currentZoom: 1,
+      execAction: new ExecAction(),
+      settings: {},
+      settingsInitialized: false,
+      logger: {},
+      siteTabDisabled: false,
+      videoTabDisabled: false,
+      canShowVideoTab: {canShow: true, warning: true},
+      showWhatsNew: false,
+    }
+  },
+  async created() {
+    this.logger = new Logger();
+    await this.logger.init({
+        allowLogging: true,
+    });
+
+    this.settings = new Settings({updateCallback: () => this.updateConfig(), logger: this.logger});
+    await this.settings.init();
+    this.settingsInitialized = true;
+  },
+  components: {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style src="../../res/css/font/overpass.css"></style>
+<style src="../../res/css/font/overpass-mono.css"></style>
+<style src="../../res/css/flex.scss"></style>
+<style src="../../res/css/common.scss"></style>
+
+<style lang="scss" scoped>
+html, body {
+  width: 800px !important;
+  max-width: 800px !important;
+  padding: 0px;
+  margin: 0px;
+}
+
+#tablist {
+  min-width: 275px;
+}
+
+.header {
+  overflow: hidden;
+  background-color: #7f1416;
+  color: #fff;
+  margin: 0px;
+  margin-top: 0px;
+  padding-top: 8px;
+  padding-left: 15px;
+  padding-bottom: 1px;
+  font-size: 2.7em;
+}
+
+
+.menu-item-inline-desc{
+  font-size: 0.60em;
+  font-weight: 300;
+  font-variant: normal;
+}
+
+.menu-item {
+  flex-grow: 0;
+  padding-left: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-variant: small-caps;
+  border-left: transparent 5px solid;
+  cursor: pointer;
+  user-select: none;
+}
+
+.menu-item-darker {
+  color: #999;
+}
+
+.suboption {
+  display: block;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 20px;
+  min-height: 250px;
+}
+
+
+#no-videos-display {
+  height: 100%;
+  padding-top: 50px;
+/*       text-align: center; */
+}
+
+.tabitem-container {
+  padding-top: 0.5em;
+}
+
+.selected-tab {
+  background-color: initial;
+  border-left: #f18810 5px solid;
+}
+
+.tabitem {
+  font-variant: normal;
+  // font-size: 0.69em;
+  // margin-left: 16px;
+  border-left: transparent 3px solid;
+  padding-left: 12px;
+  margin-left: -10px;
+}
+
+.site-list {
+  max-height: 200px;
+}
+
+.tabitem-selected {
+  color: #fff !important;
+  background-color: initial;
+  border-left: #f0c089 3px solid !important;
+}
+.tabitem-selected::before {
+  padding-right: 8px;
+}
+
+.tabitem-disabled {
+  color: #cc3b0f !important;
+}
+
+.tabitem-iframe::after {
+  content: "</>";
+  padding-left: 0.33em;
+}
+
+.popup {
+  // max-width: 780px;
+  // width: 800px;
+  height: 600px;
+}
+</style>

src/install/updated/first-time.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="popup.css">
+
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body style="width: 800px; height: 600px; overflow: hidden !important">
+  <div id="app">
+
+  </div>
+  <script src="first-time.js"></script>
+</body>
+</html>

src/install/updated/first-time.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App'
+
+// global.browser = require('webextension-polyfill')
+// Vue.prototype.$browser = global.browser
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "4.4.4.2",
+  "version": "4.4.5",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
@@ -57,7 +57,9 @@
     "res/img/settings/about-bg.png"
   ],
   "permissions": [
-    "tabs", "storage",  "activeTab", "<all_urls>", "webNavigation"
+    "storage",
+    "activeTab",
+    "<all_urls>"
   ],
   "optional_permissions": [
     "downloads"

src/options/App.vue

@@ -216,7 +216,7 @@ export default {
 
 <style src="../res/css/font/overpass.css"></style>
 <style src="../res/css/font/overpass-mono.css"></style>
-<style src="../res/css/flex.css"></style>
+<style src="../res/css/flex.scss"></style>
 <style src="../res/css/common.scss"></style>
 <style src="./options.scss"></style>
 

src/options/about.vue

@@ -33,10 +33,12 @@
 
 <script>
 import BrowserDetect from '../ext/conf/BrowserDetect';
+import Settings from '../ext/lib/Settings';
+
 export default {
   data() {
     return {
-      addonVersion: browser.runtime.getManifest().version || chrome.runtime.getManifest().version,
+      addonVersion: Settings.getVersion(),
       mailtoLink: 'mailto:tamius.han@gmail.com',
       redditLink: '',
     }

src/popup/App.vue

@@ -471,7 +471,7 @@ export default {
 
 <style src="../res/css/font/overpass.css"></style>
 <style src="../res/css/font/overpass-mono.css"></style>
-<style src="../res/css/flex.css"></style>
+<style src="../res/css/flex.scss"></style>
 <style src="../res/css/common.scss"></style>
 
 <style lang="scss" scoped>

src/popup/panels/AboutPanel.vue

@@ -48,12 +48,6 @@ export default {
   data() {
     return {
       addonVersion: browser.runtime.getManifest().version || chrome.runtime.getManifest().version,
-      mailtoLink: 'mailto:tamius.han@gmail.com',
-      redditLink: '',
-    }
-  },
-  data() {
-    return {
       loggingEnabled: false,
       loggerSettings: '',
       loggerSettingsError: false,

src/popup/panels/WhatsNewPanel.vue

@@ -2,14 +2,11 @@
   <div>
     <h2>What's new</h2>
     <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
-    <p class="label">4.4.4<small>.2</small></p>
+    <p class="label">4.4.5</p>
     <ul>
-      <li>Tab detection in extension popup has been made more accurate</li>
+      <li>Extension no longer requires <code>allTabs</code> and <code>webNavigation</code> permissions</li>
-      <li>QoL: Added user-accessible logger (to make fixing sites I can't access a bit easier)</li>
+      <li>Some CSS on the logger popup was not scoped, causing display issues with some sites (<a href="https://github.com/tamius-han/ultrawidify/issues/92">#92</a>)</li>
-      <li>Changed links to reflect my github username change</li>
+      <li>Fix some additional issues with video alignment when changing videos on autoplay</li>
-      <li><b>[4.4.4.1]</b> There were multiple reports about popup being broken. This issue should be resolved.</li>
-      <li><b>[4.4.4.1]</b> Setting global/site defaults should no longer require page reloads.</li>
-      <li><b>[4.4.4.2]</b> Fix problem with video being offset while switching between full screen and non-fullscreen non-theater mode on Youtube</li>
     </ul>
   </div>
 </template>

src/res/css/common.scss

@@ -1,7 +1,7 @@
 @import "colors.scss";
 @import "/res/css/font/overpass.css";
 @import "/res/css/font/overpass-mono.css";
-@import "/res/css/flex.css";
+@import "flex.scss";
 // @import "form.scss";
 
 body {

webpack.config.js

@@ -15,6 +15,7 @@ const config = {
     'ext/uw-bg': './ext/uw-bg.js',
     'popup/popup': './popup/popup.js',
     'options/options': './options/options.js',
+    'install/first-time/first-time':'./install/first-time/first-time.js',
   },
   output: {
     path: __dirname + `/dist-${process.env.BROWSER == 'firefox' ? 'ff' : process.env.BROWSER}`,
@@ -78,6 +79,7 @@ const config = {
       { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
       { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
       { from: 'options/options.html', to: 'options/options.html', transform: transformHtml },
+      { from: 'install/first-time/first-time.html', to: 'install/first-time/first-time.html', transform: transformHtml},
       {
         from: 'manifest.json',
         to: 'manifest.json',
@@ -139,6 +141,9 @@ const config = {
       'process.env.CHANNEL': JSON.stringify(process.env.CHANNEL)
     })
   ],
+  optimization: {
+    minimize: false,
+  }
 };
 
 if (config.mode === 'production') {