1

Considering this xul markup:

<tabbox>
  <tabs>
    <tab>
      <textbox width="50">
    </tab>
  </tabs>
  <!-- ... -->
</tabbox>

... I am unable to select the <textbox> with my mouse. The <tab> shields off any mouse event to child nodes, it seems. How can I let the <textbox> receive mouse events?

I've tried attributes like mousethrough="always" and mousethrough="never" on both the <tab> and <textbox> element, but to be honest, I'm not entirely sure what that attribute is supposed to do. Furthermore I believe it's only applicable to elements in a <stack>.

I've also tried allowevents="true" on the <tab>, but that doesn't do anything either, unfortunately.

What does work, to some extent, is passing the focus through JavaScript, with something like:

theTab.addEventListener( 'focus', function( event ) {
  theTextbox.focus();
} );

... but that is too clunky, and still doesn't make the <textbox> behave properly (unable to select the text, etc.). I'd probably need to implement this for a whole slew of events, then.

So, what, if any, simple steps can I take to have child nodes of a <tab> element behave as expected?

Or do I perhaps need to completely extend the tab XBL, because a tab generally is not meant to behave the way I intend here?

edit:

It just occurred to me that I can probably visually fake it a little by omitting the tab altogether and just have a <textbox>, that appears like a tab, with:

<textbox id="someId"/>

#someId {
  -moz-appearance: tab
}

... and try to incorporate that somehow in the <tabs> element.

Still, I'd rather have a solution with an actual <tab>, such that I can let the <tab> behave as an actual <tab>, to some extent, as well (popping up a bit, when selected, etc.).

Codifier
  • 354
  • 1
  • 14
  • Just to be clear: Based on your XUL, you want the `label` of the `` to be a ``, correct? It is not that you want the `` contents to be/include a ``? Either way, please expand your code just a bit to include some `` content to show that this unusual usage is intentional, not a misunderstanding of how to use [``](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Tabboxes). – Makyen Mar 30 '15 at 16:36
  • When using [XUL Explorer](https://developer.mozilla.org/en-US/docs/XUL_Explorer) to test this, and having added an additional tab for testing, I found that it worked more, or less, as expected (`` content received focus and could be edited) under some conditions (that appeared to involve switching focus to another window. I have not yet determined the exact conditions for it to work (not that this intermittent functionality is sufficient, just interesting). – Makyen Mar 30 '15 at 16:43
  • @Makyen No, you understood correct. The ``s content are irrelevant — I want the label of a `` to be editable. For an extension I'm developing I want my users to be able to rename ``s inline. When a `` is selected, and they click some edit button (which will be next to the tabs), the ``'s label should become an editable ``. – Codifier Mar 30 '15 at 16:46
  • How about having the edit button open a pop-up where the user can edit the text and then have your JavaScript apply the edited text to the ``'s `label` attribute? This might make more sense from a UI point of view, if you are going to have a button to initiate the edit instead of having it editable 100% of the time. This way there is a clear end to the user editing the label with an already understood OK/Cancel dialog. – Makyen Mar 30 '15 at 16:55
  • @Makyen I see. That's kind of what is happening in Firefox as well, now that you mentioned it. I guess I'm kind of abusing a `` element here, in a way that they were not intended to be used. After inspecting the XBL bindings of ``, and related elements, I have this faint suspicion that I will have to build the element from scratch myself, with XBL. :-( For instance, when I look at the implementation of the close button on a browser tab, they seem to jump through loops as well to register the mouse click on the close button (which is actually handled by tabbrowser-tab**s**) – Codifier Mar 30 '15 at 17:00
  • The more I think about it, the more I like the pop-up idea if using a ` – Makyen Mar 30 '15 at 17:19
  • @Makyen That would have to be a last resort. I really want the user experience to be as smooth and inline, with as little dialog windows, as possible. Before using any pop-ups I'd probably just resort to a `` without a `` wrapper then. – Codifier Mar 30 '15 at 17:23
  • @Makyen Sorry about the constant delay, I keep getting interrupted here, and by chance constantly answer an earlier comment of yours, when you just submitted a new comment. ;-) Anyway, I see what you are getting at, but some type of inline editing capability appeals more to me than pop-ups/dialog windows. – Codifier Mar 30 '15 at 17:27
  • @Makyen PS.: The ``s will actually have context menus, with the option to rename, as well. And the actual position of the edit button is not entirely determined yet, I may actually end up placing an edit icon inside the ``, in stead of next to the ``s. I haven't fully decided yet. It's just tentative design for now. – Codifier Mar 30 '15 at 17:31
  • No problem...Then I would suggest something other than a ` – Makyen Mar 30 '15 at 18:11

0 Answers0