deps: update web client build deps (#3095)

* deps: change web build-dep from node-sass to sass

https://sass-lang.com/blog/libsass-is-deprecated and dart sass is the
recommended replacement.

* deps: yarn upgrade-interactive

* deps: update babel dep to 7.17

* deps: update eslint

* deps: update prettier

* deps: update svgo

* deps: update webpack to 5.72.1

* deps: update webpack-bundle-analyzer to 4.5.0

* deps: update webpack-cli to 4.9.2

* deps: update webpack-dev-server from 3.11.3 to 4.9.0

* deps: replace svgo, svgo-loader, url-loader with webpack asset/inline

* chore: rename "style" dir as "assets"

* deps: update stylelint from 13.13.1 to 14.8.2

* deps: bump terser-webpack-plugin from 5.1.4 to 5.3.1

* deps: bump css-loader from 5.2.7 to 6.7.1

* deps: bump css-minimizer-webpack-plugin from 3.0.2 to 3.4.1

* deps: bump mini-css-extract-plugin from 1.6.2 to 2.6.0

web/assets/css/transmission-app.scss

@@ -33,25 +33,27 @@ $yellow-700: #dbab09;
 // $z-index-progressbar: 1;
 $z-index-popup: 2;
 
-// SVG ICONS -- see images/README.md for sources and license details
+// ICONS -- see assets/img/README.md for sources and license details
 // Are you a designer? New icon PRs welcomed!
-$image-analytics: 'images/analytics.svg';
-$image-baseline: 'images/horizontal-rule.svg';
-$image-files: 'images/files.svg';
-$image-chevron-dn: 'images/chevron-down.svg';
-$image-chevron-up: 'images/chevron-up.svg';
-$image-lock-fill: 'images/lock-fill.svg';
-$image-network: 'images/router.svg';
-$image-magnet: 'images/magnet.svg';
-$image-overflow: 'images/three-dots-vertical.svg';
-$image-pause-circle-active: 'images/pause-circle-active.svg';
-$image-pause-circle-idle: 'images/pause-circle-idle.svg';
-$image-peers: 'images/team.svg';
-$image-play-circle-active: 'images/play-circle-active.svg';
-$image-play-circle-idle: 'images/play-circle-idle.svg';
-$image-speed: 'images/checkered-flag.svg';
-$image-tiers: 'images/diagram-3-fill.svg';
-$image-upload-download: 'images/up-and-down-arrows.svg';
+$image-alt-speed-disabled: '../img/turtle.png';
+$image-alt-speed-enabled: '../img/blue-turtle.png';
+$image-analytics: '../img/analytics.svg';
+$image-baseline: '../img/horizontal-rule.svg';
+$image-chevron-dn: '../img/chevron-down.svg';
+$image-chevron-up: '../img/chevron-up.svg';
+$image-files: '../img/files.svg';
+$image-lock-fill: '../img/lock-fill.svg';
+$image-magnet: '../img/magnet.svg';
+$image-network: '../img/router.svg';
+$image-overflow: '../img/three-dots-vertical.svg';
+$image-pause-circle-active: '../img/pause-circle-active.svg';
+$image-pause-circle-idle: '../img/pause-circle-idle.svg';
+$image-peers: '../img/team.svg';
+$image-play-circle-active: '../img/play-circle-active.svg';
+$image-play-circle-idle: '../img/play-circle-idle.svg';
+$image-speed: '../img/checkered-flag.svg';
+$image-tiers: '../img/diagram-3-fill.svg';
+$image-upload-download: '../img/up-and-down-arrows.svg';
 
 @mixin for-phone-only {
   @media (max-width: 599px) {
@@ -167,6 +169,7 @@ a {
 .even {
   background-color: var(--color-bg-even);
 }
+
 .odd {
   background-color: var(--color-bg-odd);
 }
@@ -241,23 +244,23 @@ $toolbar-height: $toolbar-height-number * 1px;
 }
 
 #toolbar-open {
-  background-image: url('images/toolbar-folder.png');
+  background-image: url('../img/toolbar-folder.png');
 }
 
 #toolbar-remove {
-  background-image: url('images/toolbar-close.png');
+  background-image: url('../img/toolbar-close.png');
 }
 
 #toolbar-start {
-  background-image: url('images/toolbar-start.png');
+  background-image: url('../img/toolbar-start.png');
 }
 
 #toolbar-pause {
-  background-image: url('images/toolbar-pause.png');
+  background-image: url('../img/toolbar-pause.png');
 }
 
 #toolbar-inspector {
-  background-image: url('images/toolbar-info.png');
+  background-image: url('../img/toolbar-info.png');
 }
 
 #toolbar-overflow {
@@ -269,7 +272,7 @@ $toolbar-height: $toolbar-height-number * 1px;
   width: 36px;
 
   &.alt-speed-enabled {
-    background-image: url('images/blue-turtle.png'), url($image-overflow);
+    background-image: url($image-alt-speed-enabled), url($image-overflow);
     background-position: bottom left, center, center;
     background-size: 16px 9px, 26px, 26px;
   }
@@ -294,9 +297,11 @@ $toolbar-height: $toolbar-height-number * 1px;
     > :not(select):not(input) {
       display: none;
     }
+
     > input {
       min-width: 50px;
     }
+
     > input,
     > select {
       height: 100%;
@@ -359,15 +364,15 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
 }
 
 .torrent-list {
-  $app-image: 'images/application-x-executable.png';
-  $audio-image: 'images/audio-x-generic.png';
-  $folder-image: 'images/folder.png';
-  $font-image: 'images/font-x-generic.png';
-  $image-image: 'images/image-x-generic.png';
-  $package-image: 'images/package-x-generic.png';
-  $text-image: 'images/folder.png';
-  $text-image: 'images/text-x-generic.png';
-  $video-image: 'images/video-x-generic.png';
+  $app-image: '../img/application-x-executable.png';
+  $audio-image: '../img/audio-x-generic.png';
+  $folder-image: '../img/folder.png';
+  $font-image: '../img/font-x-generic.png';
+  $image-image: '../img/image-x-generic.png';
+  $package-image: '../img/package-x-generic.png';
+  $text-image: '../img/folder.png';
+  $text-image: '../img/text-x-generic.png';
+  $video-image: '../img/video-x-generic.png';
 
   cursor: pointer;
   list-style-type: none;
@@ -517,13 +522,16 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
 
     &[data-action='pause'] {
       background-image: url($image-pause-circle-idle);
+
       &:active,
       &:hover {
         background-image: url($image-pause-circle-active);
       }
     }
+
     &[data-action='resume'] {
       background-image: url($image-play-circle-idle);
+
       &:active,
       &:hover {
         background-image: url($image-play-circle-active);
@@ -586,6 +594,7 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
       flex-grow: 1;
       margin: 2px 0;
     }
+
     &.compact {
       min-width: 50px;
       width: 50px;
@@ -610,48 +619,56 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
         var(--color-progressbar-leech-paused-2)
       );
     }
+
     &.leech.queued {
       @include progressbar-background(
         var(--color-progressbar-leech-queued-1),
         var(--color-progressbar-leech-queued-2)
       );
     }
+
     &.leech {
       @include progressbar-background(
         var(--color-progressbar-leech-1),
         var(--color-progressbar-leech-2)
       );
     }
+
     &.magnet.paused {
       @include progressbar-background(
         var(--color-progressbar-magnet-paused-1),
         var(--color-progressbar-magnet-paused-2)
       );
     }
+
     &.magnet {
       @include progressbar-background(
         var(--color-progressbar-magnet-1),
         var(--color-progressbar-magnet-2)
       );
     }
+
     &.seed.paused {
       @include progressbar-background(
         var(--color-progressbar-seed-paused-1),
         var(--color-progressbar-seed-paused-2)
       );
     }
+
     &.seed.queued {
       @include progressbar-background(
         var(--color-progressbar-seed-queued-1),
         var(--color-progressbar-seed-queued-2)
       );
     }
+
     &.seed {
       @include progressbar-background(
         var(--color-progressbar-seed-1),
         var(--color-progressbar-seed-2)
       );
     }
+
     &.verify {
       @include progressbar-background(
         var(--color-progressbar-verify-1),
@@ -739,7 +756,7 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
   }
 
   .alt-speed-section-label {
-    background: transparent url('images/blue-turtle.png') no-repeat;
+    background: transparent url($image-alt-speed-enabled) no-repeat;
     background-position: left 4px;
     padding-left: 22px;
   }
@@ -775,6 +792,7 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
   .blocklist-size-label {
     font-size: smaller;
   }
+
   .blocklist-size-number {
     font-weight: bolder;
   }
@@ -783,9 +801,11 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
     display: inline-block;
     font-weight: bold;
     margin-left: 5px;
+
     &[data-open='true'] {
       color: var(--color-fg-port-open);
     }
+
     &[data-open='false'] {
       color: var(--color-fg-port-closed);
     }
@@ -852,7 +872,7 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
   }
 
   #alternative-speed-limits-title {
-    background: transparent url('images/blue-turtle.png') no-repeat;
+    background: transparent url($image-alt-speed-enabled) no-repeat;
     padding-left: 18px;
   }
 
@@ -898,10 +918,12 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
 .file-priority-radiobox,
 .tabs-buttons {
   $radius: 8px;
+
   :first-child {
     border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
   }
+
   :last-child {
     border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
@@ -1141,6 +1163,7 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
 
   .encryption {
     width: 16px;
+
     &[data-encrypted='true'] {
       background: transparent url($image-lock-fill) center center no-repeat;
       height: 16px;
@@ -1158,10 +1181,12 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
   .percent-done {
     width: 10%;
   }
+
   .speed-down,
   .speed-up {
     width: 15%;
   }
+
   .peer-address {
     width: 25%;
   }
@@ -1381,11 +1406,11 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
       grid-area: check;
 
       &:checked ~ #alt-speed-image {
-        background-image: url('images/blue-turtle.png');
+        background-image: url($image-alt-speed-enabled);
       }
 
       &:not(:checked) ~ #alt-speed-image {
-        background-image: url('images/turtle.png');
+        background-image: url($image-alt-speed-disabled);
       }
     }
 
@@ -1524,7 +1549,7 @@ $logo-size: 64px;
 }
 
 .dialog-logo {
-  background: transparent url('images/logo.png') top left no-repeat;
+  background: transparent url('../img/logo.png') top left no-repeat;
   height: $logo-size;
   width: $logo-size;
 }

web/package.json

@@ -6,49 +6,47 @@
   "scripts": {
     "dev": "WEBPACK_MODE=development webpack serve --config webpack.config.js",
     "build": "webpack --config webpack.config.js",
-    "css": "sass --no-source-map style/",
-    "css:map": "sass style/",
+    "css": "sass --no-source-map assets/css/",
+    "css:map": "sass assets/css/",
     "lint": "run-p --silent lint:eslint lint:stylelint lint:prettier",
     "lint:fix": "run-s lint:eslint:fix lint:stylelint:fix lint:prettier:fix",
     "lint:eslint": "eslint src/*.js",
     "lint:eslint:fix": "eslint --fix src/*.js",
-    "lint:prettier": "prettier --loglevel warn --check package.json public_html/index.html style/*scss src/*.js",
-    "lint:prettier:fix": "prettier --loglevel warn -w package.json public_html/index.html style/*scss src/*.js",
-    "lint:stylelint": "stylelint style/*scss",
-    "lint:stylelint:fix": "stylelint --fix style/*scss"
+    "lint:prettier": "prettier --loglevel warn --check package.json public_html/index.html assets/css/*scss src/*.js",
+    "lint:prettier:fix": "prettier --loglevel warn -w package.json public_html/index.html assets/css/*scss src/*.js",
+    "lint:stylelint": "stylelint assets/css/*scss",
+    "lint:stylelint:fix": "stylelint --fix assets/css/*scss"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/eslint-parser": "^7.14.9",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "css-loader": "^5.2.7",
-    "css-minimizer-webpack-plugin": "^3.0.2",
-    "eslint": "^7.26.0",
-    "eslint-plugin-sonarjs": "^0.7.0",
-    "eslint-plugin-unicorn": "^32.0.1",
+    "@babel/core": "^7.17.10",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@primer/stylelint-config": "12.5.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "eslint": "^8.15.0",
+    "eslint-plugin-sonarjs": "^0.13.0",
+    "eslint-plugin-unicorn": "^42.0.0",
     "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^1.6.2",
-    "node-sass": "^7.0.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
+    "prettier": "^2.6.2",
     "sass": "^1.32.13",
     "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-primer": "^11.0.1",
-    "stylelint-config-sass-guidelines": "^8.0.0",
-    "stylelint-config-standard": "^22.0.0",
-    "svgo": "^2.3.1",
-    "svgo-loader": "^3.0.0",
-    "terser-webpack-plugin": "^5.1.4",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.37.1",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.3"
+    "stylelint": "^14.8.2",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-config-standard": "^25.0.0",
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.72.1",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
   },
   "dependencies": {
-    "lodash.isequal": "^4.5.0"
+    "lodash.isequal": "^4.5.0",
+    "package.json": "^2.0.1",
+    "yarn.lock": "^0.0.1-security"
   }
 }

web/src/main.js

@@ -9,7 +9,7 @@ import { Prefs } from './prefs.js';
 import { Transmission } from './transmission.js';
 import { debounce } from './utils.js';
 
-import '../style/transmission-app.scss';
+import '../assets/css/transmission-app.scss';
 
 function main() {
   const action_manager = new ActionManager();
@@ -21,7 +21,7 @@ function main() {
     transmission.elements.torrent_list.scrollTo(0, 1)
   );
   window.addEventListener('load', scroll_soon);
-  window.onorientationchange = scroll_soon;
+  window.addEventListener('orientationchange', scroll_soon);
 }
 
 document.addEventListener('DOMContentLoaded', main);

web/src/notifications.js

@@ -44,7 +44,7 @@ export class Notifications {
       const title = `${event.type === 'downloadComplete' ? 'Download' : 'Seeding'} complete`;
       const content = torrent.getName();
       const notification = window.webkitNotifications.createNotification(
-        'style/transmission/images/logo.png',
+        'assets/img/logo.png',
         title,
         content
       );

web/src/prefs-dialog.js

@@ -44,7 +44,7 @@ export class PrefsDialog extends EventTarget {
 
   _checkPort() {
     const element = this.elements.network.port_status_label;
-    element.removeAttribute('data-open');
+    delete element.dataset.open;
     setTextContent(element, 'Checking...');
     this.remote.checkPort(this._onPortChecked, this);
   }

web/src/transmission.js

@@ -317,8 +317,6 @@ export class Transmission extends EventTarget {
         break;
       }
 
-      case Prefs.AltSpeedEnabled:
-      case Prefs.NotificationsEnabled:
       default:
         /*noop*/
         break;

web/stylelint.config.js

@@ -5,8 +5,8 @@ module.exports = {
     "stylelint-config-prettier"
   ],
   "plugins":  [
-    "stylelint-config-primer/plugins/no-undefined-vars",
-    "stylelint-config-primer/plugins/no-unused-vars"
+    "@primer/stylelint-config/plugins/no-undefined-vars",
+    "@primer/stylelint-config/plugins/no-unused-vars"
   ],
   "rules": {
     "block-no-empty": true,
@@ -15,7 +15,6 @@ module.exports = {
     "declaration-block-no-duplicate-properties": true,
     "declaration-block-no-shorthand-property-overrides": true,
     "font-family-no-duplicate-names": true,
-    "function-calc-no-invalid": true,
     "function-calc-no-unspaced-operator": true,
     "function-linear-gradient-no-nonstandard-direction": true,
     "max-nesting-depth": null,

web/webpack.config.js

@@ -27,18 +27,12 @@ const config = {
         test: /\.css$/i,
         use: [ 'style-loader', 'css-loader' ],
       },
+
       {
-        test: /\.(png|jpe?g|)$/i,
-        use: [
-          'url-loader',
-        ],
-      },
-      {
-        test: /\.svg$/i,
-        use: [
-          'url-loader',
-          'svgo-loader'
-        ],
+        exclude: /(node_modules)/,
+        include: /(assets)\/(img)/,
+        test: /\.(jpe?g|png|gif|svg|webp)$/,
+        type: 'asset/inline',
       },
     ],
   },
@@ -70,7 +64,6 @@ const config = {
 if (mode === 'development') {
   config.devServer = {
     compress: true,
-    contentBase: path.join(__dirname, 'public_html'),
     historyApiFallback: {
       rewrites: [
         { from: '/transmission/web', to: '/' },
@@ -80,7 +73,8 @@ if (mode === 'development') {
     port: devPort,
     proxy: {
       '/rpc': rpcUrl
-    }
+    },
+    static: './public_html'
   };
 }