Use aria-label for Preferences selector (#2181)

* Use aria-label for Preferences selector instead of fragile selector
* Remove note about fragile selector
* Remove unused "style" code

Author: mquevill

source/browser.ts

@@ -222,11 +222,6 @@ async function openHiddenPreferences(): Promise<boolean> {
 	if (!isPreferencesOpen()) {
 		document.documentElement.classList.add('hide-preferences-window');
 
-		const style = document.createElement('style');
-		// Hide both the backdrop and the preferences dialog
-		style.textContent = `${selectors.preferencesSelector} ._3ixn, ${selectors.preferencesSelector} ._59s7 { opacity: 0 !important }`;
-		document.body.append(style);
-
 		await openPreferences();
 
 		return true;
@@ -661,7 +656,7 @@ async function openPreferences(): Promise<void> {
 }
 
 function isPreferencesOpen(): boolean {
-	return Boolean(document.querySelector<HTMLElement>('[aria-label=Preferences]'));
+	return Boolean(document.querySelector<HTMLElement>(selectors.preferencesSelector));
 }
 
 async function closePreferences(): Promise<void> {

source/browser/selectors.ts

@@ -17,8 +17,7 @@ export default {
 	userMenuNewSidebar: '[role=navigation]  > div >  div:nth-child(2) > div > div > div:nth-child(1) [role=button]',
 	viewsMenu: '.x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x193iq5w.xdj266r',
 	selectedConversation: '[role=navigation] [role=grid] [role=row] [role=gridcell] [role=link][aria-current=page]',
-	// ! Very fragile selector (most likely cause of hidden dialog issue)
-	preferencesSelector: 'div[role=dialog][class="x1n2onr6 x1ja2u2z x1afcbsf x78zum5 xdt5ytf x1a2a7pz x6ikm8r x10wlt62 x71s49j x1jx94hy x1g2kw80 xxadwq3 x16n5opg x3hh19s xl7ujzl x1kl8bxo xhkep3z xb3b7hn xwhkkir xeb55yp x17omtbh"]',
+	preferencesSelector: '[aria-label=Preferences]',
 	// TODO: Fix this selector for new design
 	messengerSoundsSelector: '._374d ._6bkz',
 	conversationMenuSelectorNewDesign: '[role=menu]',