New issue
Advanced search Search tips

Issue 672302 link

Starred by 0 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Feature


Participants' hotlists:
Tiff-List


Sign in to add a comment

When an examine page has multiple tabs, clicking on the scroll arrows should scroll by one tab

Project Member Reported by aga...@chromium.org, Dec 8 2016

Issue description

See https://sheriff-o-matic.appspot.com/trooper/examine/chromium.android.Android%20Cronet%20ARM64%20Builder.Sharded%20Perf%20Tests.4

There are a bunch of tabs partway down the page, with left/right arrows to handle the overflow. But just tapping on the arrows (touchpad tap, not full click) results in the tabs only scrolling a few pixels to the side.

Attempted screencast here: https://screencast.googleplex.com/cast/NTY5MjY4ODQ2ODgwMzU4NHxmY2VjNzJlMS0zNA
 
Labels: -Infra-DX Milestone-UX
That behavior isn't super customizable unfortunately: https://elements.polymer-project.org/elements/paper-tabs


Status: Available (was: Untriaged)
Owner: zhangtiff@chromium.org
Status: Assigned (was: Available)
It seems the Polymer team is pretty receptive to pull requests in general, so maybe we could customize the behavior. I found an older issue that referenced the same problem: https://github.com/PolymerElements/paper-tabs/issues/51 
Relevant pieces of code:


       _step: {
         type: Number,
         value: 10
       },
       _holdDelay: {
         type: Number,
         value: 1
       },
 
      _affectScroll: function(dx) {
        this.$.tabsContainer.scrollLeft += dx;
        var scrollLeft = this.$.tabsContainer.scrollLeft;
        this._leftHidden = scrollLeft === 0;
        this._rightHidden = scrollLeft === this._tabContainerScrollSize;
      },
      _onLeftScrollButtonDown: function() {
        this._scrollToLeft();
        this._holdJob = setInterval(this._scrollToLeft.bind(this), this._holdDelay);
      },
      _onRightScrollButtonDown: function() {
        this._scrollToRight();
        this._holdJob = setInterval(this._scrollToRight.bind(this), this._holdDelay);
      },
      _scrollToLeft: function() {
        this._affectScroll(-this._step);
      },
      _scrollToRight: function() {
        this._affectScroll(this._step);
      },


So it only scrolls 10 pixels, but it does so every millisecond. Seems like that could pretty easily be changed to scroll a much larger amount (e.g. one tab width), and then do so much less often (e.g. 100-200ms).

But I don't know how to compute the width of the next tab over :(
Labels: -Pri-2 Pri-3 Type-Feature
Labels: Milestone-Polish

Sign in to add a comment