fix: allow pdf portals to be styled but do it quite badly

src/modules/examples.ts

@@ -2,6 +2,7 @@ import { config } from '../../package.json'
 import { getReaderDocument } from '../utils/getSplitWindow'
 import { getString } from '../utils/locale'
 import { getPref } from '../utils/prefs'
+import { sleep } from '../utils/wait'
 import { cycleFilter } from './ui/filterSchema'
 import { switchTheme } from './ui/switchTheme'
 
@@ -124,8 +125,9 @@ export class UIExampleFactory {
   }
 
   @example
-  static registerToggleButton() {
-    const button = ztoolkit.UI.createElement(document, 'button', {
+  static async registerToggleButton() {
+    sleep(1000)
+    const button = ztoolkit.UI.createElement(window.document, 'button', {
       properties: {
         textContent: config.themes[getPref('current_theme')].icon,
         onclick: () => {
@@ -141,9 +143,9 @@ export class UIExampleFactory {
           'font-size: 1.5em; background: transparent; border-left: none; border-right: none;border-top: none; border-bottom: .5px solid #a9a9a9;',
       },
     })
-    document.querySelector('#tab-bar-container')?.prepend(button)
+    window.document.querySelector('#tab-bar-container')?.prepend(button)
 
-    document
+    window.document
       .querySelector('#main-window')
       ?.setAttribute('theme', getPref('current_theme'))
   }

src/modules/ui/filterSchema.ts

@@ -58,19 +58,22 @@ export const getFilterByID = (id: number) => {
 }
 
 export const getReaderFilters = (reader: _ZoteroTypes.ReaderInstance) => {
-  const primary = getReaderDocument(reader, false)?.querySelector(
+  const primary = getReaderDocument(reader, 'primary')?.querySelector(
     `#${filterId}`,
   )
   const secondary = getReaderDocument(reader)?.querySelector(`#${filterId}`)
+  const portal = getReaderDocument(reader, 'portal')?.querySelector(
+    `#${filterId}`,
+  )
 
   ztoolkit.log(
     'getReaderFilters',
     primary,
     secondary,
-    getReaderDocument(reader),
+    getReaderDocument(reader, 'portal'),
   )
 
-  return [primary, secondary]
+  return [primary, secondary, portal]
 }
 
 export function readerHasFilter(reader: _ZoteroTypes.ReaderInstance) {
@@ -139,25 +142,24 @@ export function addFilterToReader(
   key ??= currentFilter.name ?? getDefaultFilter()
   ztoolkit.log('KEY', currentFilter, key)
 
-  const primaryDocument = getReaderDocument(reader, false)
+  const primaryDocument = getReaderDocument(reader, 'primary')
   const secondaryDocument = getReaderDocument(reader)
+  const portalDocument = getReaderDocument(reader, 'portal')
 
-  ;[primaryDocument, secondaryDocument].forEach(async (doc, idx) => {
-    if (!doc) {
-      ztoolkit.log('addFilterToReader', 'no document')
-      return
-    }
+  ;[primaryDocument, secondaryDocument, portalDocument].forEach(
+    async (doc, idx) => {
+      if (!doc) {
+        ztoolkit.log('addFilterToReader', 'no document')
+        return
+      }
 
-    if (idx === 1) {
-      //    await sleep(100)
-    }
+      ztoolkit.log('addFilterToReader', 'doc', idx, doc)
 
-    ztoolkit.log('addFilterToReader', 'doc', idx, doc)
+      const filterElement = createOrReplaceFilterElement(doc, key!)
 
-    const filterElement = createOrReplaceFilterElement(doc, key!)
-
-    // doc?.head?.appendChild(filterElement)
-  })
+      // doc?.head?.appendChild(filterElement)
+    },
+  )
 
   saveFiltersByID({
     id: reader.itemID!,

src/modules/ui/registerReader.ts

@@ -20,16 +20,19 @@ export async function registerReader() {
     attachTabStylesToReaderWindow(doc!)
 
     await waitUtilAsync(() => {
-      const doc = getReaderDocument(instance, false)
+      const doc = getReaderDocument(instance, 'primary')
       return !!doc
     })
-    const viewerDoc = getReaderDocument(instance, false)
+    const viewerDoc = getReaderDocument(instance, 'primary')
 
     if (viewerDoc) {
       attachTabStylesToReaderWindow(viewerDoc!)
     }
 
     addSplitMutationObserver(instance)
+
+    attachTabStylesToReaderWindow(getReaderDocument(instance, 'portal')!)
+
     try {
       await waitUtilAsync(() => {
         const secondviewdoc = getReaderDocument(instance)
@@ -157,7 +160,10 @@ function addFilterToggleButton(reader: _ZoteroTypes.ReaderInstance) {
 const existingStyle = (element: HTMLElement | Document) =>
   element.querySelector('#pageStyle')
 
-function attachTabStylesToReaderWindow(doc: Document) {
+function attachTabStylesToReaderWindow(doc?: Document) {
+  if (!doc) {
+    return
+  }
   const alreadyExistingStyle = existingStyle(doc)
 
   const props: TagElementProps = {

src/modules/ui/switchTheme.ts

@@ -45,8 +45,15 @@ export function switchTheme(theme: z.infer<typeof prefsSchema.current_theme>) {
 
   const readers = Zotero.Reader._readers
   for (const reader of readers) {
+    const mainDoc = getReaderDocument(reader, 'primary')
     const secondDoc = getReaderDocument(reader)
-    for (const doc of [reader?._iframeWindow?.document, secondDoc]) {
+    const portalDoc = getReaderDocument(reader, 'portal')
+    for (const doc of [
+      reader?._iframeWindow?.document,
+      mainDoc,
+      secondDoc,
+      portalDoc,
+    ]) {
       if (!doc) {
         continue
       }

src/utils/getSplitWindow.ts

@@ -1,21 +1,23 @@
 export function getReaderDocument(
   reader: _ZoteroTypes.ReaderInstance,
-  secondary = true,
+  type: 'secondary' | 'primary' | 'portal' = 'secondary',
 ) {
   const readerDocument = reader._iframeWindow?.document
 
   if (!readerDocument) {
     return null
   }
 
-  const secondaryIFrame = readerDocument.querySelector<HTMLIFrameElement>(
-    `#${secondary ? 'secondary' : 'primary'}-view iframe`,
+  const iframe = readerDocument.querySelector<HTMLIFrameElement>(
+    `#${type}-view iframe`,
   )
 
-  if (!secondaryIFrame) {
+  if (!iframe) {
     return null
   }
 
-  const secondaryReaderDocument = secondaryIFrame.contentDocument
+  const secondaryReaderDocument = iframe.contentDocument
+
+  ztoolkit.log('getReaderDocument', secondaryReaderDocument, type)
   return secondaryReaderDocument
 }