feat(tabs): add automatic scrolling when holding down paginator

src/lib/tabs/tab-header.html

@@ -1,8 +1,11 @@
 <div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4"
+     #previousPaginator
      aria-hidden="true"
      mat-ripple [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollBefore"
-     (click)="_scrollHeader('before')">
+     (click)="_handlePaginatorClick('before')"
+     (mousedown)="_handlePaginatorPress('before')"
+     (touchend)="_stopInterval()">
   <div class="mat-tab-header-pagination-chevron"></div>
 </div>
 
@@ -17,9 +20,12 @@
 </div>
 
 <div class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4"
+     #nextPaginator
      aria-hidden="true"
      mat-ripple [matRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollAfter"
-     (click)="_scrollHeader('after')">
+     (mousedown)="_handlePaginatorPress('after')"
+     (click)="_handlePaginatorClick('after')"
+     (touchend)="_stopInterval()">
   <div class="mat-tab-header-pagination-chevron"></div>
 </div>

src/lib/tabs/tab-header.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/layout-common';
+@import '../core/style/vendor-prefixes';
 @import './tabs-common';
 
 .mat-tab-header {
@@ -25,13 +26,16 @@
 }
 
 .mat-tab-header-pagination {
+  @include user-select(none);
   position: relative;
   display: none;
   justify-content: center;
   align-items: center;
   min-width: 32px;
   cursor: pointer;
   z-index: 2;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: none;
 
   .mat-tab-header-pagination-controls-enabled & {
     display: flex;

src/lib/tabs/tab-header.spec.ts

@@ -329,6 +329,200 @@ describe('MatTabHeader', () => {
       });
     });
 
+    describe('scrolling when holding paginator', () => {
+      let nextButton: HTMLElement;
+      let prevButton: HTMLElement;
+      let header: MatTabHeader;
+      let headerElement: HTMLElement;
+
+      beforeEach(() => {
+        fixture = TestBed.createComponent(SimpleTabHeaderApp);
+        fixture.componentInstance.disableRipple = true;
+        fixture.detectChanges();
+
+        fixture.componentInstance.addTabsForScrolling(50);
+        fixture.detectChanges();
+
+        nextButton = fixture.nativeElement.querySelector('.mat-tab-header-pagination-after');
+        prevButton = fixture.nativeElement.querySelector('.mat-tab-header-pagination-before');
+        header = fixture.componentInstance.tabHeader;
+        headerElement = fixture.nativeElement.querySelector('.mat-tab-header');
+      });
+
+      it('should scroll towards the end while holding down the next button using a mouse',
+        fakeAsync(() => {
+          assertNextButtonScrolling('mousedown', 'click');
+        }));
+
+      it('should scroll towards the start while holding down the prev button using a mouse',
+        fakeAsync(() => {
+          assertPrevButtonScrolling('mousedown', 'click');
+        }));
+
+      it('should scroll towards the end while holding down the next button using touch',
+        fakeAsync(() => {
+          assertNextButtonScrolling('touchstart', 'touchend');
+        }));
+
+      it('should scroll towards the start while holding down the prev button using touch',
+        fakeAsync(() => {
+          assertPrevButtonScrolling('touchstart', 'touchend');
+        }));
+
+      it('should not scroll if the sequence is interrupted quickly', fakeAsync(() => {
+        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+
+        dispatchFakeEvent(nextButton, 'mousedown');
+        fixture.detectChanges();
+
+        tick(100);
+
+        dispatchFakeEvent(headerElement, 'mouseleave');
+        fixture.detectChanges();
+
+        tick(3000);
+
+        expect(header.scrollDistance).toBe(0, 'Expected not to have scrolled after a while.');
+      }));
+
+      it('should clear the timeouts on destroy', fakeAsync(() => {
+        dispatchFakeEvent(nextButton, 'mousedown');
+        fixture.detectChanges();
+        fixture.destroy();
+
+        // No need to assert. If fakeAsync doesn't throw, it means that the timers were cleared.
+      }));
+
+      it('should clear the timeouts on click', fakeAsync(() => {
+        dispatchFakeEvent(nextButton, 'mousedown');
+        fixture.detectChanges();
+
+        dispatchFakeEvent(nextButton, 'click');
+        fixture.detectChanges();
+
+        // No need to assert. If fakeAsync doesn't throw, it means that the timers were cleared.
+      }));
+
+      it('should clear the timeouts on touchend', fakeAsync(() => {
+        dispatchFakeEvent(nextButton, 'touchstart');
+        fixture.detectChanges();
+
+        dispatchFakeEvent(nextButton, 'touchend');
+        fixture.detectChanges();
+
+        // No need to assert. If fakeAsync doesn't throw, it means that the timers were cleared.
+      }));
+
+      it('should clear the timeouts when reaching the end', fakeAsync(() => {
+        dispatchFakeEvent(nextButton, 'mousedown');
+        fixture.detectChanges();
+
+        // Simulate a very long timeout.
+        tick(60000);
+
+        // No need to assert. If fakeAsync doesn't throw, it means that the timers were cleared.
+      }));
+
+      it('should clear the timeouts when reaching the start', fakeAsync(() => {
+        header.scrollDistance = Infinity;
+        fixture.detectChanges();
+
+        dispatchFakeEvent(prevButton, 'mousedown');
+        fixture.detectChanges();
+
+        // Simulate a very long timeout.
+        tick(60000);
+
+        // No need to assert. If fakeAsync doesn't throw, it means that the timers were cleared.
+      }));
+
+      it('should stop scrolling if the pointer leaves the header', fakeAsync(() => {
+        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+
+        dispatchFakeEvent(nextButton, 'mousedown');
+        fixture.detectChanges();
+        tick(300);
+
+        expect(header.scrollDistance).toBe(0, 'Expected not to scroll after short amount of time.');
+
+        tick(1000);
+
+        expect(header.scrollDistance).toBeGreaterThan(0, 'Expected to scroll after some time.');
+
+        let previousDistance = header.scrollDistance;
+
+        dispatchFakeEvent(headerElement, 'mouseleave');
+        fixture.detectChanges();
+        tick(100);
+
+        expect(header.scrollDistance).toBe(previousDistance);
+      }));
+
+      /**
+       * Asserts that auto scrolling using the next button works.
+       * @param startEventName Name of the event that is supposed to start the scrolling.
+       * @param endEventName Name of the event that is supposed to end the scrolling.
+       */
+      function assertNextButtonScrolling(startEventName: string, endEventName: string) {
+        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+
+        dispatchFakeEvent(nextButton, startEventName);
+        fixture.detectChanges();
+        tick(300);
+
+        expect(header.scrollDistance).toBe(0, 'Expected not to scroll after short amount of time.');
+
+        tick(1000);
+
+        expect(header.scrollDistance).toBeGreaterThan(0, 'Expected to scroll after some time.');
+
+        let previousDistance = header.scrollDistance;
+
+        tick(100);
+
+        expect(header.scrollDistance)
+            .toBeGreaterThan(previousDistance, 'Expected to scroll again after some more time.');
+
+        dispatchFakeEvent(nextButton, endEventName);
+      }
+
+      /**
+       * Asserts that auto scrolling using the previous button works.
+       * @param startEventName Name of the event that is supposed to start the scrolling.
+       * @param endEventName Name of the event that is supposed to end the scrolling.
+       */
+      function assertPrevButtonScrolling(startEventName: string, endEventName: string) {
+        header.scrollDistance = Infinity;
+        fixture.detectChanges();
+
+        let currentScroll = header.scrollDistance;
+
+        expect(currentScroll).toBeGreaterThan(0, 'Expected to start off scrolled.');
+
+        dispatchFakeEvent(prevButton, startEventName);
+        fixture.detectChanges();
+        tick(300);
+
+        expect(header.scrollDistance)
+            .toBe(currentScroll, 'Expected not to scroll after short amount of time.');
+
+        tick(1000);
+
+        expect(header.scrollDistance)
+            .toBeLessThan(currentScroll, 'Expected to scroll after some time.');
+
+        currentScroll = header.scrollDistance;
+
+        tick(100);
+
+        expect(header.scrollDistance)
+            .toBeLessThan(currentScroll, 'Expected to scroll again after some more time.');
+
+        dispatchFakeEvent(nextButton, endEventName);
+      }
+
+    });
+
     it('should re-align the ink bar when the direction changes', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);
 
@@ -453,7 +647,9 @@ class SimpleTabHeaderApp {
     this.tabs[this.disabledTabIndex].disabled = true;
   }
 
-  addTabsForScrolling() {
-    this.tabs.push({label: 'new'}, {label: 'new'}, {label: 'new'}, {label: 'new'});
+  addTabsForScrolling(amount = 4) {
+    for (let i = 0; i < amount; i++) {
+      this.tabs.push({label: 'new'});
+    }
   }
 }