userChrome.css

[Mayayana]

I thought Ed Mullin's idea was a ood one -- to share
ideas about userChrome.css. Like userContent.css,
there seems to be no definitive reference; only
websites with a handful of tricks. So it might be
useful for people to pool their "tricks".

Caveat: Support for various things is no better
documented than the options themselves. Example:
In older versions of FF one can assign a custom
"throbber" icon. In later versions it doesn't work.

The basic idea is that userChrome.css is a variant
of CSS styles. But it can be quirky. and finding out
the IDs of items that one wants to style can be difficult.

Here are a few things I use. The samples here can be
applied to many other things if one just finds the IDs.
But it's also a personal preference thing. For instance,
I remove all "Open in New Tab" menu items. Someone
else might want to remove all "Open in New Window".

/* This customizes the font and text size on the menu */

menubar, menubutton, menulist, menu, menuitem {
font-family: "Gill sans";
font-size: 10px;
color: #0000A0;
line-height: 1.1;
}

/* customize font on bookmark items: */

menu.bookmark-item {
color: #0000A0;
font-weight: 500;
font-size: 10px;
line-height: 1.1;
}

/* assign background image for menu.
image goes in chrome folder.*/

menupopup, popup, menubar, toolbox, toolbar, .tabbrowser-tabs
{background-image:
url("back.gif");}

/* remove open in new tab from context menu and file menu,
also open in private window from both file and context menu.
This is because I don't use tabs but often open pages in
a new window. These are just cleaning up unused items.*/

menuitem[label="New Tab"] {display: none !important;}
menuitem[label="New Private Window"] {display: none !important;}
#context-openlinkintab {display: none !important;}
#context-openlinkprivate {display: none !important;}
#context-bookmarklink {display: none !important;}

/* remove "search for..." on context menu */
#context-searchselect {display: none !important;}

/* remove pointless bookmarks toolbar on menu,
plus lines around it. */

#bookmarksToolbarFolderMenu { display: none !important;}
#organizeBookmarksSeparator { display: none !important;}
/* remove extra bookmark menu separators */
#bookmarksToolbarSeparator { display: none !important;}
#bookmarksMenuItemsSeparator { display: none !important;}
/* remove the "Subscribe to This Page" from bookmarks */
#subscribeToPageMenuitem, #subscribeToPageMenupopup {display: none
!important;}

[Mr. Man-wai Chang]

On 2/12/2016 11:39 PM, Mayayana wrote:
> Here are a few things I use. The samples here can be
> applied to many other things if one just finds the IDs.
> But it's also a personal preference thing. For instance,
> I remove all "Open in New Tab" menu items. Someone
> else might want to remove all "Open in New Window".

Thank you for sharing, Master!

[James Moe]

On 12/02/2016 08:39 AM, Mayayana wrote:
> to share
> ideas about userChrome.css. Like userContent.css,
> there seems to be no definitive reference; only
> websites with a handful of tricks.
>

This may help:
<http://kb.mozillazine.org/Chrome_element_names_and_IDs>

--
James Moe
jmm-list at sohnen-moe dot com
Think.

[B00ze]

On 2016-12-02 10:39, Mayayana <maya...@invalid.nospam> wrote:

> I thought Ed Mullin's idea was a ood one - to share

> ideas about userChrome.css. Like userContent.css,
> there seems to be no definitive reference; only
> websites with a handful of tricks. So it might be
> useful for people to pool their "tricks".

Alright, here's some portions of my userChrome. All of these together
work towards one goal: The Bookmarks menu should include ONLY bookmarks,
just like Internet Explorer's. For some reason, Mozilla likes to fill
the Bookmarks Menu with dozens of useless items that I never use - this
is even worst in the latest versions, with the last 5 opened tabs
showing-up in the menu. I also get rid of the "open all in tabs" that
Firefox plasters everywhere - if I want to open all the tabs in a folder
I just right-click the folder; no need to see a menu entry for every
folder in the bookmarks. Here we go:

/* Hide most entries in bookmarks menu */
/* To replace Show-All-Bookmarks just create a bookmark to: */
/* chrome://browser/content/places/places.xul */

#bookmarksMenuPopup menuitem[id="bookmarksShowAll"],
#bookmarksMenuPopup #organizeBookmarksSeparator,
#bookmarksMenuPopup menuitem[id="menu_bookmarkThisPage"],
#bookmarksMenuPopup menuitem[id="subscribeToPageMenuitem"],
#bookmarksMenuPopup #bookmarksToolbarSeparator,
#bookmarksMenuPopup menu[container="true"][id="bookmarksToolbarFolderMenu"],
#bookmarksMenuPopup #bookmarksMenuItemsSeparator,
#bookmarksMenuPopup menuitem[id="menu_unsortedBookmarks"],
#bookmarksMenuPopup
menuseparator[class="hide-if-empty-places-result"][builder="end"]
{display: none !important; }

/* Menu Wizard Spurious Separator @ end of Bookmarks root */

#bookmarksMenuPopup
menuseparator[id="s3mw....menuseparator.bookmarksMenuItemsSeparator."]
{display: none !important; }

/* FFOX 37 with Classic Theme Restorer:
Hide the RSS Feed item in Bookmarks menu since we now have it in the
location bar */

#bookmarksMenuPopup menu[id="subscribeToPageMenupopup"] {display: none
!important; }
#BMB_bookmarksPopup #BMB_subscribeToPageMenupopup {display: none
!important; }

/* FFOX 37 Bookmarks Button/Panel in Toolbar */

#BMB_bookmarksPopup #BMB_viewBookmarksSidebar,
#BMB_bookmarksPopup #BMB_bookmarksShowAllTop,
#BMB_bookmarksPopup #BMB_bookmarksShowAllTop+menuseparator,
#BMB_bookmarksPopup #BMB_subscribeToPageMenuitem,
#BMB_bookmarksPopup #BMB_subscribeToPageMenupopup+menuseparator,
#BMB_bookmarksPopup #BMB_bookmarksToolbar,
#BMB_bookmarksPopup #BMB_unsortedBookmarks,
#BMB_bookmarksPopup #BMB_unsortedBookmarks+menuseparator {display: none
!important; }

/* FFOX 38 Pocket Bookmarks Menu/Panel */

#bookmarksMenuPopup menu[id="menu_pocket"],
#bookmarksMenuPopup #menu_pocketSeparator,
#BMB_bookmarksPopup #BMB_pocket,
#BMB_bookmarksPopup #BMB_pocketSeparator {display: none !important; }

/* FF49 Recently Bookmarked */

#BMB_recentBookmarks,
#BMB_recentBookmarks+.bookmark-item,
#BMB_recentBookmarks+.bookmark-item+.bookmark-item,
#BMB_recentBookmarks+.bookmark-item+.bookmark-item+.bookmark-item,
#BMB_recentBookmarks+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item,
#BMB_recentBookmarks+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item,
#BMB_recentBookmarks+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item+menuseparator
{display:none!important;}

#menu_recentBookmarks,
#menu_recentBookmarks+.bookmark-item,
#menu_recentBookmarks+.bookmark-item+.bookmark-item,
#menu_recentBookmarks+.bookmark-item+.bookmark-item+.bookmark-item,
#menu_recentBookmarks+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item,
#menu_recentBookmarks+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item,
#menu_recentBookmarks+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item+.bookmark-item+menuseparator
{display:none!important;}

/* --------------------------------------------- */
/* Remove "Open All in Tabs" from Bookmarks Menu */
/* --------------------------------------------- */

menuseparator.bookmarks-actions-menuseparator,
menuitem.openintabs-menuitem {display:none !important; }

With all of the above you will have only bookmarks in your menus/panels.

Regards,

--
! _\|/_ Sylvain / B00...@hotmail.com
! (o o) Member:David-Suzuki-Fdn/EFF/Red+Cross/SPCA/Planetary-Society
oO-( )-Oo Windows error 1A Data overwritten, terribly sorry.

[Mr. Man-wai Chang]

On 3/12/2016 9:44 AM, B00ze wrote:
>
> Alright, here's some portions of my userChrome. All of these together

> work towards one goal: The Bookmarks menu should include ONLY ...

[James Moe]

On 12/02/2016 08:39 AM, Mayayana wrote:

firefox v50.0.2

> to share
> ideas about userChrome.css. Like userContent.css,
> there seems to be no definitive reference;
>

After researching this further, I found what could be considered the
"definitive reference."
See <https://developer.mozilla.org/en-US/docs/Building_a_Theme>. There
is no date for the article. The paths listed have changed in later
version of FF; it may take a bit of creativity to find the correct path.
The default styles (and a load of other stuff) is located in a file
called <omni.ja> which is a ZIP archive. After a bit of poking around I
found that file at </usr/lib64/firefox/omni.ja> (I have a linux OS).
Create a directory for the expanded archive. The CSS files of interest
are located in <chrome/toolkit/skin/classic/global/>.

[Mayayana]

"James Moe" <jimoeD...@sohnen-moe.com> wrote

| After researching this further, I found what could be considered the
| "definitive reference."
| See <https://developer.mozilla.org/en-US/docs/Building_a_Theme>.

|The CSS files of interest
| are located in <chrome/toolkit/skin/classic/global/>.

That doesn't look like a reference to me. It seems to
be something like the default appearance CSS for the
GUI.
Your first link had a number of things, but I don't know
of any actual reference that lists all GUI element IDs
and all options. Likewise with userContent.css. Some of
the options are not standard. They're just made up
by the Mozillians. For instance:

menuitem[label="New Tab"]

That points to File -> New Tab, but that syntax
is not any kind of CSS that I'm familiar with. The
various -moz-* CSS properties are also made up and
not standard CSS.

Then there are the changes with versions. It used
to be feasible to set a custom "throbber" animation,
and still is in Pale Moon, but at some point that
functionality was just broken in FF and I'm not aware
of anyplace where the functionality by version is
documented.

That's the kind of docs that are normally published
to go with any kind of API, but with Firefox the "API"
amounts to little more than hearsay and some tweak
samples.

[James Moe]

On 12/09/2016 08:36 PM, Mayayana wrote:
> Your first link had a number of things, but I don't know
> of any actual reference that lists all GUI element IDs
> and all options.
>

It is not a "reference" in the sense where the elements are described
in English. It has all of the GUI elements that can be altered by
someone who wishes to change the how the GUI looks using
<userChrome.css>. It is the starting point for those who wish to create
themes.
You do need to know CSS.

> Some of
> the options are not standard. They're just made up
> by the Mozillians. For instance:
>
> menuitem[label="New Tab"]
>
> That points to File -> New Tab, but that syntax
> is not any kind of CSS that I'm familiar with.
>

That is standard CSS syntax. The text in the square bracket is known
as an attribute selector; it allows finer control over what is selected.
In this case, it is any class named "menuitem" and has a Label attribute
of "New Tab."

[EE]

There are references for userContent.css and userChrome.css here:
http://kb.mozillazine.org/UserChrome.css
http://kb.mozillazine.org/UserContent.css

[Mayayana]

"EE" <nu...@bees.wax> wrote

| There are references for userContent.css and userChrome.css here:
| http://kb.mozillazine.org/UserChrome.css
| http://kb.mozillazine.org/UserContent.css
|

That's another case of general instructions with
some links to samples. It's important to have the
basic info: the names of the files, where to find
them, and what they can be used for. But beyond
that, no one has found an actual reference to
possible settings, with all IDs and options. I doubt
it exists. James Moe's partial listing is the most info
I've seen in one place, but that only covers a few
items and is not entirely accurate. #throbber, for
instance. Having the ID does no good because
setting a custom throbber no longer works. And even
the ID seems to be wrong. In Pale Moon I can change
the throbber with the following:

#navigator-throbber {list-style-image : url("static.gif") !important;}
#navigator-throbber[busy="true"] {list-style-image : url("moving.gif")
!important;}

That's the same code that used to work in Firefox.
So the ID is not #throbber. Either way, I never would
have been able to figure out the necessary "CSS" by
knowning real HTML and CSS. That's why I suggested
sharing actual settings that are known to work.

Many of the optional settings are just not self-evident.
(B00ze's post is a good example.) As James Moe pointed
out, it turns out "menuitem" is legitimate HTML, but only
sort of. It's HTML5 only supported by Firefox. And
"menuseparator" is not HTML at all. Yet those are among
the obscure code elements needed to clean up the
bookmarks menu.

But it looks like few people have dabbled in this at
all. Maybe most people don't care. Aside from my listing
and B00ze's, no one else has posted any samples.

[EE]

You want samples? Here are some samples:

#subscribeToPageMenuitem, #subscribeToPageMenupopup {
display: none !important;}

#BMB_subscribeToPageMenuitem, #BMB_subscribeToPageMenupopup
{ display: none !important; }
#BMB_unsortedBookmarks,
#BMB_viewBookmarksToolbar, #BMB_viewBookmarksToolbar+menuseparator
{display: none !important;}

menu.bookmark-item,
menuitem.bookmark-item {
max-width: 48em !important;
}

/* Increase size/height of the expanded bookmarks panel */
#editBMPanel_folderTree,
#editBookmarkPanel {min-width:350px !important; min-height:350px
!important;}

#search-container {
-moz-appearance: none !important;
min-width: 180px !important;
max-width: 180px !important;}

/* Remove wasted space from tab buttons */
..tabbrowser-tab {
border: 1px solid #000 !important;
max-width: 350px !important;
margin: 0px 0px 0px 0px !important;}

..tab-close-button {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
border: 0px !important;
margin-right: 0px !important;
border: none !important;}

..tab-throbber, .tab-icon {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
border: 0px !important;
margin-left: 0px !important;
-moz-margin-end: 0px !important;
border: none !important;}

..tabbrowser-tab[fadein]:not([pinned]) {
min-width: 16px !important;
max-width: 320px !important;
}
#alltabs-button {visibility: visible !important;}

/*Dialog Boxes*/
/*Size of Options/Preferences window*/
#BrowserPreferences {width: 1000px !important; height: 700px !important;}

/*Unlist Site Settings*/
listitem[preference="privacy.cpd.siteSettings"] { display:none!important; }
#SanitizeDialog checkbox[label="Site Preferences"] { visibility: hidden
!important; }

/*Global UI font*/
* {font-family: Trebuchet MS !important;
font-size: 15px !important;
}

What I consider useful, you might not, however.