762914 - Buttons in Firefox 14 are without background

Status: UNCONFIRMED

(Firefox :: Toolbars and Customization, defect)

Description

[Roman Müller]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:14.0) Gecko/20100101 Firefox/14.0
Build ID: 20120605113340

Steps to reproduce:

After update to FF14 (beta) all icons in navigation panel changed (lost their background). I want the old ones with background... it was perfect.

http://fii.cz/vquqbsfk

Also the orange Firefox button is too high after update. Like across the whole navigation panel height...

This is how Firefox button was high before the update (but in the navigation panel) I moved it to the tab panel for demonstration:

http://fii.cz/kwxasb

Background of other icons is visible only when I will put cursor over them like this (cursor is not visible but its on the home icon):

http://fii.cz/rtptud

cant u just make it to look like before and let users to modify the look on their own using personas?... I hate this look. Its complete mess compared to previous one.

Disabling all adddons does not solve the issue and its same on the other computer.

Comment 1

[Marco Bonardo [:mak]]

The lack of backgrounds is part of the new Australis theme redesign, so it's wanted.

Not sure about the button height, may be expected or just a missing rule, hard to guess, could you provide the same screen to show difference before and after on the same toolbar?

(In reply to Roman Müller from comment #0)
> cant u just make it to look like before and let users to modify the look on
> their own using personas?

It's really hard, or impossible, to make a theme satisfying hundreds millions persons, that's why custom themes exist: https://addons.mozilla.org/firefox/themes/

Comment 2

[Roman Müller]

I probably cant provide you with screenshot of previous state. I would have to uninstall current version and install older one. But its prety simple to describe, that movable Firefox button was high exactly same as all other buttons in navigation panel (with background). Their height is visible when cursor is over them. See this screenshot where background of home button is visible, firefox button should be high the same:

http://fii.cz/rtptud

> It's really hard, or impossible, to make a theme satisfying hundreds
> millions persons, that's why custom themes exist:
> https://addons.mozilla.org/firefox/themes/

Exactly man, thats why Im surprised that is was changed because Im sure that many ppl including me like the old design while other ppl could change it with custom personas. What am I supposed to do now?...

Comment 3

[Roman Müller]

And on this screenshot you can see how high it should be. However it is placed in tab bar where it acts normaly, not navigation bar:

http://fii.cz/kwxasb

when its moved to navigation bar, its oversized to max height as visible in first screenshot of my first post.

Comment 4

[Roman Müller]

Well I managed to fix button size on my own using some simple analogy in file "browserOverlay.css". However, its still does not match new design of the reskined default theme (buttons without backroung). However Im unable to do it in the code of that file and I cant find source code of the default theme aswell. Can u please advise me how to modify code below to make Firefox button look like other buttons (same background and visible only on mouse over event):



.titlebar-placeholder[type="appmenu-button"] {
	display: none;
}

#appmenu-toolbar-button,
#appmenu-button {
	padding: 0 5px;
	min-width: 0;
}

toolbar:not([mode="text"]) #appmenu-toolbar-button > .toolbarbutton-icon,
toolbar:not([mode="text"]) #appmenu-button > .button-box .button-icon {
	list-style-image: url("chrome://branding/content/icon16.png");
}

toolbar[mode="icons"] #appmenu-toolbar-button > .toolbarbutton-text,
toolbar[mode="icons"] #appmenu-button > .button-box .button-text {
	display: none;
}

window[selectedSkin="classic/1.0"] #appmenu-container #appmenu-button {
	margin-top: 6px;
	margin-bottom: 6px;
	border-radius: 3px;
	border-top: 1px solid rgba(83,42,6,.4);
}

window[selectedSkin="classic/1.0"][privatebrowsingmode=temporary] #appmenu-container  #appmenu-button {
	border-color: rgba(43,8,65,.9);
}

window[selectedSkin="classic/1.0"] #appmenu-container #appmenu-button:hover:not(:active):not([open]) {
	border-color: rgba(83,42,6,.9);
}

window[selectedSkin="classic/1.0"][privatebrowsingmode=temporary] #appmenu-button:hover:not(:active):not([open]) {
	border-color: rgba(43,8,65,.9);
}

window[selectedSkin="classic/1.0"] #appmenu-container #appmenu-button:hover:active,
window[selectedSkin="classic/1.0"] #appmenu-container #appmenu-button[open] {
	border-radius: 0;
}

@media all and (-moz-windows-theme:aero) {
	window[selectedSkin="classic/1.0"] #appmenu-container #appmenu-button {
		margin-top: 0;
		margin-bottom: 0;
		border-top-width: 2px;
		-moz-border-top-colors: rgba(255,255,255,.5) rgba(83,42,6,.9);
	}

	window[selectedSkin="classic/1.0"][privatebrowsingmode=temporary] #appmenu-container #appmenu-button {
		-moz-border-top-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
	}

	window[selectedSkin="classic/1.0"] :-moz-any(#TabsToolbar, #addon-bar) #appmenu-container #appmenu-button {
		margin-top: 1px;
		margin-bottom: 1px;
	}
}

Comment 5

[Emm]

Try this and see if it makes you smile a bit.

https://addons.mozilla.org/en-us/firefox/addon/cstbb/