diff --git a/css/new-design/browser.css b/css/new-design/browser.css index 47c1bf0ec..8fb768c7a 100644 --- a/css/new-design/browser.css +++ b/css/new-design/browser.css @@ -13,6 +13,10 @@ html.hide-preferences-window [data-pagelet=root] > div > div:last-child { display: none; opacity: 0; visibility: hidden; + +/* A utility class for temporarily hiding right sidebar */ +html.hide-r-sidebar .rq0escxv.l9j0dhe7.du4w35lb.j83agx80.g5gj957u.rj1gh0hx.buofh1pr.hpfvmrgz.i1fnvgqd.gs1a9yip.owycx6da.btwxx1t3.jb3vyjys.nwf6jgls > div:nth-child(2) { + display: none; } /* Dragable region for macOS */ diff --git a/css/new-design/dark-mode.css b/css/new-design/dark-mode.css index f5f6e7902..a685184b8 100644 --- a/css/new-design/dark-mode.css +++ b/css/new-design/dark-mode.css @@ -23,7 +23,14 @@ } /* Right sidebar: Icon color */ -.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.g5gj957u.f4tghd1a.ifue306u.kuivcneq.t63ysoy8 .a8c37x1j.ms05siws.hwsy1cff.b7h9ocf4 { +.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.g5gj957u.f4tghd1a.ifue306u.kuivcneq.t63ysoy8 +[role=button] svg { + fill: currentColor; + color: var(--primary-text); +} +/* Right sidebar: search icon */ +.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.g5gj957u.f4tghd1a.ifue306u.kuivcneq.t63ysoy8 +[role=button] svg[role=presentation] path { fill: currentColor; color: var(--primary-text); } diff --git a/source/browser.ts b/source/browser.ts index 73975ba18..5279caac4 100644 --- a/source/browser.ts +++ b/source/browser.ts @@ -150,8 +150,49 @@ ipc.answerMain('find', () => { searchBox!.focus(); }); -ipc.answerMain('search', () => { - document.querySelector('._3szo:nth-of-type(1)')!.click(); +async function openSearchInConversation() { + const mainView = document.querySelector('.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.g5gj957u.rj1gh0hx.buofh1pr.hpfvmrgz.i1fnvgqd.gs1a9yip.owycx6da.btwxx1t3.jb3vyjys.nwf6jgls')!; + const rightSidebarIsClosed = Boolean(mainView.querySelector('div:only-child')); + + if (rightSidebarIsClosed) { + document.documentElement.classList.add('hide-r-sidebar'); + document.querySelector('[aria-label="Conversation Information"]')?.click(); + } + + await elementReady(selectors.rightSidebarButtons, {stopOnDomReady: false}); + const buttonList = document.querySelectorAll(selectors.rightSidebarButtons); + console.log(buttonList); + + if (buttonList.length > 4) { + buttonList[4].click(); + } + + // If right sidebar was closed when shortcut was clicked, then close it back. + if (rightSidebarIsClosed) { + document.querySelector('[aria-label="Conversation Information"]')?.click(); + + // Observe sidebar so when it's hidden, remove the utility class. This prevents split + // display of sidebar. + const sidebarObserver = new MutationObserver(records => { + const removedRecords = records.filter(({removedNodes}) => removedNodes.length > 0 && (removedNodes[0] as HTMLElement).tagName === 'DIV'); + + // In case there is a div removed, hide utility class and stop observing + if (removedRecords.length > 0) { + document.documentElement.classList.remove('hide-r-sidebar'); + sidebarObserver.disconnect(); + } + }); + + sidebarObserver.observe(mainView, {childList: true, subtree: true}); + } +} + +ipc.answerMain('search', (isNewDesign: boolean) => { + if (isNewDesign) { + openSearchInConversation(); + } else { + document.querySelector('._3szo:nth-of-type(1)')!.click(); + } }); ipc.answerMain('insert-gif', () => { diff --git a/source/browser/selectors.ts b/source/browser/selectors.ts index 59ee52c64..4fdb4cad8 100644 --- a/source/browser/selectors.ts +++ b/source/browser/selectors.ts @@ -3,5 +3,6 @@ export default { conversationListNewDesign: '[role=navigation] [role=grid]', conversationSelector: '._4u-c._1wfr .__i_, ._4u-c._1wfr #conversationWindow', conversationSelectorNewDesign: '[aria-label=Messages]', - notificationCheckbox: '._374b:nth-of-type(4) ._4ng2 input' + notificationCheckbox: '._374b:nth-of-type(4) ._4ng2 input', + rightSidebarButtons: '.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.g5gj957u.f4tghd1a.ifue306u.kuivcneq.t63ysoy8 [role=button]' }; diff --git a/source/menu.ts b/source/menu.ts index d824d1bb2..86da1d158 100644 --- a/source/menu.ts +++ b/source/menu.ts @@ -520,7 +520,7 @@ Press Command/Ctrl+R in Caprine to see your changes. const spellCheckerSubmenu: MenuItemConstructorOptions[] = getSpellCheckerLanguages(); - const conversationOptionsSubmenu: MenuItemConstructorOptions[] = [ + const conversationSubmenu: MenuItemConstructorOptions[] = [ { label: 'Mute Conversation', accelerator: 'CommandOrControl+Shift+M', @@ -561,33 +561,21 @@ Press Command/Ctrl+R in Caprine to see your changes. }, { type: 'separator' - } - ]; - - const conversationSearchOptionsSubmenu: MenuItemConstructorOptions[] = [ + }, { label: 'Find Conversation', accelerator: 'CommandOrControl+K', click() { sendAction('find'); } - } - ]; - - if (!isNewDesign) { - conversationSearchOptionsSubmenu.push({ + }, + { label: 'Search in Conversation', accelerator: 'CommandOrControl+F', - visible: isNewDesign, click() { - sendAction('search'); + sendAction('search', isNewDesign); } - }); - } - - conversationSearchOptionsSubmenu.push({type: 'separator'}); - - const conversationMessageOptionsSubmenu: MenuItemConstructorOptions[] = [ + }, { label: 'Insert GIF', accelerator: 'CommandOrControl+G', @@ -633,12 +621,6 @@ Press Command/Ctrl+R in Caprine to see your changes. } ]; - const conversationSubmenu: MenuItemConstructorOptions[] = [ - ...conversationOptionsSubmenu, - ...conversationSearchOptionsSubmenu, - ...conversationMessageOptionsSubmenu - ]; - const helpSubmenu: MenuItemConstructorOptions[] = [ openUrlMenuItem({ label: 'Website',