how to use Inspector

General project discussion.
Use this as a last resort if your topic does not fit in any of the other boards but it still on-topic.
Forum rules
This General Discussion board is meant for topics that are still relevant to Pale Moon, web browsers, browser tech, UXP applications, and related, but don't have a more fitting board available.

Please stick to the relevance of this forum here, which focuses on everything around the Pale Moon project and its user community. "Random" subjects don't belong here, and should be posted in the Off-Topic board.
wavymoon
Fanatic
Fanatic
Posts: 131
Joined: 2015-07-21, 21:31
Location: westchester

how to use Inspector

Unread post by wavymoon » 2022-06-11, 13:03

I want to be able to use Inspector to see what Pale Moon elements are named and examine my userChrome.css file.
I have looked for any type of tutorial for Inspector but came up empty. Is there one I am missing ?

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: how to use Inspector

Unread post by Blacklab » 2022-06-11, 15:08

@wavymoon: Probably the best place to find info on the Developer Tools in Pale Moon is via RealityRipple's archive of older MDN pages here: https://udn.realityripple.com/... if you select the 'Developer Tools' heading (near to top on right) then subsequent pages offer:

Firefox Developer Tools: https://udn.realityripple.com/docs/Tools... which opens to list many tools including:

Page Inspector: https://udn.realityripple.com/docs/Tools/Page_Inspector... which has a 'Quick Tour' of the Inspector's UI:

Inspector UI Tour: https://udn.realityripple.com/docs/Tool ... or/UI_Tour

There may be other instructions and user hints to be found in older Mozillazine Forum topics and Mozillazine Knowledge Base articles (use Search boxes top right)... and probably some original Mozilla MDN items can be found using WayBackMachine too. :)


PS. You probably already know that you can inspect the entire browser skin CSS code of your installed Pale Moon version (or Firefox) by pasting "chrome://browser/skin/browser.css" (without quotation marks) into the address/location/url bar.

PPS. If you search generally for Firefox/Pale Moon CSS script ideas and hints you will often come across a few particular names replying to Mozillazine topics or answering questions in old (and new) Firefox Support threads... e.g. jscher2000 who has been suggesting CSS scripts, hints, and mods going back to the early days of Firefox: https://www.userchrome.org/help-with-us ... e-css.html

Just remember Pale Moon isn't Firefox any longer... :)
Last edited by Blacklab on 2022-06-12, 02:06, edited 1 time in total.

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: how to use Inspector

Unread post by Blacklab » 2022-06-11, 17:53

BTW - The above answer refers to Pale Moon's built-in Developer Tools including the Page Inspector, etc, etc... :)
However, there is another tool available as an extension with a similar name and purpose - The DOM Inspector (aka DOMi).

The DOM Inspector (also known as DOMi).jpg

The Pale Moon version of that extension was maintained by Messrs Tobin (previously of this parish) and can still be obtained from binaryoutcast.com and installed... see recent forum discussion here: viewtopic.php?f=46&t=28242&start=20#p228108

Some instructions for using the older Mozilla version of the DOM Inspector or DOMi can be found here:

Introduction to DOM Inspector (old MDN via WaybackMachine): https://web.archive.org/web/20170223075 ... _Inspector

Note: If you have installed and enabled the 'DOM Inspector v3.1.7534' extension then if you use keyboard shortcut 'Ctrl+Shift+I' you will open the DOM Inspector window and not the built-in Page Inspector window.

wavymoon
Fanatic
Fanatic
Posts: 131
Joined: 2015-07-21, 21:31
Location: westchester

Re: how to use Inspector

Unread post by wavymoon » 2022-06-12, 13:09

Blacklab

Thanks for all that I did not know about "chrome://browser/skin/browser.css" Just what is all that? Looks like a lot more than I have in my userChrome.css file.
Looks like I have a project for this weekend!!
Thanks

wavymoon
Fanatic
Fanatic
Posts: 131
Joined: 2015-07-21, 21:31
Location: westchester

Re: how to use Inspector

Unread post by wavymoon » 2022-06-12, 14:41

I spent a couple of hours looking at these links and I must admit every thing is opaque to me. and I have a head ache.
My original objective was to be able to figure out how to make Pale Moon in my newer computer like how it does in my old one. I was thinking being able to identify say the css for a toolbar is would help. The wall is stronger than my head but fortunately I have gotten close. I would just like to thank you for your response and close this thread.
Thanks again!

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: how to use Inspector

Unread post by Blacklab » 2022-06-12, 15:27

@wavymoon: Everything is difficult to begin with... :)

As jscher2000 put it in his 'Learning CSS' paragraph above: "The web has an abundance of resources; the hard part is where to start. I find that working with rules created by others, hopefully with helpful comments embedded, provides a great starting point."

Even with very little CSS knowledge you can start modifying the whole User Interface (UI) of Pale Moon, you can still make a lot of modifications to Firefox, and you can also make some UI modifications to the Chrome-based Vivaldi browser. :D

With a little persistence and application how to find/modify/tweak CSS scripts will become clearer... search for CSS scripts online, read this forum, try changing a few small things first... copy other peoples' CSS code that is known to work (there are all sorts of scripts and advice in this forum's posts)... and use a Pale Moon extension like Lootyhoof's Stylem to make writing and testing your CSS scripts much easier.

And then when you have seen how its done you can begin writing your own CSS scripts from scratch... :geek:

Locked