Scrollable tabs behavior is confusing

[arthurevans]

This may be an issue with the spec, but the behavior as it works now seems a little confusing. I had to read the spec before I figured out how to use the tabs.

Dragging the tabs or holding down the arrow button scrolls the tab strip. However, just clicking on the arrow button doesn't scroll at all, which lead me to think it was broken. It seems like it would be easier to understand if clicking the arrow shifted the tabs a bit, or scrolled one tab over.

Also, when clicking on a partially-obscured tab, I'd expect the tab to scroll so the full tab is visible.

[kristianmandrup]

Yeah, I had exactly the same experience. Counterintuitive. I thought it was broken. Makes sense that simply clicking on the arrow will shift/scroll the tabs one step in that direction.

@arthurevans "I had to read the spec before I figured out how to use the tabs". Which specs? Took me a a while even after looking at the code. The problem seems to be with these internal attributes:

    step: 10,    
    holdDelay: 10,

Which are sadly not public. attributes="noink nobar noslide scrollable hideScrollButton"

Would be nice if the scroll step functionality would be relative to the width of each tab instead of a fixed number.

    scrollToLeft: function() {
      this.$.tabsContainer.scrollLeft -= this.step;
    },

    scrollToRight: function() {
      this.$.tabsContainer.scrollLeft += this.step;
    },

And there should be a way to set holdDelay to 0, perhaps through a hold toggle (true/false) ?

    holdLeft: function() {
      this.holdJob = setInterval(this.scrollToLeft.bind(this), this.holdDelay);
    },

    holdRight: function() {
      this.holdJob = setInterval(this.scrollToRight.bind(this), this.holdDelay);
    },

At least now I get it ;) Always the option to extend and customise it to your liking...