MozillaZine


[SOLVED] Explore the DOM

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

Post Posted June 12th, 2020, 7:23 am

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 :
[url]http://kb.mozillazine.org/About:config#Search_bar[/url]
Last edited by Gloops on June 12th, 2020, 1:02 pm, edited 1 time in total.

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

Post Posted June 12th, 2020, 8:48 am

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

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

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://developer.mozilla.org/docs/Tools/Browser_Toolbox
http://developer.mozilla.org/docs/Tools/Browser_Toolbox#Debugging_popups

How do we get DOM info for userChrome in 57+
http://forums.mozillazine.org/viewtopic.php?f=23&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 () {
  var url = "chrome://messenger/content/messenger.xul";
  document.getElementById("tabmail").openTab("contentTab", {
    contentPage: "view-source:" + url,
  });
})();

Thunderbird 68 uses the messenger.xul page.
Thunderbird 78 uses the messenger.xhtml page.

Browser Console
http://developer.mozilla.org/docs/Tools/Browser_Console

Thunderbird 68 source
http://searchfox.org/comm-esr68/source
http://searchfox.org/comm-esr68/source/mail/config/version.txt

Thunderbird 78 source
http://searchfox.org/comm-esr78/source
http://searchfox.org/comm-esr78/source/mail/config/version.txt

Thunderbird 91 source
http://searchfox.org/comm-esr91/source
http://searchfox.org/comm-esr91/source/mail/config/version.txt
Last edited by morat on September 17th, 2021, 5:22 am, edited 6 times in total.

Gloops
 
Posts: 105
Joined: April 19th, 2006, 6:12 am

Post Posted June 12th, 2020, 12:59 pm

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: 218
Joined: June 7th, 2003, 12:45 am

Post Posted September 17th, 2021, 5:45 am

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: 4847
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 17th, 2021, 6:43 am

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/1214345#answer-1102632
http://old.reddit.com/r/Thunderbird/comments/lcsq7i

thoste
 
Posts: 218
Joined: June 7th, 2003, 12:45 am

Post Posted September 18th, 2021, 2:07 am

@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: 4847
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 18th, 2021, 9:12 am

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?q=folderTree&path=css
http://searchfox.org/comm-esr78/source/mail/themes/shared/mail/folderPane.css

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

Similar thread: viewtopic.php?f=39&t=3062885

Pet peeve: don't post big images (forum width messes up)

thoste
 
Posts: 218
Joined: June 7th, 2003, 12:45 am

Post Posted September 19th, 2021, 3:29 am

@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: 8
Joined: July 24th, 2013, 6:18 pm

Post Posted October 2nd, 2021, 11:04 pm

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.

Return to Thunderbird General


Who is online

Users browsing this forum: No registered users and 2 guests