[CSS][userChrome.css][Contribution] Mypal 68 (series) Browser, Unhiding UI Elements

Good Day All,

Mypal 68 series (currently through version 78.0.2), by @feodor2, has various UI elements that are hidden without a UI or setting option to unhide or un-obfuscate the UI elements.  Presumably, this is how it normally is with Mozilla Firefox Quantum, for which Mypal 68 series is a derivative work.  In (much) older versions of Firefox, these elements were not obfuscated or hidden, existing of the elements at issue permitting.

I hereby present a userChrome.css Cascading Style Sheet document that I created to make the UI element behave or be available reasonably again (as they once were).  I have had this style sheet for a while, but never posted it (I might have tried long ago but was having difficulty with posting troubles at the time).

The style sheet works on Mypal 68.x series generally and is intended to work across normal themes and style densities.  The CSS changes are generally made directly against the actions from the internal browser CSS.  An issue to note, is that #urlbar-go-button used to be .urlbar-go-button in the internal browser CSS and thus my provided userChrome.css's content should so be so adjusted if it is to be used with old versions of Mypal 68 that use the older reference.  I am uncertain (did not retain note) which browser version increment resulted in the change, but I believe it was a release during year 2024.

The style corrects the following problems (Changes described in the parentheses):

1. The Stop and Reload Buttons, in button container, are combined into one button space and only one button displays at a time and in a manner not select-able by the user.  (The Stop and Reload Buttons now should remain in separate button spaces (are still both together in a button container))
2. The Go Button is often hidden. (The Go button is now always shown.)
3. The Location Bar Dropdown marker is invisible despite being present. (The Location Bar Dropdown marker is made always visible.)
4. The Searchbox's Go button is often hidden. (The Searchbox's Go is now always shown).
5. Many Menubar menu items are hidden when something other than the keyboard (such as a mouse) is use to first open a Menubar menu. (Menubar items are now also displayed when something other than the keyboard (such as a mouse) is use to first open a Menubar menu).
6. Location bar Dropdown marker and Location Bar Go button (and relative also to the Location Bar Page Action Buttons container) are postponed in places where they might not be static (stay in the same place) and are in different relative places than classical design (here, meaning pre-Quantum).  (Item relative locations are adjusted so that to they are ordered in the classical layout (meaning pre-Quantum).

As a side note and unfortunately, with regards to the Location bar items positioning, for post-Quantum Firefox, the Mozilla design choice becomes instead to remove these UI elements so they do not display and cannot be used.

The userChrome.css CSS style sheet I provide is attached herewith and its content is the following:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/* --Section START---------------- */
	/* Separate Stop and Reload buttons (remains in its own container button) */

/* CSS cannot remove the encapulating container now present in Quantum */

#stop-button,
#reload-button
{
	display: -moz-box !important;
}

/* To suppress display of animation, Disable the filled stepping effect when button animating */
	/* This is done to prevent the animations onto the stop or reload buttons that includes pictures of the other button */
	/* This provides the classic-looking behavior for Firefox */
#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon,
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon {
  fill: none !important;
}

/* Must also disable the animation display */
#reload-button > .toolbarbutton-animatable-box,
#stop-button) > .toolbarbutton-animatable-box
{
  display: none !important;
}

/* Disable animation so things look right on dark and light (default) themes */
#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-duration: 0ms !important;
}
#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-duration: 0ms !important;
}
/* Remove pictures used for animations (which include stop and reload pictures together for both stop and reload buttons) */
/*  Important for dark theme to look okay if animation is allowed (duration). Otherwise, would look okay on normal theme */
/*  I have disabled animations with code above, but including here anyways for completeness  */
#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: none !important;
}
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: none !important;
}

/* ------------------Section END-- */


/* #page-action-buttons is Container for set of buttons that includes the Star button, Page Actions button, pageActionSeparator (a simple separator button that does nothing more), and Reading View (and maybe others) */
/* Explicitly set ordinal group to be before the explicitly set URLbar History Dropdown marker button and Go button */
/* Likley unnecessay in default theme, but perhaps good where order is different for other reason (such as another theme) */
#page-action-buttons
{
	-moz-box-ordinal-group: 97 !important;
}

/* Always display Location Bar "Go" button, and on the extememost postion (end of URLbar) */
/* Unhides the URLbar Go button and always display the button AND positions it at end of URLbar */
#urlbar-go-button
{
	-moz-box-ordinal-group: 99 !important;
	display: -moz-box !important;
}

/* Always display Location Bar Dropdown marker and position at end directly before postion of urlbar-go-button */
.urlbar-history-dropmarker
{
	-moz-box-ordinal-group: 98 !important;
	display: -moz-box !important;
		/* Needed to override the hiding when typing */
	opacity: 1 !important;
		/* By default when closed, marker is made transparent; this removes the transparency */
}

/* Unhide Searchbox Go button */
.search-go-button
{
	display: -moz-box !important;
}

/* Unhides extra hidden menu items if keyboard is not used to access the menu that contains them */
/* Exempting menu items that should remain hidden */
#main-menubar .show-only-for-keyboard:not([hidden="true"])
{
	display: -moz-box !important;
}

To use the CSS styles here provided, place the userChrome.css style sheet file in the browser user profile directory's "chrome" subdirectory.  If a userChrome.css file pre-exisists there, decide how to incorporate the changes I present in this style sheet, with the existing file, or optionally, replace the file (which may overwrite and prevent new usage of the previously installed userChrome.css file.)

A picture of the browser after my userChrome.css file is applied:
[Could not post here. Forum wants smaller picture size, despite already being small.]
Linking from image hosting site:

Enjoy.

userChrome.css

Edited April 8Apr 8 by Ascii2