feat(tabs): relocated webview to own component

src/components/TabMain.vue

@@ -11,126 +11,56 @@
       @toggleDevTools="toggleDevTools"
     />
 
-    <webview
-      ref="view"
-      :src="item.url"
-      :useragent="userAgent"
-      :preload="preload"
-      :class="$style.viewport"
+    <tab-webview
+      ref="webview"
+      :item="item"
     />
   </div>
 </template>
 
 <script>
-import path from 'path';
-import url from 'url';
 import TabHeader from '@/components/TabHeader.vue';
+import TabWebview from '@/components/TabWebview.vue';
 
 export default {
   components: {
     TabHeader,
+    TabWebview,
   },
   props: {
     item: {
       type: Object,
       default: () => ({}),
     },
   },
-  data() {
-    return {
-      preload: `file://${path.join(__static, 'webview.js')}`, // eslint-disable-line no-undef
-    };
-  },
   computed: {
     isActive() {
       return parseInt(this.$route.params.ident, 0) === this.item.ident;
     },
-    muteOnWindowBlur() {
-      return this.$store.getters['Settings/muteOnWindowBlur'];
-    },
-    notificationsPreventOnBlur() {
-      return this.$store.getters['Notifications/preventOnBlur'];
-    },
-    userAgent() {
-      return this.item.userAgent || navigator.userAgent;
-    },
-    windowHasFocus() {
-      return this.$store.getters['Window/hasFocus'];
+    webview() {
+      return this.$refs.webview.$refs.webview;
     },
   },
   watch: {
     isActive(isActive) {
       if (isActive) {
         this.$store.commit('Tabs/activateIdent', this.item.ident);
-        this.$refs.view.focus();
+        this.webview.focus();
       }
     },
-    windowHasFocus(value) {
-      if (!this.muteOnWindowBlur) return;
-      this.$refs.view.setAudioMuted(!value);
-    },
-  },
-  mounted() {
-    this.$refs.view.addEventListener('ipc-message', (event) => {
-      if (event.channel !== 'notification') return;
-
-      const [notification] = event.args;
-
-      this.$store.commit('Notifications/add', {
-        notification,
-        tabIdent: this.item.ident,
-      });
-
-      if (!this.notificationsPreventOnBlur || this.windowHasFocus) {
-        new Notification(notification.title, notification.options); // eslint-disable-line no-new
-      }
-    });
-
-    this.$refs.view.addEventListener('page-title-updated', ({ title }) => {
-      this.$store.commit('Pages/setState', {
-        tabId: this.item.ident,
-        data: { title },
-      });
-    });
-
-    this.$refs.view.addEventListener('page-favicon-updated', ({ favicons }) => {
-      const [favicon] = favicons;
-
-      this.$store.commit('Pages/setState', {
-        tabId: this.item.ident,
-        data: { favicon },
-      });
-    });
-
-    this.$refs.view.addEventListener('dom-ready', (view) => {
-      if ('customCss' in this.item) {
-        view.target.insertCSS(this.item.customCss);
-      }
-      if ('customJs' in this.item) {
-        view.target.executeJavaScript(this.item.customJs);
-      }
-    });
-
-    this.$refs.view.addEventListener('new-window', (e) => {
-      const { protocol } = url.parse(e.url);
-
-      if (protocol === 'http:' || protocol === 'https:') {
-        this.$electron.remote.shell.openExternal(e.url);
-      }
-    });
   },
   methods: {
     goToHome() {
-      this.$refs.view.loadURL(this.item.url);
+      this.webview.loadURL(this.item.url);
     },
     reloadTab() {
-      this.$refs.view.reload();
+      this.webview.reload();
     },
     toggleDevTools() {
-      if (this.$refs.view.isDevToolsOpened()) {
-        this.$refs.view.closeDevTools();
+      if (this.webview.isDevToolsOpened()) {
+        this.webview.closeDevTools();
       } else {
-        this.$refs.view.openDevTools();
+        this.webview.openDevTools();
       }
     },
   },
@@ -141,8 +71,4 @@ export default {
 .wrap {
   @apply flex flex-1 flex-col;
 }
-
-.viewport {
-  @apply flex-grow;
-}
 </style>

src/components/TabWebview.vue

@@ -0,0 +1,99 @@
+<template>
+  <webview
+    ref="webview"
+    :src="item.url"
+    :useragent="userAgent"
+    :preload="$options.preloadScript"
+    :class="$style.webview"
+  />
+</template>
+
+<script>
+import path from 'path';
+import url from 'url';
+
+export default {
+  preloadScript: `file://${path.join(__static, 'webview.js')}`, // eslint-disable-line no-undef
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    muteOnWindowBlur() {
+      return this.$store.getters['Settings/muteOnWindowBlur'];
+    },
+    notificationsPreventOnBlur() {
+      return this.$store.getters['Notifications/preventOnBlur'];
+    },
+    userAgent() {
+      return this.item.userAgent || undefined;
+    },
+    windowHasFocus() {
+      return this.$store.getters['Window/hasFocus'];
+    },
+  },
+  watch: {
+    windowHasFocus(value) {
+      if (!this.muteOnWindowBlur) return;
+      this.$refs.webview.setAudioMuted(!value);
+    },
+  },
+  mounted() {
+    this.$refs.webview.addEventListener('ipc-message', (event) => {
+      if (event.channel !== 'notification') return;
+
+      const [notification] = event.args;
+
+      this.$store.commit('Notifications/add', {
+        notification,
+        tabIdent: this.item.ident,
+      });
+
+      if (!this.notificationsPreventOnBlur || this.windowHasFocus) {
+        new Notification(notification.title, notification.options); // eslint-disable-line no-new
+      }
+    });
+
+    this.$refs.webview.addEventListener('page-title-updated', ({ title }) => {
+      this.$store.commit('Pages/setState', {
+        tabId: this.item.ident,
+        data: { title },
+      });
+    });
+
+    this.$refs.webview.addEventListener('page-favicon-updated', ({ favicons }) => {
+      const [favicon] = favicons;
+
+      this.$store.commit('Pages/setState', {
+        tabId: this.item.ident,
+        data: { favicon },
+      });
+    });
+
+    this.$refs.webview.addEventListener('dom-ready', (view) => {
+      if ('customCss' in this.item) {
+        view.target.insertCSS(this.item.customCss);
+      }
+      if ('customJs' in this.item) {
+        view.target.executeJavaScript(this.item.customJs);
+      }
+    });
+
+    this.$refs.webview.addEventListener('new-window', (e) => {
+      const { protocol } = url.parse(e.url);
+
+      if (protocol === 'http:' || protocol === 'https:') {
+        this.$electron.remote.shell.openExternal(e.url);
+      }
+    });
+  },
+};
+</script>
+
+<style lang="postcss" module>
+.webview {
+  @apply flex-grow;
+}
+</style>