feat: event tab counter

Author: Guillaume Chau

package.json

@@ -28,6 +28,16 @@
   "bugs": {
     "url": "https://github.com/vuejs/vue-devtools/issues"
   },
+  "dependencies": {
+    "@vue/ui": "^0.5.1",
+    "circular-json-es6": "^2.0.1",
+    "lodash.debounce": "^4.0.8",
+    "lodash.groupby": "^4.6.0",
+    "uglifyjs-webpack-plugin": "^1.1.4",
+    "vue": "^2.5.13",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
   "homepage": "https://github.com/vuejs/vue-devtools#readme",
   "devDependencies": {
     "buble": "^0.19.0",
@@ -54,15 +64,5 @@
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.9.7",
     "webpack-merge": "^4.1.2"
-  },
-  "dependencies": {
-    "@vue/ui": "^0.5.0",
-    "circular-json-es6": "^2.0.1",
-    "lodash.debounce": "^4.0.8",
-    "lodash.groupby": "^4.6.0",
-    "uglifyjs-webpack-plugin": "^1.1.4",
-    "vue": "^2.5.13",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
   }
 }

src/devtools/App.vue

@@ -40,12 +40,13 @@
           Vuex
         </VueGroupButton>
         <VueGroupButton
+          :tag="newEventCount > 0 ? newEventCount : null"
           :class="{
             'icon-button': !$responsive.wide
           }"
           value="events"
           icon-left="grain"
-          class="flat"
+          class="flat big-tag"
           v-tooltip="$t('App.events.tooltip')"
         >
           Events
@@ -239,23 +240,6 @@ export default {
 .vue-ui-group /deep/ > .indicator
   padding-bottom 0 !important
 
-$event-count-bubble-size = 18px
-
-.event-count
-  background-color $active-color
-  color #fff
-  border-radius 50%
-  width $event-count-bubble-size
-  height $event-count-bubble-size
-  text-align center
-  padding-top 4px
-  font-size $event-count-bubble-size * 0.5
-  position absolute
-  right 0
-  top 12px
-  .vue-ui-dark-mode &
-    background-color $dark-background-color
-
 .container
   overflow hidden
   flex 1

yarn.lock

@@ -16,9 +16,9 @@
     source-map "^0.5.6"
     vue-template-es2015-compiler "^1.6.0"
 
-"@vue/ui@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.5.0.tgz#05220e7e3a05e2254efdd5266852f6a471327e0a"
+"@vue/ui@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.5.1.tgz#c1d9c7c2951d90ecb7d53c4cd29f3c9055eb521c"
   dependencies:
     focus-visible "^4.1.4"
     material-design-icons "^3.0.1"