switch bootstrap icons with mdijs

.vscode/settings.json

@@ -29,6 +29,7 @@
     "insta",
     "letterboxed",
     "manjaro",
+    "mdijs",
     "minification",
     "mitigations",
     "nogrow",
@@ -77,4 +78,4 @@
     "undisable",
     "vdid"
   ]
-}
+}

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@mdi/js": "^6.3.95",
     "@types/chrome": "0.0.129",
     "@types/core-js": "^2.5.3",
     "@types/es6-promise": "^3.3.0",
@@ -32,13 +33,12 @@
     "@vue/cli": "^4.5.9",
     "@vue/cli-plugin-typescript": "^4.5.11",
     "bootstrap": "^4.5.3",
-    "bootstrap-icons": "^1.1.0",
-    "bootstrap-icons-vue": "^0.3.0",
     "bootstrap-vue": "^2.20.1",
     "concurrently": "^5.2.0",
     "fs-extra": "^7.0.1",
     "json-cyclic": "0.0.3",
     "lodash": "^4.17.21",
+    "mdi-vue": "^3.0.8",
     "typescript": "^4.2.3",
     "vue": "^3.0.0-beta.1",
     "vuex": "^4.0.0-alpha.1",

src/csui/LoggerUi.vue

@@ -37,7 +37,7 @@
             Default config
           </div>
           <div v-if="!showTextMode" class="button" @click="showTextMode = true">
-            <Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ...
+            <!-- <Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ... -->
           </div>
           <div v-else class="button" @click="showTextMode = false">
             Back
@@ -57,8 +57,8 @@
             </div>
           </template>
           <template v-else>
-            <JsonObject label="logger-settings" 
+            <JsonObject label="logger-settings"
-                        :value="currentSettings" 
+                        :value="currentSettings"
                         :ignoreKeys="{'allowLogging': false}"
                         @change="updateSettingsUi"
             ></JsonObject>
@@ -172,12 +172,12 @@ import Logger, { baseLoggingOptions } from '../ext/lib/Logger';
 import Comms from '../ext/lib/comms/Comms';
 import IO from '../common/js/IO';
 import JsonObject from '../common/components/JsonEditor/JsonObject';
-import Icon from '../common/components/Icon';
+// import Icon from '../common/components/Icon';
 
 export default {
   components: {
     JsonObject,
-    Icon,
+    // Icon,
   },
   data() {
     return {
@@ -273,7 +273,7 @@ export default {
         this.lastSettings = val;
         this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
       } catch (e) {
-        
+
       }
     },
     saveLoggerSettings() {
@@ -319,7 +319,7 @@ export default {
 }
 </script>
 
-<style lang="scss" src="../res/css/flex.scss" scoped></style> 
+<style lang="scss" src="../res/css/flex.scss" scoped></style>
 
 <style lang="scss" scoped>
 @import '../res/css/colors.scss';

src/csui/NotificationUi.vue

@@ -14,30 +14,31 @@
           v-html="notificationText"
         >
         </div>
-        <div 
+        <div
           v-if="notificationActions"
           class="action-buttons flex flex-row"
         >
-          <div 
+          <div
             v-for="action of notificationActions"
             class="action-button"
             :key="action"
             @click="action.command"
           >
-            <Icon v-if="action.icon" :icon="action.icon"></Icon>{{action.label}}
+            <!-- <Icon v-if="action.icon" :icon="action.icon"></Icon> -->
+            {{action.label}}
           </div>
         </div>
-        <div 
+        <div
           v-if="hideActions"
           class="hide-actions"
         >
           Never show again:<wbr>&nbsp;
-          <template 
+          <template
             v-for="action of hideActions"
             :key="action"
           >
             <i @click="closeNotification">
-              <a 
+              <a
                 class="hide-action-button"
                 @click="action.command"
               >
@@ -52,11 +53,11 @@
         class="notification-icon action-button"
           @click="closeNotification()"
       >
-        <Icon
+        <!-- <Icon
           class="flex-nogrow flex-noshrink"
           icon="x"
         >
-        </Icon>
+        </Icon> -->
       </div>
     </div>
   </div>
@@ -64,11 +65,11 @@
 
 <script>
 import { mapState } from 'vuex';
-import Icon from '../common/components/Icon';
+// import Icon from '../common/components/Icon';
 
 export default {
   components: {
-    Icon,
+    // Icon,
   },
   data() {
     return {
@@ -88,7 +89,7 @@ export default {
   watch: {
     /**
      * Sets new notification config. Currently, we can only show one notification at a time.
-     * 
+     *
      * We expect a config object like this:
      * {
      *    timeout: number  — how long we'll be displaying the notification. If empty, 10s. -1: until user dismisses it
@@ -184,7 +185,7 @@ export default {
     padding-left: 0.5em;
     padding-right: 0.25em;
   }
-  
+
   .notification-icon {
     font-size: 3em;
     line-height: 0.5;
@@ -213,4 +214,4 @@ export default {
     cursor: pointer;
   }
 }
-</style>
+</style>

src/csui/PlayerUiComponent.vue

@@ -34,7 +34,7 @@
 <script>
 import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
 import { mapState } from 'vuex';
-import Icon from '../common/components/Icon';
+// import Icon from '../common/components/Icon';
 import ResizerDebugPanel from './PlayerUiPanels/ResizerDebugPanelComponent';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 import ExecAction from './ui-libs/ExecAction';
@@ -43,7 +43,7 @@ import Settings from '../ext/lib/Settings';
 
 export default {
   components: {
-    Icon,
+    // Icon,
     ResizerDebugPanel, VideoSettings
   },
   data() {

src/csui/PlayerUiPanels/ResizerDebugPanelComponent.vue

@@ -11,7 +11,9 @@
             <small>(Inner size)</small>
           </div>
           <div class="data">{{windowWidth}} x {{windowHeight}}</div>
-          <div class="button" @click="refreshWindowSize()"><Icon icon="arrow-clockwise"></Icon> Refresh</div>
+          <div class="button" @click="refreshWindowSize()">
+            <!-- <Icon icon="arrow-clockwise"></Icon> -->
+            Refresh</div>
         </div>
         <div class="data-item">
           <div class="data-title">Player dimensions:</div>
@@ -94,11 +96,11 @@
 </template>
 
 <script>
-import Icon from '../../common/components/Icon';
+// import Icon from '../../common/components/Icon';
 
 export default {
   components: {
-    Icon,
+    // Icon,
   },
   props: {
     debugData: Object
@@ -156,4 +158,4 @@ export default {
   }
 
 }
-</style>
+</style>

src/ext/lib/uwui/UI.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue';
 import { createStore } from 'vuex';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: UI");
@@ -56,7 +58,7 @@ class UI {
 
     this.element = rootDiv;
 
-    const app = createApp(this.uiConfig.component);
+    const app = createApp(this.uiConfig.component).use(mdiVue, {icons: mdijs});
     if (this.vuexStore) {
       app.use(this.vuexStore);
     }
@@ -65,7 +67,7 @@ class UI {
 
   /**
    * Replaces ui config and re-inits the UI
-   * @param {*} newUiConfig 
+   * @param {*} newUiConfig
    */
   replace(newUiConfig) {
     this.element?.remove();

src/ext/uw-ui.js

@@ -9,6 +9,8 @@ import Logger from './lib/Logger';
 import Settings from './lib/Settings';
 import CommsClient from './lib/comms/CommsClient';
 import Comms from './lib/comms/Comms';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
 
 class UwUi {
 
@@ -185,10 +187,11 @@ class UwUi {
     rootDiv.classList.add('uw-ultrawidify-container-root');
 
     document.body.appendChild(rootDiv);
-   
+
     try {
       createApp(LoggerUi)
         .use(this.vuexStore)
+        .use(mdiVue, {icons: mdijs})
         .mount(`#${uwid}`);
 
       // new Vue({
@@ -214,7 +217,7 @@ class UwUi {
       await this.initLoggerUi();
     }
 
-    
+
     try {
       console.log("will show logger")
       this.vuexStore.dispatch('uw-show-logger');
@@ -243,7 +246,7 @@ class UwUi {
 // leave a mark, so this script won't get executed more than once on a given page
 const markerId = 'ultrawidify-marker-5aeaf521-7afe-447f-9a17-3428f62d0970';
 
-// if this script has already been executed, don't execute it again. 
+// if this script has already been executed, don't execute it again.
 if (! document.getElementById(markerId)) {
   const markerDiv = document.createElement('div');
   markerDiv.setAttribute("style", "display: none");

src/options/options.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue';
 import App from './App';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
 
-createApp(App).mount('#app');
+createApp(App).mount('#app').use(mdiVue, {icons: mdijs});

src/popup/App.vue

@@ -25,8 +25,8 @@
       class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
       @click="toggleSideMenu()"
     >
-      <Icon v-if="!sideMenuVisible" icon="list" />
+      <!-- <Icon v-if="!sideMenuVisible" icon="list" /> -->
-      <Icon v-else icon="x" />
+      <!-- <Icon v-else icon="x" /> -->
       <div>Menu</div>
     </div>
     <div class="flex flex-row body no-overflow flex-grow">
@@ -195,7 +195,6 @@
 </template>
 
 <script>
-import Icon from '../common/components/Icon.vue'
 import WhatsNewPanel from './panels/WhatsNewPanel.vue';
 import SiteDetailsPanel from './panels/SiteDetailsPanel.vue';
 import Donate from '../common/misc/Donate.vue';

src/popup/popup.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
 
-createApp(App).mount('#app');
+createApp(App).mount('#app').use(mdiVue, {icons: mdijs});

tsconfig.json

@@ -14,4 +14,4 @@
     ],
   },
   "include": [ "./src/**/*" ],
-}
+}

webpack.config.js

@@ -34,7 +34,7 @@ const config = {
   },
   module: {
     rules: [
-      { 
+      {
         test: /\.ts$/,
         loader: 'ts-loader',
         exclude: /node_modules/
@@ -93,11 +93,8 @@ const config = {
       // we need to get webextension-polyfill and put it in common/lib
       { from: '../node_modules/webextension-polyfill/dist/browser-polyfill.js', to: 'common/lib/browser-polyfill.js'},
 
-      // This is a hack to get bootstrap icons svg file in /res/icons
-      { from: '../node_modules/bootstrap-icons/bootstrap-icons.svg', to: 'res/icons/bootstrap-icons.svg'},
-
       // This is extension icon, as used on extension lists and/or extension's action button
-      // This folder does not contain any GUI icons — these are in /res/icons. 
+      // This folder does not contain any GUI icons — these are in /res/icons.
       // (TODO: check if this copy is even necessary — /icons has same content as /res/icons)
       { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
       { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
@@ -127,7 +124,7 @@ const config = {
                                             .replace('-', '.') // YYMM-DD -> YYMM.DD
                                     }.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
             jsonContent.browser_action.default_title = "Ultrawidify Nightly";
-            
+
             // because we don't want web-ext to submit this as proper release
             delete jsonContent.applications;
           } else if (process.env.CHANNEL === 'testing') {
@@ -143,7 +140,7 @@ const config = {
                                             .replace('-', '.') // YYMM-DD -> YYMM.DD
                                     }.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
             jsonContent.browser_action.default_title = "Ultrawidify Testing";
-            
+
             // because we don't want web-ext to submit this as proper release
             delete jsonContent.applications;
           }
@@ -184,7 +181,7 @@ if (config.mode === 'production') {
     new webpack.DefinePlugin({
       '__VUE_OPTIONS_API__': true,
       '__VUE_PROD_DEVTOOLS__': false,
-      
+
       'process.env': {
         NODE_ENV: '"production"',
       },