Separate out in-page-ui-injections CS from global CS

- Somehow this also resulted in the dropping of content_script.css from build, thus it's taken out of the manifest.
- That seems correct as the global CS doesn't have any views.

src/content-scripts/content_script/global.ts

@@ -36,7 +36,6 @@ import { PageAnnotationsCache } from 'src/annotations/cache'
 import type { AnalyticsEvent } from 'src/analytics/types'
 import analytics from 'src/analytics'
 import { main as highlightMain } from 'src/content-scripts/content_script/highlights'
-import { main as InPageUIInjectionMain } from 'src/content-scripts/content_script/in-page-ui-injections'
 import type { PageIndexingInterface } from 'src/page-indexing/background/types'
 import { copyToClipboard } from 'src/annotations/content_script/utils'
 import { getUnderlyingResourceUrl } from 'src/util/uri-utils'
@@ -469,16 +468,6 @@ export async function main(
                 components.highlights.resolve()
             }
 
-            if (component === 'search') {
-                await contentScriptRegistry.registerInPageUIInjectionScript(
-                    InPageUIInjectionMain,
-                    {
-                        searchDisplayProps,
-                    },
-                )
-                return
-            }
-
             if (!components[component]) {
                 components[component] = resolvablePromise<void>()
                 loadContentScript(component)
@@ -501,16 +490,16 @@ export async function main(
     ): Promise<{ annotationId: AutoPk; createPromise: Promise<void> }> {
         const handleError = async (err: Error) => {
             captureException(err)
-            await contentScriptRegistry.registerInPageUIInjectionScript(
-                InPageUIInjectionMain,
-                {
+            inPageUI.loadOnDemandInPageUI({
+                component: 'error-display',
+                options: {
                     errorDisplayProps: {
                         errorMessage: err.message,
                         title: 'Error saving note',
                         blockedBackground: true,
                     },
                 },
-            )
+            })
         }
 
         try {
@@ -996,15 +985,16 @@ export async function main(
             })
             components.tooltip?.resolve()
         },
-        async registerInPageUIInjectionScript(execute, onDemandDisplay) {
+        async registerInPageUIInjectionScript(execute) {
             await execute({
+                inPageUI,
                 syncSettingsBG,
                 syncSettings: createSyncSettingsStore({ syncSettingsBG }),
                 requestSearcher: remoteFunction('search'),
+                searchDisplayProps,
                 annotationsFunctions,
-                onDemandDisplay,
-                bgScriptBG,
             })
+            components.in_page_ui_injections?.resolve()
         },
     }
 
@@ -1047,9 +1037,9 @@ export async function main(
         ) ||
         window.location.href.includes('youtube.com')
     ) {
-        await contentScriptRegistry.registerInPageUIInjectionScript(
-            InPageUIInjectionMain,
-        )
+        inPageUI.loadOnDemandInPageUI({
+            component: 'search-engine-integration',
+        })
     }
 
     const pageHasBookark =
@@ -1137,9 +1127,9 @@ export async function main(
                 ) ||
                 window.location.href.includes('youtube.com')
             ) {
-                await contentScriptRegistry.registerInPageUIInjectionScript(
-                    InPageUIInjectionMain,
-                )
+                inPageUI.loadOnDemandInPageUI({
+                    component: 'youtube-integration',
+                })
             }
 
             await injectCustomUIperPage(
@@ -1226,10 +1216,11 @@ export async function main(
     // so it is included in this global content script where it adds less than 500kb.
     await contentScriptRegistry.registerHighlightingScript(highlightMain)
 
+    await inPageUI.loadComponent('in_page_ui_injections')
     if (areHighlightsEnabled) {
         inPageUI.showHighlights()
         if (!annotationsCache.isEmpty) {
-            inPageUI.loadComponent('sidebar')
+            await inPageUI.loadComponent('sidebar')
         }
     }
 
@@ -1239,7 +1230,7 @@ export async function main(
             showPageActivityIndicator: hasActivity,
         })
         if (await tooltipUtils.getTooltipState()) {
-            await inPageUI.setupTooltip()
+            await inPageUI.loadComponent('tooltip')
         }
     } else {
         if (hasActivity) {
@@ -1248,7 +1239,7 @@ export async function main(
                 showPageActivityIndicator: hasActivity,
             })
             if (await tooltipUtils.getTooltipState()) {
-                await inPageUI.setupTooltip()
+                await inPageUI.loadComponent('tooltip')
             }
         }
     }

src/content-scripts/content_script/in-page-ui-injections.ts

@@ -1,6 +1,65 @@
-import { initInPageUIInjections } from 'src/search-injection/content_script'
-import type { InPageUIInjectionsMain } from 'src/content-scripts/content_script/types'
+import * as constants from '../../search-injection/constants'
+import * as utils from '../../search-injection/utils'
+import { handleRenderSearchInjection } from '../../search-injection/searchInjection'
+import { handleRenderYoutubeInterface } from '../../search-injection/youtubeInterface'
+import { renderErrorDisplay } from '../../search-injection/error-display'
+import { renderSearchDisplay } from '../../search-injection/search-display'
+import type { ContentScriptRegistry, InPageUIInjectionsMain } from './types'
 
-export const main: InPageUIInjectionsMain = async (...options) => {
-    initInPageUIInjections(...options)
+export const main: InPageUIInjectionsMain = async ({
+    inPageUI,
+    annotationsFunctions,
+    requestSearcher,
+    searchDisplayProps,
+    syncSettings,
+    syncSettingsBG,
+}) => {
+    inPageUI.events.on(
+        'injectOnDemandInPageUI',
+        async ({ component, options }) => {
+            if (component === 'error-display') {
+                if (options?.errorDisplayProps) {
+                    renderErrorDisplay(options.errorDisplayProps)
+                }
+            } else if (component === 'dashboard') {
+                renderSearchDisplay(searchDisplayProps)
+            } else if (component === 'youtube-integration') {
+                const url = window.location.href
+                if (url.includes('youtube.com')) {
+                    await handleRenderYoutubeInterface(
+                        syncSettings,
+                        syncSettingsBG,
+                        annotationsFunctions,
+                    )
+                }
+            } else if (component === 'search-engine-integration') {
+                const url = window.location.href
+                const matched = utils.matchURL(url)
+
+                if (matched) {
+                    const searchInjection =
+                        (await syncSettings.searchInjection.get(
+                            'searchEnginesEnabled',
+                        )) ?? constants.SEARCH_INJECTION_DEFAULT
+                    if (searchInjection[matched]) {
+                        try {
+                            const query = utils.fetchQuery(url)
+
+                            await handleRenderSearchInjection(
+                                query,
+                                requestSearcher,
+                                matched,
+                                syncSettings,
+                            )
+                        } catch (err) {
+                            console.error(err)
+                        }
+                    }
+                }
+            }
+        },
+    )
 }
+
+const registry = globalThis['contentScriptRegistry'] as ContentScriptRegistry
+registry.registerInPageUIInjectionScript(main)

src/content-scripts/content_script/tooltip.ts

@@ -1,5 +1,4 @@
 import type { ContentScriptRegistry, TooltipScriptMain } from './types'
-
 import { bodyLoader } from 'src/util/loader'
 import { runOnScriptShutdown } from 'src/in-page-ui/tooltip/utils'
 import {
@@ -15,7 +14,7 @@ import { createInPageUI, destroyInPageUI } from 'src/in-page-ui/utils'
 import { IGNORE_CLICK_OUTSIDE_CLASS } from '../constants'
 
 export const main: TooltipScriptMain = async (options) => {
-    const cssFile = browser.runtime.getURL(`/content_script.css`)
+    const cssFile = browser.runtime.getURL(`/content_script_tooltip.css`)
     let mount: InPageUIRootMount | null = null
     const createMount = () => {
         if (!mount) {
@@ -42,7 +41,7 @@ export const main: TooltipScriptMain = async (options) => {
     options.inPageUI.events.on('componentShouldDestroy', async (event) => {
         if (event.component === 'tooltip') {
             destroyInPageUI('tooltip')
-            await removeTooltip()
+            removeTooltip()
         }
     })
     options.inPageUI.events.on('stateChanged', async (event) => {

src/content-scripts/content_script/types.ts

@@ -6,27 +6,19 @@ import type AnnotationsManager from 'src/annotations/annotations-manager'
 import type { AnnotationInterface } from 'src/annotations/background/types'
 import type { HighlightRendererInterface } from '@worldbrain/memex-common/lib/in-page-ui/highlighting/types'
 import type { ContentFingerprint } from '@worldbrain/memex-common/lib/personal-cloud/storage/types'
-import type { RemoteSyncSettingsInterface } from 'src/sync-settings/background/types'
 import type { PageAnnotationsCacheInterface } from 'src/annotations/cache/types'
 import type { MaybePromise } from 'src/util/types'
 import type { AnalyticsCoreInterface } from '@worldbrain/memex-common/lib/analytics/types'
-import type { SyncSettingsStore } from 'src/sync-settings/util'
-import type { ErrorDisplayProps } from 'src/search-injection/error-display'
 import type { SearchDisplayProps } from 'src/search-injection/search-display'
-import { RemoteBGScriptInterface } from 'src/background-script/types'
+import type { RemoteSyncSettingsInterface } from 'src/sync-settings/background/types'
+import type { SyncSettingsStore } from 'src/sync-settings/util'
 
 export interface ContentScriptRegistry {
     registerRibbonScript(main: RibbonScriptMain): Promise<void>
     registerSidebarScript(main: SidebarScriptMain): Promise<void>
     registerHighlightingScript(main: HighlightsScriptMain): Promise<void>
     registerTooltipScript(main: TooltipScriptMain): Promise<void>
-    registerInPageUIInjectionScript(
-        main: InPageUIInjectionsMain,
-        onDemandDisplay?: {
-            errorDisplayProps?: ErrorDisplayProps
-            searchDisplayProps?: SearchDisplayProps
-        },
-    ): Promise<void>
+    registerInPageUIInjectionScript(main: InPageUIInjectionsMain): Promise<void>
 }
 
 export type SidebarScriptMain = (
@@ -60,6 +52,8 @@ export interface HighlightDependencies {
 }
 
 export interface InPageUIInjectionsDependencies {
+    inPageUI: SharedInPageUIInterface
+    searchDisplayProps: SearchDisplayProps
     requestSearcher: any
     syncSettingsBG: RemoteSyncSettingsInterface
     syncSettings: SyncSettingsStore<
@@ -71,11 +65,6 @@ export interface InPageUIInjectionsDependencies {
         | 'dashboard'
     >
     annotationsFunctions: any
-    onDemandDisplay?: {
-        errorDisplayProps?: ErrorDisplayProps
-        searchDisplayProps?: SearchDisplayProps
-    }
-    bgScriptBG: RemoteBGScriptInterface
 }
 
 export type HighlightsScriptMain = (
@@ -90,8 +79,4 @@ export type InPageUIInjectionsMain = (
     dependencies: InPageUIInjectionsDependencies,
 ) => Promise<void>
 
-export type YoutubeInjectionMain = (
-    dependencies: InPageUIInjectionsDependencies,
-) => Promise<void>
-
 export type GetContentFingerprints = () => Promise<ContentFingerprint[]>

src/content-scripts/types.ts

@@ -3,4 +3,4 @@ export type ContentScriptComponent =
     | 'sidebar'
     | 'ribbon'
     | 'highlights'
-    | 'search_injection'
+    | 'in_page_ui_injections'

src/in-page-ui/keyboard-shortcuts/content_script/index.ts

@@ -101,7 +101,8 @@ function getShortcutHandlers({
             }
         },
         createBookmark: () => inPageUI.showRibbon({ action: 'bookmark' }),
-        openDashboard: () => inPageUI.showSearch(),
+        openDashboard: async () =>
+            inPageUI.loadOnDemandInPageUI({ component: 'dashboard' }),
         openDashboardInNewTab: () =>
             runInBackground<InPageUIInterface<'caller'>>().openDashboard(),
         toggleSidebar: () => inPageUI.toggleSidebar(),

src/in-page-ui/ribbon/react/containers/ribbon/logic.ts

@@ -384,11 +384,13 @@ export class RibbonContainerLogic extends UILogic<
             action: 'rabbit_hole_open',
         })
     }
-    toggleQuickSearch: EventHandler<'toggleQuickSearch'> = async ({
-        previousState,
-    }) => {
-        await this.dependencies.inPageUI.showSearch()
+
+    toggleQuickSearch: EventHandler<'toggleQuickSearch'> = async ({}) => {
+        this.dependencies.inPageUI.loadOnDemandInPageUI({
+            component: 'dashboard',
+        })
     }
+
     toggleTheme: EventHandler<'toggleTheme'> = async ({ previousState }) => {
         await browser.storage.local.set({
             themeVariant: