From 7d8f3912bbe2ea27072bdd9e1a55080942d2ce22 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 6 Dec 2020 21:57:16 +0100
Subject: [PATCH] Fix extension popup in chrome

---
 src/common/components/Icon.vue  |  6 +++++-
 src/options/GeneralSettings.vue |  1 +
 src/popup/App.vue               | 33 ++++++++++++++++++++++++++++++---
 src/popup/panels/AboutPanel.vue |  3 ++-
 4 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/common/components/Icon.vue b/src/common/components/Icon.vue
index 081ef21..d88e20d 100644
--- a/src/common/components/Icon.vue
+++ b/src/common/components/Icon.vue
@@ -5,13 +5,17 @@
 </template>
 
 <script>
+import BrowserDetect from '../../ext/conf/BrowserDetect';
+
 export default {
   props: {
     icon: String,
   },
   data() {
+    // note — webextension-polyfill is not gonna save us here.
+    //        been there, tried that.
     return {
-      bootstrapIconsBasePath: (browser ?? chrome).runtime.getURL('/res/icons/bootstrap-icons.svg'),
+      bootstrapIconsBasePath: (BrowserDetect.firefox ? browser : chrome).runtime.getURL('/res/icons/bootstrap-icons.svg'),
       iconHref: '',
     };
   },
diff --git a/src/options/GeneralSettings.vue b/src/options/GeneralSettings.vue
index 2daee9f..3aa2242 100644
--- a/src/options/GeneralSettings.vue
+++ b/src/options/GeneralSettings.vue
@@ -213,6 +213,7 @@ export default {
       
       try {
         if (BrowserDetect.firefox) {
+          // reminder — webextension-polyfill doesn't seem to work in vue!
           await browser.permissions.request({permissions: ['downloads']});
           browser.downloads.download({saveAs: true, filename: 'ultrawidify-settings.json', url: fileUrl});
         } else if (BrowserDetect.chrome) {
diff --git a/src/popup/App.vue b/src/popup/App.vue
index 26ebcf3..885f084 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -1,6 +1,16 @@
 <template>
+  <!--
+    NOTE — the code that makes ultrawidify popup work in firefox regardless of whether the
+    extension is being displayed in a normal or a small/overflow popup breaks the popup
+    behaviour on Chrome (where the popup would never reach the full width of 800px)
+
+    Since I'm tired and the hour is getting late, we'll just add an extra CSS class for
+    non-firefox builds of this extension and be done with it. No need to complicate things
+    further than that.
+  -->
   <div v-if="settingsInitialized" 
        class="popup flex flex-column no-overflow"
+       :class="{'popup-chrome': ! BrowserDetect.firefox}"
   >
     <div class="flex-row flex-nogrow flex-noshrink relative"
          :class="{'header': !narrowPopup, 'header-small': narrowPopup}"
@@ -289,7 +299,8 @@ export default {
     AboutPanel,
     Donate,
     SiteDetailsPanel,
-    WhatsNewPanel, Icon
+    WhatsNewPanel,
+    Icon,
   },
   methods: {
     async sleep(t) {
@@ -660,11 +671,27 @@ html {
 }
 
 .popup {
-  // max-width: 780px;
-  // width: 800px;
   height: 600px;
 }
 
+/**
+  This was written at the top, but it's worth repeating.
+
+  NOTE — the code that makes ultrawidify popup work in firefox regardless of whether the
+  extension is being displayed in a normal or a small/overflow popup breaks the popup
+  behaviour on Chrome (where the popup would never reach the full width of 800px)
+
+  Since I'm tired and the hour is getting late, we'll just add an extra CSS class for
+  non-firefox builds of this extension and be done with it. No need to complicate things
+  further than that.
+
+  It also seems that Chrome doesn't like if we set the width of the popup all the way to 
+  800px (probably something something scrollbar), so let's just take away a few px.
+ */
+.popup-chrome {
+  width: 780px !important;
+}
+
 .relative {
   position: relative;
 }
diff --git a/src/popup/panels/AboutPanel.vue b/src/popup/panels/AboutPanel.vue
index 69801da..3a1a088 100644
--- a/src/popup/panels/AboutPanel.vue
+++ b/src/popup/panels/AboutPanel.vue
@@ -47,7 +47,8 @@ export default {
  },
   data() {
     return {
-      addonVersion: browser.runtime.getManifest().version || chrome.runtime.getManifest().version,
+      // reminder — webextension-polyfill doesn't seem to work in vue!
+      addonVersion: BrowserDetect.firefox ? browser.runtime.getManifest().version : chrome.runtime.getManifest().version,
       loggingEnabled: false,
       loggerSettings: '',
       loggerSettingsError: false,