feat: beta channel

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