skin tabs to look more like tabbrowser tabs



11 years ago
6 years ago


(Reporter: bhsieh, Unassigned)


Firefox Tracking Flags

(Not tracked)




11 years ago
In general, the tabbrowser tabs look much, much better than the default tabs. Unfortunately we can't always apply "tabbrowser-tabs" class, because there are are messy things like the close-tab button, and the left-right tab buttons.

Our current solution is to apply the "tabbrowser-tab" class to give each individual tab the appearance of a tab, and apply the other wanted "tabbrowser-tabs" skin features (like the skinny bar around the bottom of the tabs) basically by copy-pasting from the winstripe/pinstripe global css files. Note that the "tabbrowser-tab" class isn't a xul-defined class, it's just the name used internally in the bindings and css files that we're hijacking.

Our solution works perfectly for windows at the moment. In macs, everything looks fine except the spacer element between some tabs. Because the spacer doesn't exist in the tabbrowser tabs, there's no template for me to follow.

Honestly, I think that our tabs should just look like tabbrowser tabs by default, they look categorically worse than the tabbrowser at the moment.

Comment 1

11 years ago
Code snippets, basically it looks like this:


The global stylesheet where tabbrowser-tab is defined:

>  <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

Then actually apply the class in XUL:

>  <tabs id="qa_tabrow">
>    <tab id="qa-tabbar-qmo" class="tabbrowser-tab" />
>    <tab label="&qa.litmus.title;" class="tabbrowser-tab" />
>    <tab label="&;" class="tabbrowser-tab" />
>    ...
>  </tabs>

Then patch in the parts that aren't taken care of by the "tabbrowser-tab" class. Again, this is more or less pasted from the global tabbrowser css file:

>  #qa_tabbox tab, #qa_tabbox tabs spacer {
>  border-bottom: 1px solid #ACA899 !important;
> }
> .tabs-left, .tabs-right {
>  -moz-border-bottom-colors: #ACA899 !important;
> }
> #qa_tabbox tab[selected="true"] {
>  border-bottom: 1px solid #E8E5D8 !important;
> }
> tabs {
>  border-bottom: 3px solid #E8E5D8;
> }


11 years ago
Severity: normal → enhancement

Comment 2

11 years ago
Breaking news: As a sort of punishment for relying on internal, non-user-facing code, the "tabbrowser-tab" class was slightly redefined on trunk to include the close-tab button. Makes sense from a certain design standpoint, but it's bad news for us. Long-term fix would be to define a class to behave like we originally wanted. Longer-term fix would be to just make the default tabs look better. 

Short-term fix which I'll probably implement because my time's up at the end of this week would be to revert our tabs to their old, crappy appearance.
Severity: enhancement → normal

Comment 3

11 years ago
> .tab-close-button {
>    display: none !important;
> }

I'm thinking this will probably work for the lifetime of FFx3.

Comment 4

11 years ago
Unless this leads to terrible UI or ruins the user experience, this can probably wait until the next version of QAX.  If we do find an easy fix, it'll be nice to get the look and feel to match FF3.
Priority: -- → P2
Component: QA Community Extension → QA Community Extension
Product: Webtools → Other Applications
Version: Trunk → unspecified

Comment 5

10 years ago
Our current tabs do look a little wonky, especially if you've got a theme installed in your application.  We need to look into this. --> P2

Comment 6

10 years ago
As far as I know, no one is working on this, resetting assignee
Assignee: bhsieh → nobody
Litmus has been replaced by MozTrap. 

If we want an extension to integrate with MozTrap, it would be better to start from scratch with a new extension rather than trying to shoehorn that functionality into the >5 year old QAC.
Last Resolved: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.