[SOLVED] Explore the DOM

Discussion of general topics about Mozilla Thunderbird
Post Reply
Gloops
Posts: 106
Joined: April 19th, 2006, 6:12 am

[SOLVED] Explore the DOM

Post by Gloops »

Hello everybody,

I searched "DOM" on the right here from the Thunderbird forum, and the answers I found were most about Firefox.

I spent a certain time, a few years ago, browsing the Thunderbird DOM to write a userChrome.css

For that I used DOM inspector and Element inspector, but that is no more up-to-date it seems.

At a moment I remember we had to find something to open in the file menu, but ... can anybody refresh my memory, and update the informations ?

It seems what I found there is not up-to-date either, it would be nice as it is well referenced :
http://kb.mozillazine.org/About:config#Search_bar
Last edited by Gloops on June 12th, 2020, 1:02 pm, edited 1 time in total.
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: Explore the DOM

Post by morat »

In Thunderbird, the Browser Toolbox is called the Developer Toolbox.

i.e. Tools > Developer Tools > Developer Toolbox (ctrl+shift+i)

* set devtools.chrome.enabled pref to true
* set devtools.debugger.remote-enabled pref to true
* set devtools.debugger.prompt-connection pref to false
* set devtools.inspector.showAllAnonymousContent pref to true
* set devtools.browsertoolbox.scope pref to "everything"

You can use the Select an iframe as the currently targeted document button to change the document.

main window or 3pane window > chrome://messenger/content/messenger.xul or .xhtml
message window > chrome://messenger/content/messageWindow.xul or .xhtml
compose window > chrome://messenger/content/messengercompose/messengercompose.xul or .xhtml
address book window > chrome://messenger/content/addressbook/addressbook.xul or .xhtml
error console window > chrome://devtools/content/webconsole/index.html

You can use the Pick an element from the page button to inspect an element.

Browser Toolbox
http://firefox-source-docs.mozilla.org/ ... index.html
http://firefox-source-docs.mozilla.org/ ... ing-popups

How do we get DOM info for userChrome in 57+
http://forums.mozillazine.org/viewtopic ... &t=3034448 (popup example)

P.S.

In Thunderbird, the Browser Console is called the Error Console.

i.e. Tools > Developer Tools > Error Console (ctrl+shift+j)

You can view the source of a chrome url using the console.

Code: Select all

(function () {
  document.getElementById("tabmail").openTab("contentTab", {
    contentPage: "view-source:chrome://messenger/content/messenger.xul",
  });
})();

Code: Select all

(function () {
  document.getElementById("tabmail").openTab("contentTab", {
    url: "view-source:chrome://messenger/content/messenger.xhtml",
  });
})();
Thunderbird 68 uses the messenger.xul page.
Thunderbird 78 uses the messenger.xhtml page.

Thunderbird 91 uses the contentPage property name.
Thunderbird 102 uses the url property name.

Browser Console
http://firefox-source-docs.mozilla.org/ ... index.html

Thunderbird 68 source
http://searchfox.org/comm-esr68/source
http://searchfox.org/comm-esr68/source/ ... ersion.txt

Thunderbird 78 source
http://searchfox.org/comm-esr78/source
http://searchfox.org/comm-esr78/source/ ... ersion.txt

Thunderbird 91 source
http://searchfox.org/comm-esr91/source
http://searchfox.org/comm-esr91/source/ ... ersion.txt

Thunderbird 102 source
http://searchfox.org/comm-esr102/source
http://searchfox.org/comm-esr102/source ... ersion.txt

Thunderbird 115 source
http://searchfox.org/comm-esr115/source
http://searchfox.org/comm-esr115/source ... ersion.txt
Last edited by morat on September 10th, 2023, 6:25 am, edited 16 times in total.
Gloops
Posts: 106
Joined: April 19th, 2006, 6:12 am

Re: Explore the DOM

Post by Gloops »

Got it !
"Pick an element from the page" answered the question, thank you.
Perhaps the options were already at the good values.

I wonder what the best place to put this would be.
thoste
Posts: 317
Joined: June 7th, 2003, 12:45 am

Re: [SOLVED] Explore the DOM

Post by thoste »

A couple of questions:

1.) Before I use Developer Toolbox I have to set the folowing values manually:

* set devtools.chrome.enabled pref to true
* set devtools.debugger.remote-enabled pref to true
* set devtools.debugger.prompt-connection pref to false
* set devtools.inspector.showAllAnonymousContent pref to true

Correct?

2.) When I (later) click on Menu Tools--->Developer Tools---->Develoer Toolbox
a prompt appears:

"An incoming request to permit remote debugging connection was detected. A remote client can take complete control over your browser
Client Endpoint: 127.0.0.1:5220
Server Endpoint: 127.0.0.1:5217
Allow Connection?"

Does that mean that the connection is only on my local machine? Or is it from outside (=from beyond my router)?

Assume I allow this connection. How can I (later) disable it again?

Simply by closing Developer Toolbox?

The prompt talks about "take complete control over your browser". That means browser=email client=Thunderbird?
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: [SOLVED] Explore the DOM

Post by morat »

1. Yes.

2.

The debugger uses its own profile. (chrome_debugger_profile in profile folder)

That's why you must allow the remote debugging connection.

You can hide the dialog by setting the devtools.debugger.prompt-connection pref to false.

Opening Browser Toolbox
http://developer.mozilla.org/docs/Tools ... er_toolbox

More info
http://support.mozilla.org/questions/12 ... er-1102632
http://old.reddit.com/r/Thunderbird/comments/lcsq7i
thoste
Posts: 317
Joined: June 7th, 2003, 12:45 am

Re: [SOLVED] Explore the DOM

Post by thoste »

@morat:

Ok, thank you for comments. I setup everything as described and it works - at first.

Now lets assume I want to change (just for simplicity as testcase) the font size of only the folder name "Sent Mail".
So I clicked as suggested onto the topleft-most Icon in Developer toolbar to select the according target component in Thunderbird.

But unfortunately the innermost frame I can select is the whole folder tree (as indicated by the red-dashline rectangle box).
See the snapshot at the bottom of this post.

The corresponding element in Developer Tools cannot be expanded any more. It seems to be an event.

So how else can I track down the CSS name of "Sent Mail" folder name?
Or Icon left of it?
Or the whole line with icon and foldername?

https://i.postimg.cc/MKBd62qv/Developer ... ertree.png

resp:

Image
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: [SOLVED] Explore the DOM

Post by morat »

The treechildren elements are special. You can't inspect them like other elements.

Styling a Tree
https://web.archive.org/web/20191005024 ... ing_a_Tree

Try something like:

Code: Select all

tree#folderTree treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
  list-style-image: url("http://forum.mozilla-russia.org/uploaded/custombuttons_button.png") !important;
  -moz-image-region: auto !important;
}
tree#folderTree treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Sent) {
  color: orange !important;
  font-size: 20px !important;
  font-style: italic !important;
  font-weight: bold !important;
}
Reference
http://searchfox.org/comm-esr78/search? ... e&path=css
http://searchfox.org/comm-esr78/source/ ... erPane.css

Show selected folder properties
http://forums.mozillazine.org/viewtopic ... &t=3078318

Similar thread: http://forums.mozillazine.org/viewtopic ... &t=3062885

Pet peeve: don't post big images (forum width messes up)
thoste
Posts: 317
Joined: June 7th, 2003, 12:45 am

Re: [SOLVED] Explore the DOM

Post by thoste »

@morat: Thank you for further instructions.

In order to cope with one of my core problems I tried to crop (NOT: shrink) the folder icon(s) resp the empty space around them.
None of the following instructions work in userChrome.css:

tree#folderTree treechildren::-moz-tree-image(folderNameCol) {
padding-inline-start: 0px;
padding-inline-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

Even negative values show no effect:

tree#folderTree treechildren::-moz-tree-image(folderNameCol) {
padding-inline-start: -2px;
padding-inline-end: -2px;
margin-inline-start: -2px;
margin-inline-end: -2px;
}

Whats wrong?

Any other way?
Synthezoid
Posts: 12
Joined: July 24th, 2013, 6:18 pm

Re: [SOLVED] Explore the DOM

Post by Synthezoid »

I want to use LegacyMenus in a plugin but this requires you to know the IDs of menu options which supposedly the old DOM inpector could show you. The new Dev Tools appear only to be able to inspect windows, not the menubar. How do I inspect that part of the DOM?

EDIT: I found it. It was actually buried in the HTML, by searching for the ID "menu_FileQuitItem", which I knew from reading extension code, I found the whole menu structure.
Post Reply