feat: beta channel

Author: Guillaume Chau

package.json

@@ -14,6 +14,7 @@
     "zip:chrome": "cd shells && zip -r -FS ../dist/chrome.zip chrome -x *src/* -x *webpack.config.js",
     "zip:firefox": "web-ext build -s shells/chrome -a dist -i src --overwrite-dest",
     "release": "node release.js && npm run test && npm run build && npm run zip",
+    "release:beta": "cross-env CHANNEL=beta && npm run release",
     "test": "npm run lint && npm run test:e2e",
     "test:e2e": "cross-env PORT=4040 start-server-and-test dev:shell http://localhost:4040 test:e2e:run",
     "test:e2e:run": "cypress run --config baseUrl=http://localhost:4040",

shells/createConfig.js

@@ -66,7 +66,12 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
     },
     plugins: [
       new VueLoaderPlugin(),
-      ...(process.env.VUE_DEVTOOL_TEST ? [] : [new FriendlyErrorsPlugin()])
+      ...(process.env.VUE_DEVTOOL_TEST ? [] : [new FriendlyErrorsPlugin()]),
+      new webpack.DefinePlugin({
+        'process.env': {
+          CHANNEL: JSON.stringify(process.env.CHANNEL || 'stable')
+        }
+      })
     ],
     devServer: {
       port: process.env.PORT

src/devtools/App.vue

@@ -2,6 +2,9 @@
   <div
     id="app"
     class="app"
+    :class="{
+      beta: isBeta
+    }"
   >
     <datalist id="special-tokens">
       <option
@@ -22,7 +25,16 @@
             :key="message"
             class="message"
           >
-            {{ message }}
+            <span>{{ message }}</span>
+
+            <span class="badges">
+              <span
+                v-if="isBeta"
+                class="badge"
+              >
+                beta devtools
+              </span>
+            </span>
           </span>
         </transition>
       </span>
@@ -207,8 +219,18 @@ export default {
   background-color $background-color
   display flex
   flex-direction column
+  position relative
   .vue-ui-dark-mode &
     background-color $dark-background-color
+  &.beta
+    &::after
+      display block
+      content ''
+      position absolute
+      top 0
+      left 0
+      width 100%
+      border-top 2px rgba($orange, .4) solid
 
 .header
   display flex
@@ -236,6 +258,23 @@ export default {
   color $active-color
   transition all .3s ease
   position absolute
+  display flex
+  align-items center
+
+.badges
+  display flex
+  align-items center
+
+.badge
+  background rgba($orange, .7)
+  color white
+  font-size 10px
+  line-height 10px
+  padding 2px 6px
+  border-radius 8px
+  margin-left 6px
+  .vue-ui-dark-mode &
+    opacity .75
 
 .actions
   flex auto 1 1

src/devtools/index.js

@@ -14,6 +14,7 @@ let panelShown = !isChrome
 let pendingAction = null
 
 const isDark = isChrome ? chrome.devtools.panels.themeName === 'dark' : false
+const isBeta = process.env.CHANNEL === 'beta'
 
 // Capture and log devtool errors when running as actual extension
 // so that we can debug it by inspecting the background page.
@@ -160,7 +161,8 @@ function initApp (shell) {
       store,
 
       data: {
-        isDark
+        isDark,
+        isBeta
       },
 
       watch: {

src/devtools/variables.styl

@@ -7,7 +7,7 @@ $green = #42B983
 $darkerGreen = #3BA776
 $slate = #242424
 $white = #FFFFFF
-$orange = #DB6B00
+$orange = #FF6B00
 $red = #c41a16
 $black = #222
 $vividBlue = #0033cc