Discern popup of dev/nightly/testing versions from stable version

src/ext/conf/BrowserDetect.js

@@ -8,6 +8,7 @@ const BrowserDetect = {
   chrome: process.env.BROWSER === 'chrome',
   edge: process.env.BROWSER === 'edge',
   processEnvBrowser: process.env.BROWSER,
+  processEnvChannel: process.env.CHANNEL,
 } 
 
 if (process.env.CHANNEL !== 'stable') {

src/popup/App.vue

@@ -2,8 +2,11 @@
   <div v-if="settingsInitialized" 
        class="popup flex flex-column no-overflow"
   >
-    <div class="header flex-row flex-nogrow flex-noshrink">
+    <div class="header flex-row flex-nogrow flex-noshrink relative">
       <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
+      <div class="absolute channel-info" v-if="BrowserDetect.processEnvChannel !== 'stable'">
+        Build channel: {{BrowserDetect.processEnvChannel}}
+      </div>
     </div>
 
     <div class="flex flex-row body no-overflow flex-grow">
@@ -202,6 +205,7 @@ export default {
       videoTabDisabled: false,
       canShowVideoTab: {canShow: true, warning: true},
       showWhatsNew: false,
+      BrowserDetect: BrowserDetect,
     }
   },
   async created() {
@@ -240,6 +244,7 @@ export default {
     DefaultSettingsPanel,
     PerformancePanel,
     Debug,
+    BrowserDetect,
     AboutPanel,
     Donate,
     SiteDetailsPanel,
@@ -582,4 +587,17 @@ html, body {
   // width: 800px;
   height: 600px;
 }
+
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.channel-info {
+  height: 0px;
+  right: 1.5rem;
+  bottom: 0.85rem;
+  font-size: 0.75rem;
+}
 </style>