WebUI: improve lint checks

.gitignore

@@ -41,7 +41,3 @@ src/icons/skin/build-icons/icons/*.png
 
 # CMake build directory
 build/
-
-# Web UI tools
-node_modules
-package-lock.json

src/webui/www/.gitignore

@@ -0,0 +1,5 @@
+# Web UI tools
+.eslintcache
+.stylelintcache
+node_modules
+package-lock.json

src/webui/www/package.json

@@ -7,7 +7,7 @@
   },
   "scripts": {
     "format": "js-beautify -r *.mjs private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && prettier --write **.css",
-    "lint": "eslint *.mjs private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && stylelint **/*.css && html-validate private public"
+    "lint": "eslint --cache *.mjs private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && stylelint --cache **/*.css && html-validate private public"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "*",

src/webui/www/private/css/Window.css

@@ -99,7 +99,7 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mocha .handle {
-    background: #0f0;
+    background: #00ff00;
     font-size: 1px; /* For IE6 */
     height: 3px;
     opacity: 0;
@@ -111,7 +111,7 @@ div.mochaToolbarWrapper.bottom {
 
 /* Corner resize handles */
 .mocha .corner {
-    background: #f00;
+    background: #ff0000;
     height: 10px;
     width: 10px;
 }
@@ -229,7 +229,7 @@ div.mochaToolbarWrapper.bottom {
 /* Underlay */
 
 #windowUnderlay {
-    background: #fff;
+    background: #ffffff;
     left: 0;
     position: fixed;
     top: 0;
@@ -276,26 +276,26 @@ div.mochaToolbarWrapper.bottom {
 /* Modals */
 
 .modal2 {
-    border: 8px solid #fff;
+    border: 8px solid #ffffff;
 }
 
 .modal2 .mochaContentBorder {
-    border-width: 0px;
+    border-width: 0;
 }
 
 /* Window Themes */
 
 .mocha.no-canvas {
     background: #e5e5e5;
-    border: 1px solid #555;
+    border: 1px solid #555555;
 }
 
 .mocha.no-canvas .mochaTitlebar {
     background: #e5e5e5;
 }
 
 .mocha.transparent .mochaTitlebar h3 {
-    color: #fff;
+    color: #ffffff;
     display: none;
 }
 
@@ -312,7 +312,7 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mocha.notification .mochaContentBorder {
-    border-width: 0px;
+    border-width: 0;
 }
 
 .mocha.notification .mochaContentWrapper {
@@ -345,20 +345,20 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .jsonExample .mochaTitlebar h3 {
-    color: #ddd;
+    color: #dddddd;
 }
 
 /* This does not work in IE6. */
 .isFocused.jsonExample .mochaTitlebar h3 {
-    color: #fff;
+    color: #ffffff;
 }
 
 #fxmorpherExample .mochaContentWrapper {
     background: #577a9e;
 }
 
 #clock {
-    background: #fff;
+    background: #ffffff;
 }
 
 /* Workaround to make invisible buttons clickable */

src/webui/www/private/css/dynamicTable.css

@@ -105,10 +105,10 @@ div:has(> div.dynamicTableFixedHeaderDiv):not(.invisible) {
 }
 
 .dynamicTableDiv thead th {
-    height: 0px !important;
-    line-height: 0px !important;
-    padding-bottom: 0px !important;
-    padding-top: 0px !important;
+    height: 0 !important;
+    line-height: 0 !important;
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
 }
 
 /* Trackers table */

src/webui/www/private/css/noscript.css

@@ -3,6 +3,6 @@
 }
 
 #noscript {
-    color: #f00;
+    color: #ff0000;
     text-align: center;
 }

src/webui/www/private/css/style.css

@@ -257,7 +257,7 @@ pre {
 
 hr {
     background-color: var(--color-background-default);
-    border: 0px;
+    border: 0;
     color: var(--color-text-default);
     height: 1px;
     margin-bottom: 6px;
@@ -435,8 +435,8 @@ a.propButton img {
 .sliderarea {
     background: #f2f2f2 url("../images/slider-area.gif") repeat-x;
     border: 1px solid #a3a3a3;
-    border-bottom: 1px solid #ccc;
-    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #cccccc;
+    border-left: 1px solid #cccccc;
     font-size: 1px;
     height: 7px;
     left: 0;
@@ -573,7 +573,7 @@ label.tristate {
     display: block;
     float: left;
     height: 13px;
-    margin: 0.15em 8px 5px 0px;
+    margin: 0.15em 8px 5px 0;
     overflow: hidden;
     text-indent: -999em;
     width: 13px;
@@ -785,20 +785,20 @@ td.generalLabel {
 
 .select-watched-folder-editable select {
     border: none;
-    bottom: 0px;
-    left: 0px;
+    bottom: 0;
+    left: 0;
     padding: 0;
     position: absolute;
-    top: 0px;
+    top: 0;
     width: 158px;
 }
 
 .select-watched-folder-editable input {
     border: none;
-    left: 0px;
+    left: 0;
     padding: 0;
     position: absolute;
-    top: 0px;
+    top: 0;
     width: 140px;
 }
 

src/webui/www/private/css/vanillaSelectBox.css

@@ -55,13 +55,13 @@ li[data-parent].open:not(.hidden-search) {
 }
 
 li.disabled {
-    background-color: #999;
+    background-color: #999999;
     cursor: not-allowed;
     opacity: 0.3;
 }
 
 li.overflow {
-    background-color: #999;
+    background-color: #999999;
     cursor: not-allowed;
     opacity: 0.3;
 }
@@ -140,7 +140,7 @@ li.short {
     height: 11px;
     margin-left: 22px;
     margin-right: 2px;
-    margin-top: 0px;
+    margin-top: 0;
     padding: 1px 3px 2px;
     width: 8px;
 }
@@ -151,7 +151,7 @@ li.short {
     float: left;
     font-size: inherit;
     height: 8px;
-    margin-left: 0px;
+    margin-left: 0;
     transform: rotate(45deg);
     width: 5px;
 }
@@ -194,7 +194,7 @@ li.short {
     font-weight: bold;
     margin-left: -22px;
     margin-right: 2px;
-    margin-top: 0px;
+    margin-top: 0;
     padding: 7px;
 }
 

src/webui/www/public/css/login.css

@@ -28,7 +28,7 @@ body {
 }
 
 #error_msg {
-    color: #f00;
+    color: #ff0000;
     white-space: pre;
 }
 

src/webui/www/public/css/noscript.css

@@ -3,6 +3,6 @@
 }
 
 #noscript {
-    color: #f00;
+    color: #ff0000;
     text-align: center;
 }

src/webui/www/stylelint.config.mjs

@@ -0,0 +1,16 @@
+export default {
+    extends: "stylelint-config-standard",
+    plugins: [
+        "stylelint-order"
+    ],
+    ignoreFiles: ["private/css/lib/*.css"],
+    rules: {
+        "color-hex-length": "long",
+        "comment-empty-line-before": null,
+        "comment-whitespace-inside": null,
+        "no-descending-specificity": null,
+        "order/properties-alphabetical-order": true,
+        "selector-class-pattern": null,
+        "selector-id-pattern": null,
+    }
+};