prefix custom style classes

timche · Feb 13, 2022 · aac0e53 · aac0e53
1 parent 0379f95
commit aac0e53
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 52 deletions.
diff --git a/src/main/account-views/custom-styles/index.ts b/src/main/account-views/custom-styles/index.ts
@@ -30,8 +30,23 @@ export function setBurgerMenuOffset(view: BrowserView) {
   )
 }
 
-export function setCustomStyle(key: ConfigKey, enabled: boolean): void {
-  sendToAccountViews('set-custom-style', key, enabled)
+export type CustomStyleKey =
+  | ConfigKey.CompactHeader
+  | ConfigKey.HideFooter
+  | ConfigKey.HideSupport
+
+const keyToClassMap: Pick<Record<ConfigKey, string>, CustomStyleKey> = {
+  compactHeader: 'compact-header',
+  hideFooter: 'hide-footer',
+  hideSupport: 'hide-support'
+}
+
+export function setCustomStyle(key: CustomStyleKey, enabled: boolean): void {
+  sendToAccountViews(
+    'set-custom-style',
+    `gmail-desktop_${keyToClassMap[key]}`,
+    enabled
+  )
 }
 
 function initFullScreenStyles(view: BrowserView): void {
@@ -53,8 +68,8 @@ export function initCustomStyles(view: BrowserView): void {
     ConfigKey.CompactHeader,
     ConfigKey.HideFooter,
     ConfigKey.HideSupport
-  ]) {
-    setCustomStyle(key, config.get(key) as boolean)
+  ] as CustomStyleKey[]) {
+    setCustomStyle(key, config.get(key)!)
   }
 
   setBurgerMenuOffset(view)

diff --git a/src/main/account-views/custom-styles/style.css b/src/main/account-views/custom-styles/style.css
@@ -1,4 +1,4 @@
-.urlPreview {
+.gmail-desktop_url-preview {
   position: absolute;
   left: 0;
   bottom: 0;
@@ -11,31 +11,31 @@
 }
 
 /* Header: Gmail logo */
-.compactHeader header > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type,
-.compactHeader header > div:nth-child(2) > div:first-of-type > div:nth-child(4),
+.gmail-desktop_compact-header header > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:first-of-type > div:nth-child(4),
 /* Header: Support */
-.compactHeader header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > a:first-of-type,
-.compactHeader header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > div:first-of-type > a,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > a:first-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > div:first-of-type > a,
 /* Header: Support (with Google Chat enabled) */
-.compactHeader header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > div:nth-child(2),
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > div:nth-child(2),
 /* Header: Google apps */
-.compactHeader header > div:nth-child(2) > div:nth-child(3) > div:first-of-type > div:first-of-type > div:first-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(3) > div:first-of-type > div:first-of-type > div:first-of-type,
 /* Header: Google logo/Google Workspace */
-.compactHeader header > div:nth-child(2) > div:nth-child(3) > div:first-of-type > div[role="button"] > div:first-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(3) > div:first-of-type > div[role="button"] > div:first-of-type,
 /* Footer */
-.hideFooter div[role='contentinfo'] {
+.gmail-desktop_hide-footer div[role='contentinfo'] {
   display: none !important;
 }
 
 /* Header: Inner Containers */
-.compactHeader header > div:nth-child(2) > div:first-of-type,
-.compactHeader header > div:nth-child(2) > div:nth-child(2),
-.compactHeader header > div:nth-child(2) > div:nth-child(3) {
+.gmail-desktop_compact-header header > div:nth-child(2) > div:first-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(2),
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(3) {
   height: 22px !important;
 }
 
 /* Header: Burger Menu */
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:first-of-type
@@ -44,45 +44,49 @@
 }
 
 /* Header: Search */
-.compactHeader header > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
+.gmail-desktop_compact-header
+  header
+  > div:nth-child(2)
+  > div:nth-child(2)
+  > div:nth-child(2) {
   height: 28px !important;
 }
 
-.compactHeader header form > div:nth-child(3) {
+.gmail-desktop_compact-header header form > div:nth-child(3) {
   height: 26px !important;
 }
 
-.compactHeader header form div table {
+.gmail-desktop_compact-header header form div table {
   height: 26px !important;
   font-size: 0.875rem !important;
 }
 
-.compactHeader header input {
+.gmail-desktop_compact-header header input {
   height: 26px !important;
   font-size: 0.875rem !important;
 }
 
-.compactHeader header form button {
+.gmail-desktop_compact-header header form button {
   height: 26px !important;
 }
 
-.compactHeader header form button svg {
+.gmail-desktop_compact-header header form button svg {
   padding: 1px !important;
   margin: 0 !important;
 }
 
-.compactHeader header form div table table td {
+.gmail-desktop_compact-header header form div table table td {
   padding: 0 !important;
   height: 26px !important;
 }
 
-.compactHeader header form input {
+.gmail-desktop_compact-header header form input {
   position: initial !important;
   height: 26px !important;
 }
 
 /* Header: Settings */
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(2)
@@ -94,7 +98,7 @@
 }
 
 /* Header: Account */
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
@@ -107,7 +111,7 @@
   background-color: transparent !important;
 }
 
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
@@ -116,7 +120,7 @@
   background-color: rgb(60 64 67 / 8%) !important;
 }
 
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
@@ -126,7 +130,7 @@
   box-shadow: none !important;
 }
 
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
@@ -136,7 +140,7 @@
   padding: 4px !important;
 }
 
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
@@ -148,15 +152,15 @@
   width: 26px !important;
 }
 
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
   > div:first-of-type
   > div:nth-child(2)
   a
   img:hover,
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
@@ -167,7 +171,7 @@
   box-shadow: none !important;
 }
 
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
@@ -180,7 +184,7 @@
 }
 
 /* Header: Google Chat status button */
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(2)
@@ -191,7 +195,7 @@
 }
 
 /* Header: Google Chat status text and icon */
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(2)
@@ -202,7 +206,7 @@
 }
 
 /* Header: Google Chat status dropdown arrow */
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(2)
@@ -213,7 +217,7 @@
 }
 
 /* Header: Google One account ring */
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)
@@ -225,7 +229,7 @@
   height: 26px !important;
 }
 
-.compactHeader
+.gmail-desktop_compact-header
   header
   > div:nth-child(2)
   > div:nth-child(3)

diff --git a/src/main/account-views/custom-styles/style.macos.css b/src/main/account-views/custom-styles/style.macos.css
@@ -1,25 +1,28 @@
 /* Header: Drag Region */
-.compactHeader header {
+.gmail-desktop_compact-header header {
   -webkit-user-select: none;
   -webkit-app-region: drag;
 }
 
 /* Header: Burger Menu */
-.compactHeader header > div:nth-child(2) > div:first-of-type > div:first-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:first-of-type > div:first-of-type,
 /* Header: Search */
-.compactHeader form,
+.gmail-desktop_compact-header form,
 /* Header: Support */
-.compactHeader header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > a:first-of-type,
-.compactHeader header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > div:first-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > a:first-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > div:first-of-type,
 /* Header: Settings */
-.compactHeader header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > div:last-of-type,
+.gmail-desktop_compact-header header > div:nth-child(2) > div:nth-child(2) > div:last-of-type > div:last-of-type,
 /* Header: Account */
-.compactHeader header div[href*='accounts.google.com'] {
+.gmail-desktop_compact-header header div[href*='accounts.google.com'] {
   -webkit-app-region: no-drag;
 }
 
 /* Header: Burger Menu */
-.compactHeader.burgerMenu header > div:nth-child(2) > div:first-of-type {
+.gmail-desktop_compact-header.gmail-desktop_burger-menu-offset
+  header
+  > div:nth-child(2)
+  > div:first-of-type {
   min-width: auto !important;
   margin-left: 70px !important;
   padding-right: 128px !important;

diff --git a/src/main/account-views/preload/index.ts b/src/main/account-views/preload/index.ts
@@ -56,5 +56,7 @@ ipc.on('set-full-screen', (_: Event, enabled: boolean) => {
 })
 
 ipc.on('burger-menu:set-offset', (_event, isOffset: boolean) => {
-  document.body.classList[isOffset ? 'add' : 'remove']('burgerMenu')
+  document.body.classList[isOffset ? 'add' : 'remove'](
+    'gmail-desktop_burger-menu-offset'
+  )
 })
diff --git a/src/main/account-views/preload/url-preview.ts b/src/main/account-views/preload/url-preview.ts
@@ -9,7 +9,7 @@ export function initUrlPreview() {
 
     if ('href' in target && !target.href.startsWith(gmailUrl)) {
       urlPreviewElement = document.createElement('div')
-      urlPreviewElement.className = 'urlPreview'
+      urlPreviewElement.className = 'gmail-desktop_url-preview'
       urlPreviewElement.style.color = darkTheme.text.mediumEmphasis
       urlPreviewElement.style.background = darkTheme.bg[2]
       urlPreviewElement.textContent = target.href

diff --git a/src/main/menus/app.ts b/src/main/menus/app.ts
@@ -17,7 +17,11 @@ import {
   setAutoUpdateCheck
 } from '../updater'
 import config, { ConfigKey } from '../config'
-import { setCustomStyle, userStylesPath } from '../account-views/custom-styles'
+import {
+  CustomStyleKey,
+  setCustomStyle,
+  userStylesPath
+} from '../account-views/custom-styles'
 import log from 'electron-log'
 import { showRestartDialog } from '../utils/dialog'
 import { enableAutoFixUserAgent, removeCustomUserAgent } from '../user-agent'
@@ -39,7 +43,7 @@ import { gitHubRepoUrl, gmailUrl } from '../../constants'
 import { openExternalUrl } from '../utils/url'
 
 interface AppearanceMenuItem {
-  key: ConfigKey
+  key: CustomStyleKey
   label: string
   restartRequired?: boolean
   click?: (checked?: boolean) => void
@@ -69,7 +73,7 @@ export function getAppMenu() {
   }: AppearanceMenuItem): MenuItemConstructorOptions => ({
     label,
     type: 'checkbox',
-    checked: config.get(key) as boolean,
+    checked: config.get(key)!,
     click({ checked }: { checked: boolean }) {
       config.set(key, checked)