Styling of the tabs via userstyles is not possible anymore in Australis 28.0a

RESOLVED WORKSFORME

Status

()

Firefox
Theme
RESOLVED WORKSFORME
4 years ago
4 years ago

People

(Reporter: Robert Zenz, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

4 years ago
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:25.0) Gecko/20100101 Firefox/25.0 (Beta/Release)
Build ID: 20131028112903

Steps to reproduce:

It was always possible to style the tabs via userstyles (f.e. userChrome.css or UserStyles (AddOn)), this does not work anymore in Autralis. Assume the following css:

    .tabbrowser-tab, .tabs-newtab-button {
        margin: 0px !important;
        margin-left: -1px !important;
        margin-top: -3px !important;
        padding-right: 3px !important;
        padding-left: 5px !important;

        border: 0px solid #000000 !important;
        border-right: 1px solid #babdb6 !important;
        border-radius: 0px !important;
    }

css for the bookmarks bar is still applied and works.


Actual results:

The style of the tabs does not change at all. Even setting such things as background color does have no effect.


Expected results:

The tabs should honor the styling and change accordingly.
Blocks: 732583
Component: Untriaged → Theme
OS: Linux → All
Hardware: x86 → All
Version: 28 Branch → unspecified

Comment 1

4 years ago
Close as works for me?

The anatomy of a tab has changed, making it more versatile and more easily customizable.
So you'll have to do something along the lines of the following to 'reset' it:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tabbrowser-tab, .tab-stack, .tab-middle, .tab-background, .tab-background-middle, .tabs-newtab-button {
background: transparent none !important;
border: 0 none !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}

.tab-background-start, .tab-background-end,
.tab-background-start::before, .tab-background-end::before,
.tab-background-start::after, .tab-background-end::after {
content: none !important;
width: 0 !important;
}

As detailed in the "Building a Theme"¹ documentation you should get the DOM Inspector² extension which allows you to see bound (is that the proper term?) elements that are not visible to the built-in inspector or Firebug.

¹ https://developer.mozilla.org/en-US/docs/Building_a_Theme
² https://addons.mozilla.org/firefox/addon/dom-inspector-6622/

Comment 2

4 years ago
Resolving per comment #1. We didn't do anything that'd actually stop you from doing this - but we did change markup. That's not really something that we can revert or change.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.