Fix includeTabMarkers being altered by clicking the browser action bu…

…tton and add setting to hide tab markers with hints global toggle off (#253)

src/background/background.ts

@@ -1,5 +1,4 @@
 import browser from "webextension-polyfill";
-import { store } from "../common/storage";
 import { initBackgroundScript } from "./setup/initBackgroundScript";
 import { toggleHintsGlobal, updateHintsToggle } from "./actions/toggleHints";
 import { toggleKeyboardClicking } from "./actions/toggleKeyboardClicking";
@@ -20,8 +19,7 @@ browser.contextMenus.onClicked.addListener(contextMenusOnClicked);
 browser.runtime.onMessage.addListener(handleRequestFromContent);
 
 browserAction.onClicked.addListener(async () => {
-	const newStatus = await toggleHintsGlobal();
-	await store("includeTabMarkers", newStatus);
+	await toggleHintsGlobal();
 });
 
 browser.commands.onCommand.addListener(async (internalCommand: string) => {

src/common/settings.ts

@@ -31,6 +31,7 @@ export const defaultSettings = {
 	viewportMargin: 1000,
 	urlInTitle: true,
 	includeTabMarkers: true,
+	hideTabMarkersWithGlobalHintsOff: false,
 	uppercaseTabMarkers: true,
 	keyboardClicking: false,
 	keysToExclude: new Array<[string, string]>(),

src/content/settings/watchSettingsChanges.ts

@@ -34,7 +34,6 @@ async function handleSettingsChanges(
 	if (isToggleChange) {
 		await updateHintsEnabled();
 		await notifyTogglesStatus();
-		return;
 	}
 
 	if ("keyboardClicking" in changes) {
@@ -70,13 +69,18 @@ async function handleSettingsChanges(
 	if (
 		"urlInTitle" in changes ||
 		"includeTabMarkers" in changes ||
-		"uppercaseTabMarkers" in changes
+		"uppercaseTabMarkers" in changes ||
+		"hideTabMarkersWithGlobalHintsOff" in changes ||
+		(Object.keys(changes).includes("hintsToggleGlobal") &&
+			getCachedSetting("hideTabMarkersWithGlobalHintsOff"))
 	) {
 		await initTitleDecoration();
 		return;
 	}
 
-	await refresh({ hintsStyle: true, hintsPosition: true });
+	if (!isToggleChange) {
+		await refresh({ hintsStyle: true, hintsPosition: true });
+	}
 }
 
 export function watchSettingsChanges() {

src/content/utils/decorateTitle.ts

@@ -2,6 +2,7 @@ import browser from "webextension-polyfill";
 import { throttle } from "lodash";
 import { getCachedSetting } from "../settings/cacheSettings";
 import { isMainframe } from "../setup/contentScriptContext";
+import { getToggles } from "../settings/toggles";
 
 // Settings
 let urlInTitle: boolean;
@@ -112,8 +113,12 @@ export async function initTitleDecoration() {
 	const previousUrlInTitle = urlInTitle;
 	const previousIncludeTabMarkers = includeTabMarkers;
 
+	const globalHintsOff = getToggles().global;
+
 	urlInTitle = getCachedSetting("urlInTitle");
-	includeTabMarkers = getCachedSetting("includeTabMarkers");
+	includeTabMarkers =
+		getCachedSetting("includeTabMarkers") &&
+		!(!globalHintsOff && getCachedSetting("hideTabMarkersWithGlobalHintsOff"));
 	uppercaseTabMarkers = getCachedSetting("uppercaseTabMarkers");
 
 	if (

src/settings/SettingsComponent.tsx

@@ -194,6 +194,19 @@ export function SettingsComponent() {
 					/>
 				</SettingRow>
 
+				<SettingRow>
+					<Toggle
+						label="Hide tab markers with global hints toggle off"
+						isPressed={settings.hideTabMarkersWithGlobalHintsOff}
+						onClick={() => {
+							handleChange(
+								"hideTabMarkersWithGlobalHintsOff",
+								!settings.hideTabMarkersWithGlobalHintsOff
+							);
+						}}
+					/>
+				</SettingRow>
+
 				<SettingRow>
 					<Toggle
 						label="Use uppercase tab markers"

src/typings/StorageSchema.ts

@@ -70,6 +70,7 @@ export const zStorageSchema = z.object({
 	// Other settings
 	urlInTitle: z.boolean(),
 	includeTabMarkers: z.boolean(),
+	hideTabMarkersWithGlobalHintsOff: z.boolean(),
 	uppercaseTabMarkers: z.boolean(),
 	keyboardClicking: z.boolean(),
 	keysToExclude: z