fix: update dependencies

Fixes breaking changes.

gulpfile.js

@@ -14,7 +14,6 @@ const gulpif = require('gulp-if');
 const jsonMerge = require('gulp-merge-json');
 const jsonmin = require('gulp-jsonmin');
 const imagemin = require('gulp-imagemin');
-const webpack = require('webpack');
 const svg2png = require('svg2png');
 
 const targetEnv = process.env.TARGET_ENV || 'firefox';

package.json

@@ -17,7 +17,7 @@
     "exec": "yarn run build && yarn run start",
     "exec:prod": "yarn run build:prod && yarn run start",
     "zip": "web-ext build -s dist/ -a artifacts/",
-    "start": "web-ext run --bc --url 'about:debugging' --url 'about:addons' -s dist/",
+    "start": "web-ext run -s dist/",
     "inspect": "webpack --profile --json > report.json; webpack-bundle-analyzer report.json --mode static && sleep 6 && rm report.{json,html}",
     "update": "ncu --upgrade --upgradeAll && yarn",
     "push": "git push --follow-tags origin master",
@@ -29,34 +29,34 @@
     "Opera >= 42"
   ],
   "dependencies": {
-    "@material/list": "^0.27.0",
-    "@material/ripple": "^0.27.0",
-    "@material/theme": "^0.27.0",
-    "@material/typography": "^0.3.0",
-    "ext-components": "dessant/ext-components#^0.1.1",
-    "ext-contribute": "dessant/ext-contribute#^0.1.0",
-    "lodash": "^4.17.4",
+    "@material/list": "^0.32.0",
+    "@material/ripple": "^0.32.0",
+    "@material/theme": "^0.30.0",
+    "@material/typography": "^0.28.0",
+    "ext-components": "dessant/ext-components#^0.1.3",
+    "ext-contribute": "dessant/ext-contribute#^0.1.2",
+    "lodash": "^4.17.5",
     "storage-versions": "dessant/storage-versions#^0.1.1",
-    "vue": "^2.5.13",
-    "vue-resize": "^0.4.3",
+    "vue": "^2.5.14",
+    "vue-resize": "^0.4.4",
     "vuedraggable": "^2.16.0",
     "webextension-polyfill": "^0.2.1"
   },
   "devDependencies": {
-    "autoprefixer": "^7.2.4",
-    "babel-loader": "^7.1.2",
-    "babel-minify-webpack-plugin": "^0.2.0",
+    "autoprefixer": "^8.1.0",
+    "babel-loader": "^7.1.4",
+    "babel-minify-webpack-plugin": "^0.3.0",
     "babel-plugin-lodash": "^3.3.2",
     "babel-preset-env": "^1.6.1",
-    "babel-preset-minify": "^0.2.0",
+    "babel-preset-minify": "^0.3.0",
     "babel-preset-stage-0": "^6.24.1",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.10",
     "cssnano": "^3.10.0",
     "del": "^3.0.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "fs-extra": "^5.0.0",
     "gulp": "^3.9.1",
-    "gulp-babel": "^7.0.0",
+    "gulp-babel": "^7.0.1",
     "gulp-htmlmin": "^4.0.0",
     "gulp-if": "^2.0.2",
     "gulp-imagemin": "^4.1.0",
@@ -67,17 +67,17 @@
     "gulp-svgmin": "^1.2.4",
     "lodash-webpack-plugin": "^0.11.4",
     "node-sass": "^4.7.2",
-    "npm-check-updates": "^2.14.0",
-    "recursive-readdir": "^2.2.1",
-    "sass-loader": "^6.0.6",
+    "npm-check-updates": "^2.14.1",
+    "recursive-readdir": "^2.2.2",
+    "sass-loader": "^6.0.7",
     "standard-version": "^4.3.0",
     "svg2png": "^4.1.1",
-    "typeface-roboto": "^0.0.45",
-    "vue-loader": "^13.6.2",
-    "vue-template-compiler": "^2.5.13",
-    "web-ext": "^2.2.2",
-    "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.9.1"
+    "typeface-roboto": "^0.0.54",
+    "vue-loader": "^14.2.1",
+    "vue-template-compiler": "^2.5.14",
+    "web-ext": "^2.4.0",
+    "webpack": "^3.11.0",
+    "webpack-bundle-analyzer": "^2.11.1"
   },
   "private": true
 }

src/action/App.vue

@@ -26,7 +26,7 @@
   <ul class="mdc-list list list-bulk-button" v-if="clearAllDataTypes">
     <li class="mdc-list-item list-item ripple-surface"
         @click="selectItem('allDataTypes')">
-      <img class="mdc-list-item__start-detail list-item-icon"
+      <img class="mdc-list-item__graphic list-item-icon"
           src="/src/icons/dataTypes/allDataTypes.svg">
       {{ getText('menuItemTitle_allDataTypes') }}
     </li>
@@ -42,7 +42,7 @@
           v-for="dataType in dataTypes"
           :key="dataType.id"
           @click="selectItem(dataType)">
-        <img class="mdc-list-item__start-detail list-item-icon"
+        <img class="mdc-list-item__graphic list-item-icon"
             :src="`/src/icons/dataTypes/${dataType}.svg`">
         {{ getText(`menuItemTitle_${dataType}`) }}
       </li>
@@ -182,6 +182,8 @@ body {
   margin: 0;
   min-width: 342px;
   overflow: hidden;
+  @include mdc-typography-base;
+  font-size: 100%;
 }
 
 .header {
@@ -280,8 +282,8 @@ body {
 
 .ripple-surface {
   @include mdc-ripple-surface;
+  @include mdc-ripple-radius-bounded;
   @include mdc-states;
-  @include mdc-ripple-radius;
 
   position: sticky;
   outline: none;

src/contribute/App.vue

@@ -39,10 +39,14 @@ export default {
 </script>
 
 <style lang="scss">
+@import '@material/typography/mixins';
+
 body {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
+  @include mdc-typography-base;
+  font-size: 100%;
 }
 </style>

src/options/App.vue

@@ -25,17 +25,17 @@
       {{ getText('optionSectionTitle_misc') }}
     </div>
     <div class="option-wrap">
-      <div class="option">
+      <div class="option select">
         <v-select v-model="options.clearAllDataTypesAction"
             :options="selectOptions.clearAllDataTypesAction">
         </v-select>
       </div>
-      <div class="option">
+      <div class="option select">
         <v-select v-model="options.clearSince"
             :options="selectOptions.clearSince">
         </v-select>
       </div>
-      <div class="option">
+      <div class="option select">
         <v-form-field input-id="nos"
             :label="getText('optionTitle_notifyOnSuccess')">
           <v-switch id="nos" v-model="options.notifyOnSuccess"></v-switch>
@@ -146,6 +146,8 @@ $mdc-theme-primary: #1abc9c;
 
 body {
   min-width: 600px;
+  @include mdc-typography-base;
+  font-size: 100%;
 }
 
 #app {
@@ -180,4 +182,8 @@ body {
   align-items: center;
   height: 36px;
 }
+
+.option.select {
+  align-items: end;
+}
 </style>