346623 - Add overflow attribute to tabbrowser-tabs

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect)

Description

[Jay Goldman]

(Opened based on an IM conversation with mconnor)

We need to be able to check in CSS if the tabbrowser is in the overflow condition (in this case so that the alltabs button can change backgrounds so that it integrates with the .scrollbutton-down button). Basically, we need:

tabbrowser-tabs[overflow="true"]

Comment 1

[(not reading, please use [e-mail] instead)]

one idea:

in scrollbox.xml, remove the event.stopPropagation(); from the overflow / underflow handlers.

         this._scrollButtonUp.collapsed = true;
         this._scrollButtonDown.collapsed = true;
         var childNodes = document.getAnonymousNodes(this._scrollbox);
         if (childNodes && childNodes.length) {
           this.ensureElementIsVisible(childNodes[0]);
           if (childNodes.length > 1)
             this.ensureElementIsVisible(childNodes[childNodes.length-1]);
         }
-        event.stopPropagation();
       ]]></handler>

       <handler event="overflow"><![CDATA[
         this._scrollButtonUp.collapsed = false;
         this._scrollButtonDown.collapsed = false;
         this._updateScrollButtonsDisabledState();
-        event.stopPropagation();
       ]]></handler>

in tabbrowser.xml, add underflow and overflow handlers to set / remove this attribute:

+      <handler event="underflow"><![CDATA[
+        if (event.target.localName == "tabs") {
+          this.removeAttribute("overflow");
+          event.stopPropagation();
+        }
+      ]]></handler>
+
+      <handler event="overflow"><![CDATA[
+        if (event.target.localName == "tabs") {
+          this.setAttribute("overflow", "true");
+          event.stopPropagation();
+        }
+      ]]></handler>

Q:  what side effect will not stopping the underflow /overflow event have on other consumers of the scrollbox binding?

or, a second idea...can we just do this?

.tabbrowser-tabs > .arrowscrollbox-foo > .scrollbutton-down[collapsed="true"] {
  background-color: red;
}

(note, the arrowscrollbox doesn't have a class.)

asaf, what do you think?

Comment 2

[Jay Goldman]

Attachment: Initial mockup of tabstrip overflow navigation on Mac OS X

Shows the first pass at what the tabstrip navigation might look like in overflow mode. Of particular relevance here is how the right .scrollbutton and the .alltabs box are integrated.

Comment 3

[Jay Goldman]

The first idea sounds like a good one - though I don't know the ramifications for stopping the event propagation. 

The problem I can see with the second suggestion is that we don't actually want to change the look of the .scrollbutton - we want the state of the .scrollbutton to affect the display of another element. The idea is that the right .scrollbutton and the .alltabs box will be joined together with the .scrollbutton is visible and that the .alltabs box will visually stand alone with it's not (i.e.: the background of the .alltabs box needs to change in the overflow state to remove its left border and tab corner and to integrate with the right .scrollbutton). I've attached a new attachment of the final mockup for OS X which shows our first pass at what that might look like - it's changed a bit since then but it will serve to give an idea of what we're trying to accomplish. When we're not in overflow, the .alltabs box looks like the left edge of a tab with a dropmark on it, which suggests that there is more tab off the right edge of the screen.

So, basically, we need a mechanism to change the appearance of the .alltabs box when we're in overflow, rather than to change the .scrollbuttons based on their collapsed state.

Thanks Seth!

Comment 4

[(not reading, please use [e-mail] instead)]

jay, thanks for the explanation (and screen shot).

I'll wait to see what asaf and mconnor think of the patch I'm proposing.

Comment 5

[Asaf Romano (gone)]

No, it would't be safe to let the event bubble.

One option is to add this to the arrowscrollbox binding and make tabbrowser-tabs extend arrowscrollbox-clicktoscroll instead of having it as one of its childs.

Comment 6

[Asaf Romano (gone)]

Taking.

Comment 7

[Asaf Romano (gone)]

Attachment: patch

Comment 8

[Asaf Romano (gone)]

mozilla/toolkit/content/widgets/scrollbox.xml 1.18
mozilla/toolkit/content/widgets/tabbrowser.xml 1.186

Comment 9

[Mike Connor [:mconnor]]

Comment on attachment 231679 [details] [diff] [review]
patch

a=mconnor on behalf of drivers for checkin to 1.8 branch for 1.8.1

Comment 10

[Asaf Romano (gone)]

1.8 branch:
mozilla/toolkit/content/widgets/scrollbox.xml 1.3.52.7
mozilla/toolkit/content/widgets/tabbrowser.xml  1.103.2.76