Using <info-box> custom element inside a custom window

[Jonas Zaugg]

Hi!

I'm contributing to Cita, a citation management plugin for Zotero, which fetches references from sources like OpenAlex and Semantic Scholar and allows the user to edit the fetched citations/references. These citations are stored as "virtual" Zotero.Item elements in an item's note, in JSON format. To edit these citations, the user clicks on them in the item pane, which opens our custom `citationEditor.xhtml` dialog. The dialog relies on Zotero's custom <info-box> (formerly <item-box>) to display the "virtual" item's values and edit them.

Amongst others, the dialog's loading script adds the <info-box> element to the window's DOM and adds a React component below it for our needs. In order to make this work, the window's XHTML source first loads the following scripts:

• chrome://zotero/content/include.js
  
• chrome://zotero/content/customElements.js
  
• chrome://__addonRef__/content/scripts/dialogs/editor/index.js
  

The relevant files at the time of writing are:

• https://github.com/diegodlh/zotero-cita/blob/c32e72c5d4a6eb95ef04c24a95d979b2b01172ab/static/chrome/content/citationEditor.xhtml
  
• https://github.com/diegodlh/zotero-cita/blob/c32e72c5d4a6eb95ef04c24a95d979b2b01172ab/src/dialogs/editor/index.tsx
  

The whole setup works really well, but we've run into an obscure bug (which doesn't seem to affect functionality). When the user clicks on the "..." toolbar button next to title-like fields (title, book title, etc.) within this dialog (or makes the relevant context menu appear by right-clicking), a slew of error messages appear in the console:

1. Uncaught TypeError: this.delayConnectedCallback is not a function
       connectedCallback menupopup.js:56
       triggerPopup itemBox.js:689
       openEditor citationsBox.tsx:86
   
2. Uncaught TypeError: el.render is not a function
       <anonymous> menu.js:170
   

       handlePopupOpening itemBox.js:2658
   

       triggerPopup itemBox.js:693
   

       openEditor citationsBox.tsx:86

   3. Uncaught TypeError: this.ensureInitialized is not a function

       MozMenuPopup menupopup.js:49
   

       handlePopupOpening itemBox.js:2658
   

       triggerPopup itemBox.js:693
   

       openEditor citationsBox.tsx:86

(I've trimmed the call stack to the openEditor function, which is called from the item pane and opens the editor).

As I mentioned, the title casing commands related to these context menus work, but it's not ideal to have the log "polluted" by errors. It seems to me that the menupopup that is created when clicking on that button is of the wrong "type", respectively does not contain the relevant Moz mixins. It's been very hard to track down since this is part of the Mozilla code Zotero is absed on, not Zotero's own code.

In summary: is there a JS file that I'm missing somewhere?

Thanks in advance!

[XY Wong]

It could be from the `ZoteroPane.buildFieldTransformMenu` call inside the info-box, as it creates the element for the main window's document and is used in another document (your custom window). Would it be possible for you to build a plugin XPI and provide steps to reproduce it so I would be able to check if I can fix it? Thanks.

[Jonas Zaugg]

Hi! Sorry for the delay, I didn't get any notification that I had received a reply... Thank you so much for replying!

Here's the latest dev build. Once installed, probably the simplest way to reproduce would be:

1. Select an item in your library
   
2. In the Citations pane, click on "+" and select "Add Zotero item(s) as citations" or "Add by identifier"
3. Follow the steps to add a citation
4. Click on the citation in the list; the citation editor should open
5. In that editor, right-click on the title field (or click on the "..." button of the title field).
6. At least on macOS (but apparently not on Ubuntu or Windows), the popup shows. In any event, the console receives multiple error messages.

Kind regards,

Jonas

[Jonas Zaugg]

It feels like global/content/customElements.js isn't loaded. Indeed, it would define delayConnectedCallback and ensureInitialized as well as load xxglobal/content/elements/menu.js which in turn would define render. This is unexpected, however, since global/content/customElements.js should be loaded when loading "chrome://zotero/content/customElements.js"...

[Jonas Zaugg]

Strike that: it does load it. However, when I set a breakpoint on the offending accesses to "ensureInitialized" or "delayConnectedCallback", I notice the following difference:

• In the normal info box, "this.constructor" points to "class MozMenuPopup {}"
• In the custom window, "this.constructor" points to a generic XULPopupElement

However, within "triggerPopup" in itemBox.js, the type is actually correct, until "this.querySelector('popupset').append(menupopup);" (L695). After that line, the menupopup becomes "generic". And it's within that line, somewhere, that "connectedCallback" is called (by whom?), where "this.delayConnectedCallback" is undefined. I hope this helps narrowing it down.

[XY Wong]

Well, I'm getting `Uncaught Error: 7.0.12.SOURCE.3f24a0027 is not valid version string.` because I am running the source build. Should use `Services.vc.compare(v1, v2)` if possible.

[XY Wong]

Anyway, it turned out to be the `ZoteroPane.buildFieldTransformMenu`. We will make a fix soon.

[Jonas Zaugg]

Thank you so much! Can't wait to try it out

[XY Wong]

This bug should be fixed in 7.1 beta.