[Theme] Firefox 2, the theme, reloaded

[Benjamin Markson]

This is my attempt to emulate the Firefox 2, the theme, reloaded look under ff57 using userChrome.css



It sits on top of ff57's default theme with compact density.

It uses Aris' css code (https://github.com/Aris-t2/CustomCSSforFx) for the tabs, and the drop lists under the url and search bars.

It uses a number of pngs:
· Toolbar.png
· Toolbar-fullscreen.png
· close.png
· folder-item.png
· urlbar-history-dropmarker.png
· Go-arrow.png

...most of these come from Firefox 2, the theme, reloaded itself. However, I find the surest way to get them is to use the DOM Inspector on a pre-ff57 firfox that looks the way you want it to look. Find the list-style-image setting and its associated url (eg. chrome://browser/skin/Toolbar.png). Paste that url into Firefox and then Save Image As to grab the png.

The #history-button is a bit weird under ff57. Instead of activating the history sidebar it opens some kind of popup from where you can select its sidebar. Therefore I've chosen to use #sidebar-button as my history button. This sort of works. It does go straight to the sidebar but seems to show the last sidebar used. As I only use the history sidebar this works for me.

I still have some things to work on, including the History sidebar and the Find toolbar, both of which are as anaemic looking as the rest of ff57 out of the box.

userChrome.css

Code: Select all

/*AGENT_SHEET*/

	/* css code supplied by Aris:  https://github.com/Aris-t2/CustomCSSforFx */
	/* tabs */
	@import url(./css/classic_squared_tabs.css);
	/* dropdown list from URL bar */
	@import url(./css/ac_popup_classic_with_two_lines.css);
	/* dropdown list from Search bar */
	@import url(./css/searchbar_popup_engines_show_labels.css);


	/* My css hacks ********* */

	/* hide hamburger menu button and url bar menu button (the three dots thing) */
	#PanelUI-menu-button,
	#pageActionButton
	{
		display: none !important;
	}

	/* remove cicle artifacts from back button */
	#back-button
	{
		border-radius: 0 !important;
	}
	/* make both stop and reload buttons visible together - showing stop first */
	#stop-button, #reload-button
	{
		display: inline !important;
	}
	#stop-button
	{
		-moz-box-ordinal-group: 0 !important;
	}

	/* prettyfy the main buttons using the ff2 Toolbar.png */
    #nav-bar :-moz-any(#back-button, #forward-button, #stop-button, #reload-button,
	#sidebar-button, #bookmarks-button, #home-button, #new-tab-button, #fullscreen-button) .toolbarbutton-icon
    {
        list-style-image: url("./images/Toolbar.png") !important;
		background: none !important;
		border: 0 !important;
        padding: 4px !important;
    }

    #home-button .toolbarbutton-icon {-moz-image-region: rect(0px, 120px, 24px, 96px) !important;}
    #home-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(24px 120px 48px 96px) !important;}
    #new-tab-button .toolbarbutton-icon {-moz-image-region: rect(0px, 240px, 24px, 216px) !important;}
    #new-tab-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(24px 240px 48px 216px) !important;}
    #tab-view-deck #fullscreen-button .toolbarbutton-icon {list-style-image: url("./images/Toolbar-fullscreen.png") !important;}
    #fullscreen-button .toolbarbutton-icon {-moz-image-region: rect(0px, 25px, 23px, 0px) !important;}
    #fullscreen-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(0px 51px 23px 26px) !important;}

    #reload-button .toolbarbutton-icon {-moz-image-region: rect(0px 96px 24px 72px) !important;}
    #reload-button[disabled="true"] .toolbarbutton-icon {-moz-image-region: rect(48px 96px 72px 72px) !important;}
    #reload-button:not([disabled="true"]):hover:active .toolbarbutton-icon {-moz-image-region: rect(96px 96px 120px 72px) !important;}
    #reload-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(24px 96px 48px 72px) !important;}
    #stop-button .toolbarbutton-icon {-moz-image-region: rect(0px 72px 24px 48px) !important;}
    #stop-button[disabled="true"] .toolbarbutton-icon {-moz-image-region: rect(48px 72px 72px 48px) !important;}
    #stop-button:not([disabled="true"]):hover:active .toolbarbutton-icon {-moz-image-region: rect(96px 72px 120px 48px) !important;}
    #stop-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(24px 72px 48px 48px) !important;}
    #back-button .toolbarbutton-icon {-moz-image-region: rect(0px 24px 24px 0px) !important}
    #back-button:not([disabled="true"]):hover .toolbarbutton-icon, toolbar #back-button[buttonover="true"] .toolbarbutton-icon {-moz-image-region: rect(24px 24px 48px 0px) !important;}
    #back-button[disabled="true"] .toolbarbutton-icon {-moz-image-region: rect(48px 24px 72px 0px) !important;}
    #back-button:not([disabled="true"]):hover:active .toolbarbutton-icon {-moz-image-region: rect(96px 24px 120px 0px) !important;}
    #forward-button .toolbarbutton-icon {-moz-image-region: rect(0px 48px 24px 24px) !important;}
    #forward-button:not([disabled="true"]):hover .toolbarbutton-icon, toolbar #forward-button[buttonover="true"] .toolbarbutton-icon {-moz-image-region: rect(24px 48px 48px 24px) !important;}
    #forward-button[disabled="true"] .toolbarbutton-icon {-moz-image-region: rect(48px 48px 72px 24px) !important;}
    #forward-button:not([disabled="true"]):hover:active .toolbarbutton-icon {-moz-image-region: rect(96px 48px 120px 24px) !important;}
    #sidebar-button .toolbarbutton-icon {-moz-image-region: rect(0px, 168px, 24px, 144px) !important;}
    #sidebar-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(24px 168px 48px 144px) !important;}
    #bookmarks-button .toolbarbutton-icon {-moz-image-region: rect(0px, 192px, 24px, 168px) !important;}
    #bookmarks-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(24px 192px 48px 168px) !important;}
 
	/* coloured close icons on tabs */
	#TabsToolbar .close-icon
    {
		-moz-appearance: none !important;
		border: none !important;
		padding: 0px !important;
		transform: none !important;
		list-style-image: url("./images/close.png") !important;
		-moz-image-region: rect(0px, 64px, 16px, 48px) !important;
    }
    #TabsToolbar .close-icon[selected="true"]
    {
		-moz-image-region: rect(0, 16px, 16px, 0px) !important;
	}
    #TabsToolbar .close-icon:hover
    {
		-moz-image-region: rect(0, 32px, 16px, 16px) !important;
    }
    #TabsToolbar .close-icon:hover:active
    {
		-moz-image-region: rect(0, 48px, 16px, 32px) !important;
	}

	/* Order the toobars with tabs appearing last */
	#nav-bar
	{
		-moz-box-ordinal-group: 1 !important;
	}
	#PersonalToolbar
	{
		-moz-box-ordinal-group: 2 !important;
	}
	#TabsToolbar
	{
		-moz-box-ordinal-group: 3 !important;
	} 

	/* insert light/dark horizontal lines between toolbars  */
    #toolbar-menubar, #TabsToolbar
    {
        border-top: 1px solid rgb(255, 255, 255) !important;
        border-bottom: 1px solid rgb(128, 128, 128) !important;
    }
    #nav-bar
    {
        border-top: 1px solid rgb(255, 255, 255) !important;
    }

	/* 3D effect when hovering over buttons */
 	#tab-view-deck toolbarbutton
	{
		border-top: 1px solid ThreeDHighlight !important;
		border-bottom: 1px solid ThreeDShadow !important;
		border-style: solid !important;
		border-width: 1px !important;
		border-color: transparent !important;
	}
	#tab-view-deck toolbarbutton:hover:not([disabled="true"])
	{
		border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight !important;
		--toolbarbutton-hover-background:  none !important;
		--toolbarbutton-active-background: none !important;
	}

	/* colour folder icons for bookmarks */
	.bookmark-item[container]
	{
		list-style-image: url("./images/folder-item.png") !important;
		-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
	}

	/* make drop list button on url bar coloured with hover effect */
   .autocomplete-history-dropmarker
    {
		-moz-box-ordinal-group: 99 !important;
        opacity: 1 !important;
        background-color: -moz-Dialog !important;
        border-left: 1px solid black !important;
        list-style-image: url("./images/urlbar-history-dropmarker.png") !important;
        -moz-image-region: rect(0px, 22px, 14px, 11px) !important;
    }
    .autocomplete-history-dropmarker:hover
    {
        background-color: #F0F0F0 !important;
    }

	/* make go button on url bar visble and coloured with hover effect */
    .urlbar-go-button
    {
		-moz-box-ordinal-group: 100 !important;
		display: inline !important;
        background-color: -moz-Dialog !important;
        padding: 6px !important;
        margin-left: 0px !important;
        list-style-image: url("./images/Go-arrow.png") !important;
        -moz-image-region: rect(0px 11px 13px 0px) !important;
    }
    .urlbar-go-button:hover
    {
        background-color: #F0F0F0 !important;
        -moz-image-region: rect(0px 22px 13px 11px) !important;
    }
    .urlbar-go-button:hover:active
    {
        -moz-image-region: rect(0px 44px 13px 33px) !important;
    }
    .urlbar-go-button[disabled="true"]
    {
        -moz-image-region: rect(0px 33px 13px 22px) !important;
    }

Ben.

[rctgamer3]

This is my attempt to emulate the Firefox 2, the theme, reloaded look under ff57 using userChrome.css

Hi Ben,

Nice work in recreating the theme as a userChrome style. The easiest fix would be to just flip extensions.legacy.enabled to true, although I haven't tested my theme with it, it should continue to work until this preference ceases to exist, or until the existance of this pref gets too much attention.

[Benjamin Markson]

The easiest fix would be to just flip extensions.legacy.enabled to true

I'm still using ff52 ESR as my main browser. For me, ff57's webextension ecosystem is still too weak but I am periodically trying to build a version of ff57+ that's usable. A part of that is to have something without the minimalist black and white UI - a trend that works better on small, lower resolution screens, but just looks too flat and bland for me on a widescreen desktop monitor.

Besides which, most UI change serves no real utility. It is just change for changes sake.

I do think that userChrome.css themes may become a thing.

Ben.