Any workflow tips for theming? UI inspector? Fast testing?

Add-ons for Pale Moon and other applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: FranklinDM, Lootyhoof

freedom4all
Moonbather
Moonbather
Posts: 51
Joined: 2022-11-08, 03:11

Any workflow tips for theming? UI inspector? Fast testing?

Unread post by freedom4all » 2022-11-08, 06:07

Hi all. I'm new to the forum, and also a new Pale Moon user. I'm working on a new theme, but I'm finding that the process is rather slow and cumbersome so far.

I make Stylus themes for Firefox sometimes, and spend most of my time in the inspector examining the layout. Is there any kind of inspector that I can use in Pale Moon's interface to identify which CSS classes are being used for which UI elements? A lot of it so far is guesswork to see which parts of the CSS are going to affect which parts of the UI, and 90% of the time, I guess incorrectly. Each time I have to re-test the theme to see if my changes.

Which brings me to problem #2

Reinstalling and re-testing takes up a ton of time. Rebuild XPI>Addons Manager>Gear>Install From File>Pick File>Wait 1s>Restart the browser ... over and over and over. Is there any way to streamline this process more so it takes less time to test my changes?

Any other workflow tips I should know about?

Thank you :D

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by FranklinDM » 2022-11-08, 08:01

freedom4all wrote:
2022-11-08, 06:07
Is there any kind of inspector that I can use in Pale Moon's interface to identify which CSS classes are being used for which UI elements?
We used to have a fork of DOM Inspector at the add-ons site, but that is no longer hosted there unfortunately. That said, you can use the Browser Toolbox provided by the built-in Developer Tools:
  1. Enable browser chrome and add-on debugging toolboxes first via F12 then Settings (cog wheel)
  2. From the menu bar, select Tools > Developer Tools > Browser Toolbox
  3. A prompt about debugging will appear - select allow.
  4. The browser toolbox appears, allowing you to inspect the browser's XUL (IIRC, I haven't used this feature extensively).
freedom4all wrote:
2022-11-08, 06:07
Reinstalling and re-testing takes up a ton of time. Rebuild XPI>Addons Manager>Gear>Install From File>Pick File>Wait 1s>Restart the browser ... over and over and over. Is there any way to streamline this process more so it takes less time to test my changes?
Use an extension proxy file. With that, all you have to do is to restart Pale Moon for changes to take effect.

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by moonbat » 2022-11-08, 09:19

FranklinDM wrote:
2022-11-08, 08:01
but that is no longer hosted there unfortunately
Still available here.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

freedom4all
Moonbather
Moonbather
Posts: 51
Joined: 2022-11-08, 03:11

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by freedom4all » 2022-11-08, 15:34

Great, thank you :thumbup: I'll look into everything you've suggested.

This information would be useful to add to the theme dev page http://developer.palemoon.org/addons/themes/complete/

freedom4all
Moonbather
Moonbather
Posts: 51
Joined: 2022-11-08, 03:11

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by freedom4all » 2022-11-08, 18:05

FranklinDM wrote:
2022-11-08, 08:01
[*] Enable browser chrome and add-on debugging toolboxes first via F12 then Settings (cog wheel)
[*] From the menu bar, select Tools > Developer Tools > Browser Toolbox
I had to enable Remote Debugging as well to get this option to appear.

This is MUCH better than the DOM Inspector addon. Thanks a lot for this tip. Now maybe I can make some real progress.

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

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by Blacklab » 2022-11-09, 01:39

@freedom4all: You might enjoy a wander through the myriad of old Firefox themes via WayBackMachine (WBM) sometime? :)

Recently I was looking for a particular Persona that I like to use along with a series of CSS scripts to compact the UI of current Firefox and LibreWolf much more to my taste. I was curious to see if that Persona ('Gradient Blue' by 'Nh0jNG' if you were asking) also existed in a pre-Firefox 57 and pre-WebExtensions version before November 2017? It had.

To my surprise I found that WBM stores a large number of captures of the pre-Firefox 57 Mozilla Addons (AMO) Complete Themes pages... see full list of captures 2013 onwards here: https://web.archive.org/web/20170401000 ... te-themes/

Many of these captured 'Complete Theme' pages are still searchable to varying degrees e.g: https://web.archive.org/web/20170829120 ... ort=rating

---------------------

Likewise, WBM has captured a truly vast number of pre-Firefox 57 'Personas' too...see a full list of captures 2013 onwards here: https://web.archive.org/web/20170315000 ... ox/themes/

Many of these pages listing thousands of Personas are also searchable, again to vary degrees depending on each particular WBM capture e.g: https://web.archive.org/web/20130722191 ... ox/themes/

---------------------

To my further surprise I found that a good number of the individual Personas held on WBM are still 'live' and can even be 'downloaded' to current Pale Moon 31.3.1. Thus, as originally intended, these 'captured' Personas can still change the tab bar background colour/picture/design. However, the surviving Personas all seem to be simple solid colours and colour gradients, perhaps WBM was unable to access and save the .png files that were needed for more complex Personas?

Note: IIRC Firefox Personas were never 'downloaded' to your browser as such (more's the pity IMO). What was actually held in your browser's Profile and activated from your Addons Page 'Themes' list was only the URL address of your chosen Persona file(s)... the files themselves being held on the Firefox/Mozilla Addons (AMO) website. This means that the 'still active' Personas to be found on WBM must now have a 'live' URL held somewhere on WBM's servers! A slightly bizarre state of affairs... and I'm not sure if this might present some level of security risk to anyone attempting to use those 'still live' Personas available via WBM? :think:

If interested... the only way to find out if a particular Persona is still live on WBM is good old trial and error... simply testing each of the instances of a particular Persona captured by WBM unlit you find a live one... a somewhat tedious process. :)

(FWIW - the Persona I was looking for 'Gradient Blue' by 'Nh0jNG' didn't survive the cut... there isn't a 'live' version of it stored by WBM... but luckily for me the author did update so at least it is easily available for use with current Firefox and LibreWolf.)

Just for fun... here are just a few of the dozens of Personas that I found still working on WBM. Apologies, I obviously have a bit of a thing for simple solid/abstract shades of blue 'easy on the eyes' type Personas for browsing... so 3 of the example Personas below are all boringly blue ones selected from 'Solid Themes' + 'Most Popular' AMO sort pages like this one WBM captured in August 2017: https://web.archive.org/web/20170821094 ... lar&page=2

Mono Blue: https://web.archive.org/web/20171104161 ... /monoblue/

Blue Sharepoint: https://web.archive.org/web/20170822033 ... harepoint/

Bluez Vista: https://web.archive.org/web/20170822033 ... uez-vista/

Basic Grey Gradient: https://web.archive.org/web/20171015222 ... -gradient/

Mini green4: https://web.archive.org/web/20170821012 ... ni-green4/

--------------------

If nothing else, I found my trip back to pre-Firefox 57 AMO's Theme and Persona pages via WBM a sad reminder of all that was thrown away with the move to WebExtensions... so many wonderful pieces of work, contributed by thousands of individuals, the majority of which did not get updated and just ended up in the bin marked history. :(

freedom4all
Moonbather
Moonbather
Posts: 51
Joined: 2022-11-08, 03:11

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by freedom4all » 2022-11-09, 15:18

Thanks for taking the time to share all of that info Blacklab

I have no interest in personas personally, I'm going the distance on a fully custom complete theme. I'm making quite good progress now that I have a proper inspector and the workflow down. My theme is based around the beautiful Plata Noir dark GTK theme for linux. There is a matching Firefox theme here which I am aiming to mimic as closely as possible on Pale Moon. Painstaking work

I still have a ton more work to do and this is in a highly unfinished state as of yet, but here is a peek so far from an afternoon of work yesterday

Image

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

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by Blacklab » 2022-11-09, 19:11

@freedom4all: Good luck with creating a new complete theme for Pale Moon. The Pale Moon UI code base is very stable compared to current Firefox and its derivatives like LibreWolf and Chrome clones like Vivaldi, all with their rapid update schedules, ever-changing code and UI code.

BTW - I'm sure you're aware you can inspect all Pale Moon's UI 'skin' CSS code by entering 'chrome://browser/skin/browser.css' in the address/url bar... same as you can with current Firefox.

Can't say I'm a fan of 'all dark' themes personally. I find black text on a white or pale background so much easier to read full stop.

Long ago I decided to stick with a series of simpler CSS script adjustments aimed at altering all my browser UI's so they were easy to use and easy to look at... at least for me. :) I currently run Pale Moon, Firefox ESR, Firefox (current stable), LibreWolf, and Vivaldi... all of which allow CSS scripting of the UI to varying degrees, Vivaldi being the least user-friendly from the CSS tweakers PoV... but at least it is possible and Vivaldi even has a small Mods forum! :thumbup:

I have used Pale Moon as my primary browser for many years and thus I modify the UI's of Firefox and LibreWolf to have similarly 'compact' toolbars with roughly similar toolbar layouts and sizing for icons and text, but not going as far as fighting Mozilla's 'tabs-on-top' decision with a lot more CSS. Instead I try to make tabs-on-top useable by editing-out silly distractions like recent Firefox's 'floating tabs' with highlighted boxes round the active tab. IMO that rather negates the whole point of the active tab having an obvious connection to the body of the associated webpage below?

Just for interest a comparison of my 3 current main browser UI's. (All on Windows 7... which I still much prefer using over Win 10... but can see I will have to move to Linux in not too distant future as major browser support for Win 7 OS begins to be abandoned.)

Top UI : Pale Moon 31.3.1
Middle UI: Firefox ESR 102.4.0
Bottom UI: LibreWolf 106.0.5-1

Browser UI's x 3.jpg

freedom4all
Moonbather
Moonbather
Posts: 51
Joined: 2022-11-08, 03:11

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by freedom4all » 2022-11-09, 20:23

Yeah I can understand the taste preferences between white on black and black on white. Dark is much less fatiguing on my eyes when I spend hours at the computer, especially with my big and very bright (350 nit) monitor. A bright display is needed for proper contrast and color reproduction; I do a fair bit of design work so that's important to me. All black is my happy place. White backgrounds hurt my eyes :shock:

I've dabbled with using Pale Moon for a while now, but haven't used it as my daily driver yet. I just found out about the Palefill (Polyfill) add-on, which helps a lot to fix broken sites (one of the reasons I hadn't used Pale Moon more often until now). If I want to use it as my daily and spend many hours with it, I need a theme that I love, so that's why I am working on adapting my favorite Firefox theme.

I prefer to stick with a Mozilla browser as a matter of principle. I don't like Google having so much of a monopoly over the browser market share (Chrome/Chromium/Brave/Vivaldi/etc etc etc), so that is why I am focusing my time here. :thumbup: Mozilla has its own history of anti-user shenanigans, but it at least seems the lesser of two evils. I like what Moonchild and the team are doing here. Hopefully I can get my theme finished up in a reasonable timeframe and contribute something back to the community.

When you do move to Linux, if you like endless customization options, the Plasma desktop is a good choice. If you prefer more of a simplistic, classic, function-over-form desktop, you might like Mate Desktop (based on older GTK2, like how PM is based on older FF). I would suggest avoiding anything based on the GNOME/GTK4 for the time being, they've been very hostile to user theming lately. Some GNOME app developers have publicly come out telling people to stop theming their apps.. they say it's not meant for tinkerers but GNOME has deliberately broken all third party themes with the GTK4/libadwaita controversy (some related technical reading here)

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

Re: Any workflow tips for theming? UI inspector? Fast testing?

Unread post by Blacklab » 2022-11-09, 21:21

Thanks for Linux hints. :) Yes, I've been reading up on latest Linux distros and desktops. Not quite a total Linux newbie as a few years ago tried several different Linux distros and desktop environments (DE) including MATE. My current thinking is to dual boot latest Linux Mint on a Win10 machine and then tweak away with UI. I'll probably try the Cinnamon DE first mainly because there seem to be a lot of good tweaks around to 'make Cinnamon UI look like Windows 7' and I have used Mint/Ubuntu in the past. Considering the Debian-based Mint (LMDE) this time too?

Only have laptops at home now so 'all black' themes are much less appealing on smaller, lower quality screens. I expect 'all black' may well look fabulous on a big bright monitor. :)

I think we live in a multi-browser world nowadays where you need a selection of browsers to hand just to check what websites are doing sometimes. Is it my browser or is it their coding? Parts of my bank's website would only work with a Chrome/Blink-based browser for a few weeks recently until coders fixed their cock-up!

Sadly lots of change coming over the hill next year with Chrome/Blink-based browsers moving to the much more restrictive Manifest Version 3 API... which looks like Google will succeed in neutering 'fully-fledged' Adblockers like uBlock Origin in all chromium browsers. (Quelle surprise! What with Google being the world's No 1. online advertising company!). Mozilla's statements about keeping elements of Manifest V2 that are needed to support fully-fledged Adblockers not wholly confidence inspiring. Having Pale Moon around with an entirely different browser engine may become a small beacon of light in a darkening world of Google's bid for online monopoly.

Also very recent announcement that Chrome will be dropping support for Windows 7 OS in the New Year... and the likelihood that Mozilla will probably follow suit some months later whenever their last Win7 compatible Firefox ESR series reaches end-of-support?

BTW - LibreWolf isn't a Chrome/Blink-based browser... its a 'fork' or perhaps more accurately a 're-complied' version of the latest stable Firefox release with all telemetry removed and hardening based on, or similar to, adding the 'ArkenFox user/js' to Firefox yourself. Seems to be a good effort AFAICS with regular updates following 1-2 days after each new Firefox version reaches Mozilla's stable release channel.

Locked