feat: update dependencies and refresh user interface

.babelrc

@@ -1,9 +1,9 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/env",
       {
-        "targets": {"chrome": 55, "firefox": 57, "opera": 42}
+        "modules": false
       }
     ]
   ],

.nvmrc

@@ -1 +1 @@
-8.9.1
+10.15.3

README.md

@@ -4,20 +4,20 @@
 <p align="center">
   </br></br>
   <a href="https://chrome.google.com/webstore/detail/clear-browsing-data/bjilljlpencdcpihofiobpnfgcakfdbe">
-    <img src="https://i.imgur.com/q6E8SOD.png" alt="Chrome Web Store"></a>
+    <img src="https://i.imgur.com/B0i5sn3.png" alt="Chrome Web Store"></a>
   <a href="https://addons.mozilla.org/en-US/firefox/addon/clear-browsing-data/">
     <img src="https://i.imgur.com/dvof8rG.png" alt="Firefox add-ons"></a>
   <a href="https://addons.opera.com/en/extensions/details/clear-browsing-data/">
     <img src="https://i.imgur.com/wK10qEV.png" alt="Opera add-ons"></a>
   </br></br>
 </p>
 
-## Supporting Clear Browsing Data
+## Supporting the Project
 
 The continued development of Clear Browsing Data is made possible
 thanks to the support of awesome backers. If you'd like to join them,
-please consider contributing with [Patreon](https://goo.gl/qRhKSW),
-[PayPal](https://goo.gl/5FnBaw) or [Bitcoin](https://goo.gl/uJUAaU).
+please consider contributing with [Patreon](https://www.patreon.com/dessant),
+[PayPal](https://www.paypal.me/ArminSebastian) or [Bitcoin](https://goo.gl/uJUAaU).
 
 ## Description
 

gulpfile.js

@@ -1,12 +1,11 @@
 const path = require('path');
-const exec = require('child_process').exec;
+const {exec} = require('child_process');
 const {lstatSync, readdirSync, readFileSync, writeFileSync} = require('fs');
 
 const del = require('del');
 const {ensureDirSync} = require('fs-extra');
 const recursiveReadDir = require('recursive-readdir');
 const gulp = require('gulp');
-const gulpSeq = require('gulp-sequence');
 const htmlmin = require('gulp-htmlmin');
 const svgmin = require('gulp-svgmin');
 const postcss = require('gulp-postcss');
@@ -15,12 +14,14 @@ const jsonMerge = require('gulp-merge-json');
 const jsonmin = require('gulp-jsonmin');
 const imagemin = require('gulp-imagemin');
 const svg2png = require('svg2png');
+const dedent = require('dedent');
 
 const targetEnv = process.env.TARGET_ENV || 'firefox';
 const isProduction = process.env.NODE_ENV === 'production';
+const distDir = path.join('dist', targetEnv);
 
 gulp.task('clean', function() {
-  return del(['dist']);
+  return del([distDir]);
 });
 
 gulp.task('js', function(done) {
@@ -35,61 +36,67 @@ gulp.task('js', function(done) {
   });
 });
 
-gulp.task('html', function() {
-  return gulp
+gulp.task('html', function(done) {
+  gulp
     .src('src/**/*.html', {base: '.'})
     .pipe(gulpif(isProduction, htmlmin({collapseWhitespace: true})))
-    .pipe(gulp.dest('dist'));
+    .pipe(gulp.dest(distDir));
+  done();
 });
 
-gulp.task('icons', async function() {
-  ensureDirSync('dist/src/icons/app');
+gulp.task('icons', async function(done) {
+  ensureDirSync(`${distDir}/src/icons/app`);
   const iconSvg = readFileSync('src/icons/app/icon.svg');
-  const iconSizes = [16, 19, 24, 32, 38, 48, 64, 96, 128];
-  for (const size of iconSizes) {
+  const appIconSizes = [16, 19, 24, 32, 38, 48, 64, 96, 128];
+  for (const size of appIconSizes) {
     const pngBuffer = await svg2png(iconSvg, {width: size, height: size});
-    writeFileSync(`dist/src/icons/app/icon-${size}.png`, pngBuffer);
+    writeFileSync(`${distDir}/src/icons/app/icon-${size}.png`, pngBuffer);
   }
 
   if (isProduction) {
     gulp
-      .src('dist/src/**/*.png', {base: '.'})
+      .src(`${distDir}/src/icons/**/*.png`, {base: '.'})
       .pipe(imagemin())
-      .pipe(gulp.dest(''));
+      .pipe(gulp.dest('.'));
   }
 
   gulp
-    .src('src/icons/**/*.svg', {base: '.'})
+    .src('src/icons/@(dataTypes|misc)/*.svg', {base: '.'})
     .pipe(gulpif(isProduction, svgmin()))
-    .pipe(gulp.dest('dist'));
+    .pipe(gulp.dest(distDir));
   gulp
     .src('node_modules/ext-contribute/src/assets/*.svg')
     .pipe(gulpif(isProduction, svgmin()))
-    .pipe(gulp.dest('dist/src/contribute/assets'));
+    .pipe(gulp.dest(`${distDir}/src/contribute/assets`));
+  done();
 });
 
-gulp.task('fonts', function() {
+gulp.task('fonts', function(done) {
   gulp
     .src('src/fonts/roboto.css', {base: '.'})
     .pipe(postcss())
-    .pipe(gulp.dest('dist'));
+    .pipe(gulp.dest(distDir));
   gulp
     .src('node_modules/typeface-roboto/files/roboto-latin-@(400|500|700).woff2')
-    .pipe(gulp.dest('dist/src/fonts/files'));
+    .pipe(gulp.dest(`${distDir}/src/fonts/files`));
+  done();
 });
 
-gulp.task('locale', function() {
+gulp.task('locale', function(done) {
   const localesRootDir = path.join(__dirname, 'src/_locales');
   const localeDirs = readdirSync(localesRootDir).filter(function(file) {
     return lstatSync(path.join(localesRootDir, file)).isDirectory();
   });
   localeDirs.forEach(function(localeDir) {
     const localePath = path.join(localesRootDir, localeDir);
     gulp
-      .src([
-        path.join(localePath, 'messages.json'),
-        path.join(localePath, `messages-${targetEnv}.json`)
-      ])
+      .src(
+        [
+          path.join(localePath, 'messages.json'),
+          path.join(localePath, `messages-${targetEnv}.json`)
+        ],
+        {allowEmpty: true}
+      )
       .pipe(
         jsonMerge({
           fileName: 'messages.json',
@@ -106,12 +113,13 @@ gulp.task('locale', function() {
         })
       )
       .pipe(gulpif(isProduction, jsonmin()))
-      .pipe(gulp.dest(path.join('dist/_locales', localeDir)));
+      .pipe(gulp.dest(path.join(distDir, '_locales', localeDir)));
   });
+  done();
 });
 
-gulp.task('manifest', function() {
-  return gulp
+gulp.task('manifest', function(done) {
+  gulp
     .src('src/manifest.json')
     .pipe(
       jsonMerge({
@@ -142,7 +150,8 @@ gulp.task('manifest', function() {
       })
     )
     .pipe(gulpif(isProduction, jsonmin()))
-    .pipe(gulp.dest('dist'));
+    .pipe(gulp.dest(distDir));
+  done();
 });
 
 gulp.task('license', function(done) {
@@ -160,24 +169,55 @@ gulp.task('license', function(done) {
     See the LICENSE file for further information.
   `;
 
-  writeFileSync('dist/NOTICE', notice);
-  gulp.src(['LICENSE']).pipe(gulp.dest('dist'));
+  writeFileSync(`${distDir}/NOTICE`, notice);
+  gulp.src(['LICENSE']).pipe(gulp.dest(distDir));
   done();
 });
 
-gulp.task('copy', function() {
+gulp.task('copy', function(done) {
   gulp
     .src('node_modules/ext-contribute/src/assets/*.@(jpg|png)')
-    .pipe(gulp.dest('dist/src/contribute/assets'));
+    .pipe(gulp.dest(`${distDir}/src/contribute/assets`));
+  done();
 });
 
 gulp.task(
   'build',
-  gulpSeq(
+  gulp.series(
     'clean',
-    ['js', 'html', 'icons', 'fonts', 'locale', 'manifest', 'license'],
+    gulp.parallel(
+      'js',
+      'html',
+      'icons',
+      'fonts',
+      'locale',
+      'manifest',
+      'license'
+    ),
     'copy'
   )
 );
 
-gulp.task('default', ['build']);
+gulp.task('zip', function(done) {
+  exec(
+    `web-ext build -s dist/${targetEnv} -a artifacts/${targetEnv} --overwrite-dest`,
+    function(err, stdout, stderr) {
+      console.log(stdout);
+      console.log(stderr);
+      done(err);
+    }
+  );
+});
+
+gulp.task('inspect', function(done) {
+  exec(
+    `webpack --profile --json > report.json && webpack-bundle-analyzer report.json dist/firefox/src && sleep 10 && rm report.{json,html}`,
+    function(err, stdout, stderr) {
+      console.log(stdout);
+      console.log(stderr);
+      done(err);
+    }
+  );
+});
+
+gulp.task('default', gulp.series('build'));