[Tutorial/Workflow] Firefox Devtools in Zotero

[AlexMeier99]

Hi @Rosmaninho

first of all 👍 for compiling and maintaining these informations.

I figured how to use the Firefox devtools (DOM tree Inspector, Network requests, ...) in Zotero and thought it might be helpful for someone else:

(The following applies to Windows 10) -> Edit: please do see my comment below before proceeding

1. Get a old version of Firefox -> I used a portable installations from PortableApps archive (Version 60)
2. Get the latest beta/dev version of Zotero -> shipped as a zip for Windows -> can access your Zotero profile
3. Start Zotero beta from cmd/PowerShell with 'debugger' flag
4. Search about:config (preferences -> advanced) in Zotero for the keyword 'devtools' to prepare remote debugging
5. Setup your old Firefox for remote debugging
6. Connect Firefox to Zotero from web developer menu
7. Firefox opens a new tab
8. Zotero asks for permission to accept connection -> confirm this request
9. Use the link that appears in the center of Firefox tab -> opens new window with devtools
10. done 🥳

I'd like to highlight that I was not able to style the PDF reader (pdf.js) CSS styles seem to be dynamically inserted using JavaScript within the Zotero GUI (-> react app). However I could style everything else (e.g. window actions menu -> File, Edit, View, ...).

I'm happy to help with questions concering the workflow above. Hope this might be helpful to anyone. I had quite a hard time figuring this out. Unfortunately there's very little information on this so far.

Regards, Alex

[Rosmaninho]

Holy crap! That's amazing! We can take the theme to the next level now.
In Zotero 6, the Note editor changed so the previous theme for it stopped working. It might be a good idea to use this in that case then.
Shame about the .pdf reader, although you probably saved me plenty of hours to figure out I wouldn't be able to theme it.

[AlexMeier99]

Thank you very much for your kind words.

The issue concerning the styling of the PDF reader/viewer (both terms are used ambigously in the code base for some reason) might also apply to the new(er) note editor. The code of both components is developed in reposititories exclusive to each of them. Same (seems) to apply to the way how there treated in Zotero at runtime. From a cyber sec point of view this sounds reasonable to me. It's a lot of JavaScript after all. Think XSS leading to access to the file system, etc.

However I'd like to highlight that I lack the knowledge required to express a qualified comment on this. English is unfortunately not my mother tongue so I might end up putting my thoughts in false leading terms.

I'd be very grateful if someone of the Zotero maintainers or dev community could step in to give some insights on the following questions:

• first of all are there (or have been) any plans for a integration of a dark mode? -> best case: using this repo as a base
• the order of the CSS files when being loaded separately into the frontend
• if CSS styles (of pdf.js) are being overwritten by JavaScript and if so when does it happen -> e.g. there's are secondaryToolbar witch is not visible to user at this time (-> contains buttons for fullscreen view, file metadata, etc. -> it's the dropdown menu top-right in pdf.js when embedded in Firefox) -> it's fully styled with custom icons and everything just not yet visible -> is it not yet ready/stable?
• (more) details about the (integration of the) note editor -> it (seems) to not use the styles in userChrome.css they don't even show up in devtools -> very strange ❔❕
• for some reason I was able to successfully apply a filter: invert(1) to a window tab (browser element in Zotero DOM tree) containing a pdf reader view -> inverting its colors -> that raised more questions: Why does it not work for any child element of this browser element like for the main window (-> the library tree listing)

[AlexMeier99]

I'd like to extend my first comment on top. (I'll stick to the abbreviation 'devtools' for 'developer tools' in the following.)

For legal reasons I'd like to highlight that when proceeding you act on your risk. Possible damages or losses caused to you personally or anyone else by following this tutorial or using legacy software in general might occur. As noted above I'm not a qualified IT professional or a lawyer but an average daily user of Zotero.

Concerning the init and prep of the remote debugging session:

First of all when reading the following links do not forget that Firefox and Mozilla both moved on and changed significantly since the release of version 60. So many statements in the docs are not (fully) applicable to the described setup. Witch heavly relies on legacy software components. I'd like to emphasize that I highly encourage the reader to not used multiple machines for the following but instead run everything on the same PC. If you prefer to take the risk you should search for devtools.debugger.force-local in the Zotero config later on.

Disconnecting from the internet before using an aged browser might also be a good idea if your not prepared to take risks.

I highly recommend to make Firefox' top-left menu bar visible (by checking in the section for modifing the 'appearance' of Firefox) if not already done. This is not mandatory but it should ease the following steps.

1. MDN -> activate Remote Debugging in devtools (in Firefox) -> open devtools check 'Enable browser chrome and add-on debugging toolboxes' and 'Enable remote debugging' in preferences
2. MDN -> docs on Remote Debugging -> TL;DR type in about:debugging in Firefox location bar and hit enter -> notice the lack of the network section featured in newer versions -> head to developer menu
3. start Zotero with debugger if not already done
4. fire up the advancend config (about:config) window -> confirm the security warning about the non-exisiting warranty (sic!)
5. type in 'devtools' in the search/filter bar
6. read carefully through the results -> where looking for the remote port (-> the one were gonna use in the future to connect from Firefox)
7. make sure that you enter another port if the default (Port 6000) is already in use on your machine
8. restart Zotero
9. try to connect from Firefox using 'Connect' from the developer menu
10. if it fails head back to the Zotero config -> you might need to unlock more preferences

[AlexMeier99]

Short update: the note editor runs in an iframe -> inverting the colors of the whole editor component works by appling filter:invert(1) to it. However I'd like to point out that this is a bad practice as it might lead to trouble with low contrast colors.

[tefkah]

Thanks man, this really helped me! I did figure out a way to style the pdf/viewer, you need to do some JS, see https://github.com/ThomasFKJorna/zotero-night

[ClandestineClout]

Interesting. I wonder if certain Firefox extensions could be adapted for zotero.

[Rosmaninho]

Thanks man, this really helped me! I did figure out a way to style the pdf/viewer, you need to do some JS, see https://github.comThomasFKJorna/zotero-night

How does one install your theme to test it?

[tefkah]

Thanks man, this really helped me! I did figure out a way to style the pdf/viewer, you need to do some JS, see https://github.comThomasFKJorna/zotero-night

How does one install your theme to test it?

Ah I haven't really set up proper CD, gimme a sec

[tefkah]

Otherwise you need to install it as a dev which is honestly a pain in the ass

[Rosmaninho]

Ooof, I won't be able to do anything like what you did. That looks awesome by the way.

[tefkah]

You can try it out now! See https://github.com/ThomasFKJorna/zotero-night/releases

Still slightly jank but less so

[tefkah]

If anyone here wants to help out cssing/create more themes/test drive I'd love your help! :)

[Rosmaninho]

That looks awesome!
In Windows I noticed the following issues:

• The menubar isn't themed (you can check my css since I addressed this),
• The tabs in the tab panes are broken (also okay in my css file),
• The tags in the tag selector also don't look good (also fine with my .css file).

How did you theme the PDF reader and note editor? Was it javascript?
Also how did you remove the border from the tab-bar when you open pdfs? I failed to find a way to remove them!
Love your work, it's awesome to see someone finally build up on what I've been doing. :D
Heck, I think your work should be merged with mainline Zotero even!

[tefkah]

Thank you so much for the kind words, really appreciate them and the work you already put into the CSS file!

Good points, I am on a Mac so I don't see the Menubar on the window, but I should add that. The tags is something I still need to fix, I don't use them that much myself so I hadn't noticed them yet haha.

And yes, you do need to use javascript in order to theme the PDF reader. They are in separate iframes which the CSS from the "main" frame can't reach. The annoying part is knowing when the PDF reader is properly loaded, as Zotero does provide some hook for letting you know a tab is added, but that is before the contents are loaded, so if you add a style tag with the CSS for the PDF reader when Zotero says "hey there's a new tab" it will just overwrite it because it's still adding content to the page 🙄

I think I just removed the border by doing border: none !important, but I'm not sure!

Ideally I'd like zotero-night to kind of turn into a theming platform for Zotero as it has very little support for it atm, so if you have any suggestions for what you think would be a good way to use such a platform (e.g. would just being able to change colors enough, or loading custom css, or injecting custom js at specific places?) let me know!

There's lots of other things I'd like to be able to change about the look of Zotero, not all of which are probably possible.
For instance I'd like the items in the "Collection View" to have some more padding, but that seems hardcoded into zotero :(

If you have any other suggestions lemme know! I'm just trying stuff haha

[tefkah]

Also being able to change the scrollbars would be sick but that does not seem possible in the old version of firefox that Zotero is using (only 8 versions later and we could have 😭).
For instance, I wanted to make the top menu bar scrollable instead of filling up with ever smaller tabs, but either I just remove the scrollbar there or it'd look really bad. Mabye removing it would actually be okay now that I think about it, browsers don't have one either. Just need to add some buttons.

Custom scrollbars could probably be done with some custom JS, but I'm not sure if that is doable without manually targeting every single scrollable object, which seems a bit much haha

[Rosmaninho]

Thank you so much for the kind words, really appreciate them and the work you already put into the CSS file!

Good points, I am on a Mac so I don't see the Menubar on the window, but I should add that. The tags is something I still need to fix, I don't use them that much myself so I hadn't noticed them yet haha.

And yes, you do need to use javascript in order to theme the PDF reader. They are in separate iframes which the CSS from the "main" frame can't reach. The annoying part is knowing when the PDF reader is properly loaded, as Zotero does provide some hook for letting you know a tab is added, but that is before the contents are loaded, so if you add a style tag with the CSS for the PDF reader when Zotero says "hey there's a new tab" it will just overwrite it because it's still adding content to the page 🙄

I think I just removed the border by doing border: none !important, but I'm not sure!

On which parameter? .tabs? .tab? That doesn't seem to work on my end. :(

Ideally I'd like zotero-night to kind of turn into a theming platform for Zotero as it has very little support for it atm, so if you have any suggestions for what you think would be a good way to use such a platform (e.g. would just being able to change colors enough, or loading custom css, or injecting custom js at specific places?) let me know!

There's lots of other things I'd like to be able to change about the look of Zotero, not all of which are probably possible. For instance I'd like the items in the "Collection View" to have some more padding, but that seems hardcoded into zotero :(

If you have any other suggestions lemme know! I'm just trying stuff haha

I think what you did is already great. I would love to see alternative color themes. :)
But I think first just finishing polishing stuff is more important. With your work I think you should reach the Zotero devs and see if they're willing to collaborate with you. This is way above whatever I could make. I just played with this stuff like I like to play with Firefox userChrome.css.

[tefkah]

On which parameter? .tabs? .tab? That doesn't seem to work on my end. :(

Ah I see it's just the

* {
	border: 0 !important
}

that I took from your file!

Otherwise look into #tab-bar-container .tab.selected:not(.highlighted) and #tab-bar-container .tab:not(:selected)

Otherwise I'm not sure which border you are referring to!

[Rosmaninho]

The line that goes from the tab and to the end of the window.