De-emojify options

2026-07-25 06:54:31 +00:00 · 2022-01-23 17:40:21 -05:00
parent 60dfdcb4cb
commit f9820d1f63
8 changed files with 279 additions and 189 deletions
@@ -0,0 +1,9 @@
+html[global_enable="true"][remove_embedded_end_of_video="true"] .html5-endscreen,
+
+html[global_enable="true"][foo=bar]
+
+{
+
+	display: none !important;
+
+}
@@ -1,162 +1,175 @@

-/* Setting is enabled. Hide "inactive" class elements. */
-html[remove_homepage="true"] .remove_homepage .inactive,
-html[remove_sidebar="true"] .remove_sidebar .inactive,
-html[remove_sidebar="true"] .remove_sidebar .inactive,
-html[remove_end_of_video="true"] .remove_end_of_video .inactive,
-html[remove_info_cards="true"] .remove_info_cards .inactive,
-html[remove_home_link="true"] .remove_home_link .inactive,
-html[remove_logo_link="true"] .remove_logo_link .inactive,
-html[remove_explore_link="true"] .remove_explore_link .inactive,
-html[remove_infinite_scroll="true"] .remove_infinite_scroll .inactive,
-html[remove_all_but_one="true"] .remove_all_but_one .inactive,
-html[remove_shorts="true"] .remove_shorts .inactive,
-html[remove_thumbnail_mouseover_effect="true"] .remove_thumbnail_mouseover_effect .inactive,
-html[remove_play_next_button="true"] .remove_play_next_button .inactive,
-html[remove_comments="true"] .remove_comments .inactive,
-html[remove_chat="true"] .remove_chat .inactive,
-html[redirect_off="true"] .redirect_off .inactive,
-html[redirect_to_subs="true"] .redirect_to_subs .inactive,
-html[redirect_to_wl="true"] .redirect_to_wl .inactive,
-html[foo=bar]
-{
-	display:  none;
-}
-
-/* Setting is not enabled. Hide "active" class elements. */
-html[remove_homepage="false"] .remove_homepage .active,
-html[remove_sidebar="false"] .remove_sidebar .active,
-html[remove_sidebar="false"] .remove_sidebar .active,
-html[remove_end_of_video="false"] .remove_end_of_video .active,
-html[remove_info_cards="false"] .remove_info_cards .active,
-html[remove_home_link="false"] .remove_home_link .active,
-html[remove_logo_link="false"] .remove_logo_link .active,
-html[remove_explore_link="false"] .remove_explore_link .active,
-html[remove_infinite_scroll="false"] .remove_infinite_scroll .active,
-html[remove_all_but_one="false"] .remove_all_but_one .active,
-html[remove_shorts="false"] .remove_shorts .active,
-html[remove_thumbnail_mouseover_effect="false"] .remove_thumbnail_mouseover_effect .active,
-html[remove_play_next_button="false"] .remove_play_next_button .active,
-html[remove_comments="false"] .remove_comments .active,
-html[remove_chat="false"] .remove_chat .active,
-html[redirect_off="false"] .redirect_off .active,
-html[redirect_to_subs="false"] .redirect_to_subs .active,
-html[redirect_to_wl="false"] .redirect_to_wl .active,
-html[foo=bar]
-{
-	display: none;
-}
-
 /* Global enable/disable buttons  */
 html[global_enable="false"] input.global_enable.enabled,
-html[global_enable="true"] input.global_enable.disabled,
+html[global_enable="true"]  input.global_enable.disabled,
 html[foo=bar]
 {
-	display: none !important;
-	background-color: gray;
+  display: none !important;
+  background-color: gray;
 }

-/* Enable visual cues when the extension is disabled */
-html[global_enable="false"] #primary_options
-{
-	background-color: gray;
-}
+/* Visual cues when the extension is enabled vs. disabled */
+/*#toggle-svg-outer-path { transition: fill 0.1s }*/
+#toggle-svg-circle { transition: cx 0.1s }
+html[global_enable="true"] #toggle-svg-circle { cx: 11px }
+html[global_enable="true"] #toggle-svg-outer-path { fill: green }
+/*html[global_enable="true"] #toggle-svg-inner-path { opacity: 0 }*/
+
+#primary_options { transition: background-color 0.2s }
+#primary_options * { transition: color 0.2s }
+html[global_enable="false"] #primary_options { background-color: gray }
 html[global_enable="false"] #primary_options *
 {
-	pointer-events: none;
-	color: white;
+  pointer-events: none;
+  color: white;
 }
 html[global_enable="false"] #primary_options .inactive,
 html[global_enable="false"] #primary_options .active,
-html[foo=bar]
-{
-	visibility: hidden;
+html[foo=bar] { visibility: hidden }
+
+
+/* Begin Main styling */
+html, body { height: 100% }
+
+/* Begin header */
+#header {
+  overflow: auto;
+}
+#header-contents {
+  position: relative;
+  overflow: auto;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+}
+#header-logo {
+  position: absolute;
+  height: 95%;
+
+  /* center vertically */
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+#header-logo:hover {
+  height: 98%;
+}
+#header-text {
+  margin-left: 30px;
+  font-size: 16px;
+}
+.header-toggle {
+  position: absolute;
+  left: calc(100% - 30px);
+  /*float: right;*/
+  height: 95%;
+
+  /* center vertically */
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+
+/* Begin options  */
+#primary_options {
+  height: 300px;
+  overflow: scroll;
+  transition: box-shadow 0.1s;
+  padding: 2px;
+}
+#primary_options:hover {
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.30);
 }

 #primary_options div {
-	height: 16px;
+  height: 16px;
+}
+
+#primary_options fieldset:not(:nth-child(1)) {
+  margin-top: 5px;
 }

 .option_name_container {
-	cursor: default;
+  cursor: default;
 }

 /* Redirect options */
 .redirect_link {
-	text-decoration: none;
+  text-decoration: none;
 }
 .redirect_off, .redirect_to_subs, .redirect_to_wl {
-	display: inline-block;
+  display: inline-block;
 }

 /* General formatting */
 body {
-	min-width: 300px;
-	max-width: 800px;
-	max-height: 600px;
+  min-width: 300px;
+  max-width: 800px;
+  max-height: 600px;

-	/*border-width: 4.5px;*/
-	/*border-style: solid;*/
-	/*border-color: rgba(0,0,0,0.7);*/
+  /*border-width: 4.5px;*/
+  /*border-style: solid;*/
+  /*border-color: rgba(0,0,0,0.7);*/

-	padding: 2px 2px 2px 2px;
+  padding: 2px 2px 2px 2px;
 }

-body * {
-	font-size: 12px;
-	font-family: Helvetica;
+body, body * {
+  font-size: 12px;
+  font-family: Helvetica;
 }

 #logo_container img {
-	width: 32px;
-	height: auto;
+  width: 32px;
+  height: auto;
 }

 #header_legend {
-	font-size: larger;
-	text-align: center;
+  font-size: larger;
+  text-align: center;
 }

 #header_container * {
-	text-align: center;
+  text-align: center;
 }

 #reload_header {
-	text-align: center;
-	margin-bottom: 5px;
+  text-align: center;
+  margin-bottom: 5px;
 }

 #reload_container {
-	text-align: center;
+  text-align: center;

-	padding: 4px;
-	border-width: 2px;
-	border-style: groove;
-	border-color: gray;
+  padding: 4px;
+  border-width: 2px;
+  border-style: groove;
+  border-color: gray;

-	margin: 4px 2px 1px 2px;
+  margin: 4px 2px 1px 2px;
 }

 #help_container {
-	text-align: left;
-	padding: 8px;
-	border-width: 2px;
-	border-style: groove;
-	border-color: gray;
+  text-align: left;
+  padding: 8px;
+  border-width: 2px;
+  border-style: groove;
+  border-color: gray;

-	margin: 4px 2px 1px 2px;
+  margin: 4px 2px 1px 2px;
 }

 .crypto_address {
-	font-size: 7px;
-	font-family: monospace;
+  font-size: 7px;
+  font-family: monospace;
 }

 a {
-	color: #000000;
+  color: #000000;
 }

 .minor_text {
-	font-size: 10px;
-	font-style: italic;
+  font-size: 10px;
+  font-style: italic;
 }
@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="150.000000pt" height="150.000000pt" viewBox="0 0 150.000000 150.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
+fill="#FB0006" stroke="none">
+<path d="M378 1480 c-122 -12 -206 -31 -241 -54 -40 -28 -85 -114 -97 -191
+-23 -139 -34 -489 -22 -702 15 -255 24 -313 59 -383 33 -64 74 -95 146 -109
+205 -42 853 -42 1055 0 101 21 159 100 182 249 18 115 25 642 11 801 -18 197
+-34 254 -94 317 -41 42 -98 58 -260 72 -142 11 -619 11 -739 0z m622 -730 l0
+-250 -250 0 -250 0 0 250 0 250 250 0 250 0 0 -250z"/>
+</g>
+</svg>
@@ -1,34 +0,0 @@
-
-if (typeof browser === 'undefined') {
-  browser = typeof chrome !== 'undefined' ? chrome : null;
-}
-
-//  Cache values needed for redirect
-let cachedGlobalEnable, cachedRedirectUrl;
-const defaultCache = {
-  globalEnable: true,
-  redirect: false
-}
-browser.storage.local.get(defaultCache, setting => {
-  cachedGlobalEnable = setting['globalEnable'];
-  cachedRedirectUrl = setting['redirect'];
-});
-
-// Listen for changes to cached values.
-browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  const { globalEnable, redirectUrl } = request;
-  cachedGlobalEnable = globalEnable ?? cachedGlobalEnable;
-  cachedRedirectUrl = redirectUrl ?? cachedRedirectUrl;
-  return true;
-});
-
-// Redirect
-browser.webRequest.onBeforeRequest.addListener(details => {
-  if (cachedGlobalEnable === false) return;
-  if (cachedRedirectUrl) return { redirectUrl: cachedRedirectUrl };
-}, { urls: [
-      "*://youtube.com/",
-      "*://www.youtube.com/",
-    ] },
-  ["blocking"]
-);
@@ -44,12 +44,18 @@ const REDIRECT_OPTIONS_TEMPLATE = REDIRECT_KEYS.reduce((options, key) => {
 document.addEventListener("DOMContentLoaded", () => {

  // Defaults.
-  Object.entries(SETTINGS_LIST).forEach(([key, { defaultValue: value }]) => HTML.setAttribute(key, value));
+  Object.entries(SETTINGS_LIST).forEach(([key, { defaultValue: value }]) => {
+    const settingButton = document.getElementById(key);
+    if (settingButton) settingButton.checked = value;
+    HTML.setAttribute(key, value);
+  });

  // Sync with local settings.
  browser && browser.storage.local.get(localSettings => {
    Object.entries(localSettings).forEach(([key, value]) => {
      if (!VALID_SETTINGS.includes(key)) return;
+      const settingButton = document.getElementById(key);
+      if (settingButton) settingButton.checked = value;
      HTML.setAttribute(key, value);
    });
  });
@@ -66,7 +72,7 @@ Object.entries(SETTINGS_LIST).forEach(([key, { eventType }]) => {

    let saveObj, messageObj;

-    // Handle standard settings.
+    // Handle standard (non-redirect) settings.
    if (!key.includes('redirect')) {
      saveObj = { [key]: value };
      messageObj = [{ key, value }];
@@ -91,6 +97,11 @@ Object.entries(SETTINGS_LIST).forEach(([key, { eventType }]) => {

    // Update options page.
    Object.entries(saveObj).forEach(([key, value]) => HTML.setAttribute(key, value));
+    if ('checked' in button) button.checked = value;
+    if (key === 'global_enable') {
+      const inputs = Array.from(document.querySelectorAll('input'));
+      inputs.forEach(input => input.disabled = !value );
+    }

    if (browser) {

@@ -100,7 +111,9 @@ Object.entries(SETTINGS_LIST).forEach(([key, { eventType }]) => {
      // Update running tabs.
      if (messageObj) {
        browser.tabs.query({}, tabs => {
-          tabs.forEach(tab => browser.tabs.sendMessage(tab.id, messageObj));
+          tabs.forEach(tab => {
+            browser.tabs.sendMessage(tab.id, messageObj).catch(e => console.log(e));
+          });
        });
      }
    }
@@ -0,0 +1,39 @@
+/*
+ * Used for redirects.
+ */
+
+
+if (typeof browser === 'undefined') {
+  browser = typeof chrome !== 'undefined' ? chrome : null;
+}
+
+//  Cache values needed for redirect
+const cache = {
+  globalEnable: true,
+  redirect: false,
+  redirectUrl: null,
+};
+browser.storage.local.get(cache, setting => {
+  Object.entries(setting).forEach((key, val) => {
+    cache[key] = val;
+  })
+});
+
+// Listen for changes to cached values.
+browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  request && Object.entries(cache).forEach((key, val) => {
+    cache[key] = request[key] ?? val;
+  });
+});
+
+// Redirect
+browser.webRequest.onBeforeRequest.addListener(details => {
+  const { globalEnable, redirect, redirectUrl } = cache;
+  if (globalEnable === false) return;
+  if (redirect) return { redirectUrl };
+}, { urls: [
+      "*://youtube.com/",
+      "*://www.youtube.com/",
+    ] },
+  ["blocking"]
+);
@@ -3,7 +3,7 @@
  "description": "Stop the YouTube rabbit hole. Customize YouTube's user interface to be less engaging.",
  "homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions",
  "manifest_version": 2,
-  "version": "4.1.6",
+  "version": "4.1.7",

  "icons": {
    "16": "images/16.png",
@@ -13,7 +13,7 @@
  },

  "background": {
-    "scripts": ["js/background.js"],
+    "scripts": ["js/redirect.js"],
    "persistent": true
  },

@@ -41,7 +41,10 @@
      "128": "images/128.png"
    }
  },
-
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  },
  "permissions": [
    "storage",
    "webRequest",
@@ -8,65 +8,82 @@
  </head>

  <body>
-    <fieldset>
-      <legend id="header_legend">Remove Youtube Suggestions</legend>
-      <div id="header_container">
-        <div id="logo_container">
-          <img src="images/64.png"></img>
-        </div>
-        <div id="enable_container">
-          <input type=button class="global_enable enabled" value=Disable />
-          <input type=button class="global_enable disabled" value=Enable />
-        </div>
+    <div id='header'>
+      <div id='header-contents'>
+        <img id='header-logo' src="images/rys.svg"></img>
+        <div id='header-text'>Remove Youtube Suggestions</div>
+        <svg id="toggle-svg" class='global_enable header-toggle' version="1.1" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path id='toggle-svg-outer-path' fill="gray"  d="M 11,  3 H 5 C 2.239, 3, 0, 5.239, 0,  8 s 2.239, 5, 5, 5 h 6 c 2.761, 0, 5 -2.239, 5 -5 S 13.761,  3, 11,  3 z"/>
+          <!-- <path id='toggle-svg-inner-path' fill="white" d="M 11, 12 H 5 c -2.206, 0 -4 -1.794 -4 -4 s 1.794 -4, 4 -4 h 6 c 2.206, 0, 4, 1.794, 4, 4 S 13.206, 12, 11, 12 z"/> -->
+          <circle id='toggle-svg-circle' fill="white" cx="5" cy="8" r="3"/>
+        </svg>
      </div>
-    </fieldset>
+    </div>

    <div id="primary_options">
      <fieldset>
-        <legend>Remove Suggestions</legend>
+        <legend></legend>

-        <div class="remove_homepage">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Homepage</div>
+        <div>
+            <input type="checkbox" id="remove_homepage" class="remove_homepage"
+                   value="remove_homepage" checked />
+            <label for="remove_homepage">Homepage</label>
        </div>

-        <div class="remove_sidebar">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Sidebar</div>
+        <div>
+            <input type="checkbox" id="remove_sidebar" class="remove_sidebar"
+                   value="remove_sidebar" checked />
+            <label for="remove_sidebar">Sidebar</label>
        </div>

-        <div class="remove_end_of_video">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> End of video</div>
+        <div>
+            <input type="checkbox" id="remove_end_of_video" class="remove_end_of_video"
+                   value="remove_end_of_video" checked />
+            <label for="remove_end_of_video">End of video</label>
        </div>
      </fieldset>

      <fieldset>
        <legend>Homepage</legend>

-        <div class="remove_all_but_one">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> All but first row</div>
+        <div>
+            <input type="checkbox" id="remove_all_but_one" class="remove_all_but_one"
+                   value="remove_all_but_one" unchecked />
+            <label for="remove_all_but_one">All but first row</label>
        </div>

-        <div class="remove_infinite_scroll">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Infinite scroll</div>
+        <div>
+            <input type="checkbox" id="remove_infinite_scroll" class="remove_infinite_scroll"
+                   value="remove_infinite_scroll" unchecked />
+            <label for="remove_infinite_scroll">Infinite scroll</label>
        </div>

-        <div class="remove_shorts">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Shorts</div>
+        <div>
+            <input type="checkbox" id="remove_shorts" class="remove_shorts"
+                   value="remove_shorts" unchecked />
+            <label for="remove_shorts">Shorts</label>
        </div>
      </fieldset>

      <fieldset>
        <legend>Navigation</legend>

-        <div class="remove_logo_link">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Logo link</div>
+        <div>
+            <input type="checkbox" id="remove_logo_link" class="remove_logo_link"
+                   value="remove_logo_link" unchecked />
+            <label for="remove_logo_link">Logo link</label>
        </div>

-        <div class="remove_home_link">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Home link</div>
+        <div>
+            <input type="checkbox" id="remove_home_link" class="remove_home_link"
+                   value="remove_home_link" unchecked />
+            <label for="remove_home_link">Home link</label>
        </div>

-        <div class="remove_explore_link">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Explore link</div>
+        <div>
+            <input type="checkbox" id="remove_explore_link" class="remove_explore_link"
+                   value="remove_explore_link" unchecked />
+            <label for="remove_explore_link">Explore link</label>
        </div>

      </fieldset>
@@ -74,51 +91,65 @@
      <fieldset>
        <legend>More</legend>

-        <div class="remove_thumbnail_mouseover_effect">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Thumbnail mouseover effect</div>
+        <div>
+            <input type="checkbox" id="remove_info_cards" class="remove_info_cards"
+                   value="remove_info_cards" unchecked />
+            <label for="remove_info_cards">Info cards <a class='minor_text'>in-video</a></label>
        </div>

-        <div class="remove_play_next_button">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Play next button</div>
+        <div>
+            <input type="checkbox" id="remove_play_next_button" class="remove_play_next_button"
+                   value="remove_play_next_button" unchecked />
+            <label for="remove_play_next_button">Play next button</label>
        </div>

-        <div class="remove_comments">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Comments</div>
+        <div>
+            <input type="checkbox" id="remove_comments" class="remove_comments"
+                   value="remove_comments" unchecked />
+            <label for="remove_comments">Comments</label>
        </div>

-        <div class="remove_chat">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Chat <a class='minor_text'>streaming</a></div>
+        <div>
+            <input type="checkbox" id="remove_thumbnail_mouseover_effect" class="remove_thumbnail_mouseover_effect"
+                   value="remove_thumbnail_mouseover_effect" unchecked />
+            <label for="remove_thumbnail_mouseover_effect">Thumbnail slideshow</label>
        </div>

-        <div class="remove_info_cards">
-          <div class="option_name_container"><a class="active">🚫</a><a class="inactive">🟢</a> Info cards <a class='minor_text'>in-video</a></div>
+        <div>
+            <input type="checkbox" id="remove_chat" class="remove_chat"
+                   value="remove_chat" unchecked />
+            <label for="remove_chat">Chat <a class='minor_text'>streaming</a></label>
        </div>
      </fieldset>

      <fieldset>
        <legend>Redirect the<a class="redirect_link" href="https://www.youtube.com/" target="_blank"> homepage ↗️</a></legend>

-        <div class="redirect_off">
-          <div class="option_name_container"><a class="active">➡️</a><a class="inactive">⬜</a> off</div>
+        <div>
+            <input type="radio" id="redirect_to_subs" class="redirect_to_subs" name="redirect"
+                   value="redirect_to_subs" unchecked />
+            <label for="redirect_to_subs">to Subscriptions</label>
+            <a class="redirect_link" href="https://www.youtube.com/feed/subscriptions" target="_blank">↗️</a>
        </div>

        <div>
-          <div class="redirect_to_subs">
-            <div class="option_name_container"><a class="active">➡️</a><a class="inactive">⬜</a> to Subscriptions</div>
-          </div>
-          <a class="redirect_link" href="https://www.youtube.com/feed/subscriptions" target="_blank">↗️</a>
+            <input type="radio" id="redirect_to_wl" class="redirect_to_wl" name="redirect"
+                   value="redirect_to_wl" unchecked />
+            <label for="redirect_to_wl">to Watch Later </label>
+            <a class="redirect_link" href="https://www.youtube.com/playlist/?list=WL" target="_blank">↗️</a>
        </div>

        <div>
-          <div class="redirect_to_wl">
-            <div class="option_name_container"><a class="active">➡️</a><a class="inactive">⬜</a> to Watch Later </div>
-          </div>
-          <a class="redirect_link" href="https://www.youtube.com/playlist/?list=WL" target="_blank">↗️</a>
+            <input type="radio" id="redirect_off" class="redirect_off" name="redirect"
+                   value="redirect_off" checked />
+            <label for="redirect_off">off</label>
        </div>

      </fieldset>
+
    </div>

+
    <div id="reload_container">
      <div id="reload_header">
        Not loading correctly?