Merge branch 'v5' into code-quality-experiment

code-charity · Dec 13, 2024 · 632d4fc · 632d4fc
2 parents a60612c + a1028bf
commit 632d4fc
Show file tree

Hide file tree

Showing 16 changed files with 1,340 additions and 1,316 deletions.
diff --git a/.github/README.md b/.github/README.md
diff --git a/.github/workflows/eslint_csslint_jest.yml b/.github/workflows/eslint_csslint_jest.yml
@@ -27,7 +27,7 @@ jobs:
         run: npm install --force
 
       - name: Run eslint
-        run: npx eslint --config=tests/eslint_rules.config.mjs
+        run: npx eslint
         continue-on-error: true
 
       # - name: Run JSLint
@@ -40,11 +40,9 @@ jobs:
       - name: Run npm test
         run: npm test
 
-      - name: Install csslint using npm
-        run: npm install -g csslint@1.0.5
+#      - name: Install csslint using npm
+#        run: npm install -g csslint@1.0.5
 
 #      - name: Lint CSS files
 #        run: |
 #          for file in $(grep -rl --include='*.css' '' ./); do npx csslint --config tests/csslint_rules.json "$file"; done
-
-
diff --git a/.github/workflows/js-lint-test.ymlOLD → .github/workflows/js-lint-test.yml.old b/.github/workflows/js-lint-test.ymlOLD → .github/workflows/js-lint-test.yml.old
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import globals from "globals";
+
+const customGlobals = {
+	extension: "writable",
+	ImprovedTube: "writable",
+	chrome: "readonly",
+}
+
+export default [
+
+js.configs.recommended,
+{
+	languageOptions: {
+		globals: {
+			...customGlobals,
+		  	...globals.browser,
+		},
+	},
+	rules: {
+		"no-unused-vars": [
+			"error",
+			{ destructuredArrayIgnorePattern: "^_" },
+		],
+	},
+},
+
+];
diff --git a/jest.config.js b/jest.config.js
diff --git a/jest.config.json b/jest.config.json
@@ -0,0 +1,8 @@
+{
+	"testPathIgnorePatterns": [
+		"/node_modules/"
+	],
+	"testMatch": [
+		"**/tests/**/*.js"
+	]
+}
diff --git a/js&css/extension/www.youtube.com/general/general.js b/js&css/extension/www.youtube.com/general/general.js
@@ -251,7 +251,7 @@ extension.features.popupWindowButtons = function (event) {
 								event.preventDefault();
 								event.stopPropagation();
 								try { this.parentElement.itPopupWindowButton.dataset.id = this.parentElement.href.match(/(?:[?&]v=|embed\/|shorts\/)([^&?]{11})/)[1] } catch (error) { console.log(error)};
-								ytPlayer = document.querySelector("#movie_player");
+								let ytPlayer = document.querySelector("#movie_player");
 								if (ytPlayer) {width = ytPlayer.offsetWidth * 0.65; height = ytPlayer.offsetHeight * 0.65}
 								else { width = innerWidth * 0.4; height = innerHeight * 0.4; }
 								if (!ytPlayer) {

diff --git a/menu/index.html b/menu/index.html
@@ -1,5 +1,5 @@
 <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
-<title>ImprovedTube</title><style>body{width:320px; max-width:396px; margin:0; min-height:522px; height: 586px; max-height:586px;}</style>
+<title>ImprovedTube</title><style>body{min-width:320px; margin:0; min-height:586px;"}</style>
 <script src="satus.js"></script>
 <script src="skeleton.js"></script>
 <script src="functions.js"></script>
@@ -32,9 +32,4 @@
 <link rel="stylesheet" href="styles/settings.css">
 <link rel="stylesheet" href="styles/themes.css">
 </head><body><div id="loading" style="animation: 3s linear 0s 1 normal none running fadeIn; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid rgb(182, 233, 255); border-radius: 80px; padding: 37px; color: rgb(120, 147, 161);">...asking your browser what settings you made here before...</div>
- <script> if (window.location.href.includes('chrome://extensions/?options=')) {
-    body.style.setProperty('height', '523px', 'important');
-    body.style.setProperty('width', '396px', 'important');
-  } 
-</script> 
 </body></html>
diff --git a/menu/satus.css b/menu/satus.css
@@ -1,42 +1,8 @@
-.satus-section--card, .satus-select, .satus-switch, .satus-switch__content {transition: background-color 0.8s ease-out !important;}
+.satus-section--card, .satus-select, .satus-switch, .satus-switch__content {transition: background-color 0.8s ease-out;}
 .satus-section--card:hover, .satus-select:hover, .satus-switch:hover,  .satus-switch__content:hover  {transition: background-color 0.08s ease-out !important;}
 
-*[data-value][data-value="false"] {margin-bottom: 0; margin-top: 0; transition: margin 0.14s linear !important;}  
-*[data-value][data-value="true"] {margin-bottom: -4.5px !important; margin-top: -3.5px; transition: margin 0.2s linear !important;}
-
-.satus-button--general, .satus-button--appearance, .satus-button--player {
-	margin-left: 9px !important;
-	margin-right: -18px !important;
-	max-width: 272px !important;
-}
-div:not([home-style="list"]) .satus-button--themes, div:not([home-style="list"]) .satus-button--playlist,div:not([home-style="list"])  .satus-button--channel, div:not([home-style="list"]) .satus-button--shortcuts {
-	transform: scale(0.91);
-	margin-top: -10px !important;
-	margin-left: -5px !important;
-	margin-right: -28px !important;
-}
-div:not([home-style="list"]) .satus-button--blocklist, div:not([home-style="list"]) .satus-button--analyzer {
-	transform: scale(0.78);
-	margin-top: -22px !important;
-	margin-left: 110px !important;
-	margin-right: -150px !important;
-}
-
-div[home-style="list"] .satus-button--themes, div[home-style="list"] .satus-button--playlist,div[home-style="list"]  .satus-button--channel, div[home-style="list"] .satus-button--shortcuts {
-	transform: scale(0.92);
-	margin-bottom: -17px !important;
-	margin-left:3px !important;
-	max-width: 197px !important;
-	margin-top:2px !important;
-}
-div[home-style="list"] .satus-button--blocklist, div[home-style="list"] .satus-button--analyzer {
-	transform: scale(0.75);
-	margin-left: 165px !important;
-	max-width: 141px !important;
-	margin-top: -72px !important;
-}
-div[home-style="list"] .satus-button--analyzer {margin-top: -16px !important;}
-
+*[data-value][data-value="false"] {margin-bottom: 0; margin-top: 0; transition: margin 0.14s linear;} 
+*[data-value][data-value="true"] {margin-bottom: -4.5px !important; margin-top: -3.5px; transition: margin 0.2s linear;}
 
 /*--------------------------------------------------------------
 # SCROLLBAR
@@ -714,9 +680,8 @@ As our Syntax markup isnt read for <textarea>, is it?
 --------------------------------------------------------------*/
 
 .satus-section {
-	display: flex;
-
-	flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 
@@ -794,13 +759,11 @@ As our Syntax markup isnt read for <textarea>, is it?
 }
 
 .satus-section--card>[class^='satus']:not(.satus-list):not(.satus-section) {
-	display: flex;
-
 	min-height: 48px;
-	padding: 8px 12px;
 
 	transition: background-color .18s cubic-bezier(.25, .8, .5, 1);
 	text-align: left;
+    padding: 8px 12px;
 
 	border-radius: 0;
 
@@ -860,8 +823,7 @@ As our Syntax markup isnt read for <textarea>, is it?
 	display: flex;
 	flex-direction: column;
 
-	width: 100%;
-	height: 100%;
+	min-height: inherit;
 
 	color: var(--satus-base-foreground);
 	background: var(--satus-base-background);
@@ -1182,26 +1144,21 @@ As our Syntax markup isnt read for <textarea>, is it?
 --------------------------------------------------------------*/
 
 .satus-button {
-	font: inherit;
-
-	position: relative;
-
+    font: inherit;
 	display: inline-flex;
-	overflow: hidden;
-
-	height: 36px;
-	padding: 8px;
+	align-items: center;
+    overflow: hidden;
+    height: 36px;
+    padding: 8px;
 
-	transition: background-color .3s cubic-bezier(.25, .8, .5, 1);
+    transition: background-color .3s cubic-bezier(.25, .8, .5, 1);
 
-	color: inherit;
-	border: none;
-	border-radius: 6px;
-	outline: none;
-	background: transparent;
-
-	appearance: none;
-	align-items: center;
+    color: inherit;
+    border: none;
+    border-radius: 6px;
+    outline: none;
+    background: transparent;
+    appearance: none;
 }
 
 .satus-button:hover {

diff --git a/menu/skeleton.js b/menu/skeleton.js
@@ -243,7 +243,7 @@ extension.skeleton.main = {
 			component: 'iframe',
 			class: 'frame',
 			attr: {
-				'src': 'https://improvedtube.com/wishes',
+				'src': 'https://improvedtube.com/wishes?'+ Date.now(),
 				'style': 'border: none; bottom: 0px; overflow: hidden; width:326px; position: absolute; height:212px; left:-6px !important'
 			}
 		}

diff --git a/menu/styles/home.css b/menu/styles/home.css
@@ -1,25 +1,52 @@
 /*--------------------------------------------------------------
 >>> HOME:
 ----------------------------------------------------------------
+# Section
 # Buttons
 --------------------------------------------------------------*/
 
+/*--------------------------------------------------------------
+# SECTION
+--------------------------------------------------------------*/
+
+.satus-section--home {
+    display: flex/*grid*/;
+    flex-wrap: wrap;
+    padding: 8px;
+
+    /*grid-template-columns: repeat(3, 1fr);
+    grid-row-gap: 8px;*/
+}
+
 /*--------------------------------------------------------------
 # BUTTONS
 --------------------------------------------------------------*/
 
+.satus-button--general,
+.satus-button--player,
+.satus-button--appearance {
+	width: 33%;
+}
+
+.satus-button--shortcuts,
+.satus-button--channel,
+.satus-button--playlist,
+.satus-button--themes {
+	width: 25%;
+}
+
+.satus-button--blocklist,
+.satus-button--analyzer {
+	width: 50%;
+	transform: scale(.9);
+}
+
 .satus-section--home .satus-button {
 	display: flex;
 	flex-direction: column;
+    align-items: center;
 
-	width: calc(100% / 3);
 	height: unset;
-	margin: 8px 0 0;
-	padding: 8px 0;
-}
-
-.satus-base:not([improvedtube-home='list'])[page] .satus-section--home .satus-button {
-	width: 96px;
 }
 
 .satus-section--home .satus-button:focus,
@@ -55,10 +82,7 @@
 }
 
 .satus-section--home .satus-button> :nth-child(2) {
-	overflow: hidden;
-
 	width: 100%;
-	padding: 0 8px;
 
 	text-align: center;
 	white-space: nowrap;