perf(drawer): Use passive event listeners to improve drawer perf.

Passive event listeners improve touch events performance, by letting
the browser know a listener commits to not cancelling events.
Also fixes pointer events implementation.

Author: Sérgio Gomes

demos/drawer/temporary-drawer.html

@@ -74,7 +74,7 @@
             Header here
           </div>
         </header>
-        <nav class="mdl-list-group">
+        <nav class="mdl-temporary-drawer__content mdl-list-group">
           <div id="icon-with-text-demo" class="mdl-list">
             <a class="mdl-list-item mdl-temporary-drawer--selected" href="#">
               <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">inbox</i>Inbox

packages/mdl-drawer/README.md

@@ -83,7 +83,7 @@ for any display size.
         Header here
       </div>
     </header>
-    <nav id="icon-with-text-demo" class="mdl-list">
+    <nav id="icon-with-text-demo" class="mdl-temporary-drawer__content mdl-list">
       <a class="mdl-list-item mdl-temporary-drawer--selected" href="#">
         <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
       </a>
@@ -114,7 +114,7 @@ very useful for visual alignment and consistency. Note that you can place conten
 
     <div class="mdl-temporary-drawer__toolbar-spacer"></div>
 
-    <nav id="icon-with-text-demo" class="mdl-list">
+    <nav id="icon-with-text-demo" class="mdl-temporary-drawer__content mdl-list">
       <a class="mdl-list-item mdl-temporary-drawer--selected" href="#">
         <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
       </a>
@@ -142,7 +142,7 @@ for placing the actual content, which will be bottom-aligned.
       </div>
     </header>
 
-    <nav id="icon-with-text-demo" class="mdl-list">
+    <nav id="icon-with-text-demo" class="mdl-temporary-drawer__content mdl-list">
       <a class="mdl-list-item mdl-temporary-drawer--selected" href="#">
         <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
       </a>
@@ -161,6 +161,7 @@ CSS classes:
 | -------------------------------------- | -------------------------------------------------------------------------- |
 | `mdl-temporary-drawer`                 | Mandatory. Needs to be set on the root element of the component.           |
 | `mdl-temporary-drawer__drawer`         | Mandatory. Needs to be set on the container node for the drawer content.   |
+| `mdl-temporary-drawer__content`        | Optional. Should be set on the list of items inside the drawer.            |
 | `mdl-temporary-drawer__toolbar-spacer` | Optional. Add to node to provide the matching amount of space for toolbar. |
 | `mdl-temporary-drawer__header`         | Optional. Add to container node to create a 16:9 drawer header.            |
 | `mdl-temporary-drawer__header-content` | Optional. Add to content node inside `mdl-temporary-drawer__header`.       |

packages/mdl-drawer/temporary/foundation.js

@@ -204,10 +204,6 @@ export default class MDLTemporaryDrawerFoundation extends MDLFoundation {
     }
 
     this.currentX_ = evt.touches ? evt.touches[0].pageX : evt.pageX;
-
-    if (this.direction_ * (this.currentX_ - this.startX_) < 0) {
-      evt.preventDefault();
-    }
   }
 
   handleTouchEnd_(evt) {

packages/mdl-drawer/temporary/index.js

@@ -50,9 +50,12 @@ export class MDLTemporaryDrawer extends MDLComponent {
       removeClass: className => this.root_.classList.remove(className),
       hasClass: className => this.root_.classList.contains(className),
       hasNecessaryDom: () => Boolean(this.drawer),
-      registerInteractionHandler: (evt, handler) => this.root_.addEventListener(util.remapEvent(evt), handler),
-      deregisterInteractionHandler: (evt, handler) => this.root_.removeEventListener(util.remapEvent(evt), handler),
-      registerDrawerInteractionHandler: (evt, handler) => this.drawer.addEventListener(util.remapEvent(evt), handler),
+      registerInteractionHandler: (evt, handler) =>
+          this.root_.addEventListener(util.remapEvent(evt), handler, util.applyPassive()),
+      deregisterInteractionHandler: (evt, handler) =>
+          this.root_.removeEventListener(util.remapEvent(evt), handler, util.applyPassive()),
+      registerDrawerInteractionHandler: (evt, handler) =>
+          this.drawer.addEventListener(util.remapEvent(evt), handler),
       deregisterDrawerInteractionHandler: (evt, handler) =>
           this.drawer.removeEventListener(util.remapEvent(evt), handler),
       registerTransitionEndHandler: handler => this.drawer.addEventListener('transitionend', handler),

packages/mdl-drawer/temporary/mdl-temporary-drawer.scss

@@ -70,6 +70,7 @@
     will-change: transform;
     box-sizing: border-box;
     overflow: hidden;
+    touch-action: none;
 
     @include mdl-rtl(".mdl-temporary-drawer") {
       transform: translateX(calc(100% + 20px));
@@ -89,6 +90,7 @@
     overflow-y: auto;
     box-sizing: border-box;
     -webkit-overflow-scrolling: touch;
+    touch-action: pan-y;
   }
 
   &__footer {

packages/mdl-drawer/util.js

@@ -18,14 +18,10 @@ const TAB_DATA = 'data-mdl-tabindex';
 const TAB_DATA_HANDLED = 'data-mdl-tabindex-handled';
 
 let storedTransformPropertyName_;
+let supportsPassive_;
 
-/**
- * Remap touch events to pointer events, if the browser doesn't support touch events.
- * @param {string} eventName The requested event name.
- * @param {Object} globalObj The global object, useful for testing (defaults to window).
- * @return {string} The remapped event name.
- */
-function remapEvent(eventName, globalObj = window) {
+// Remap touch events to pointer events, if the browser doesn't support touch events.
+export function remapEvent(eventName, globalObj = window) {
   if (!('ontouchstart' in globalObj.document)) {
     switch (eventName) {
       case 'touchstart':
@@ -42,53 +38,51 @@ function remapEvent(eventName, globalObj = window) {
   return eventName;
 }
 
-/**
- * Choose the correct transform property to use on the current browser.
- * @param {Object} globalObj The global object, useful for testing (defaults to window).
- * @return {string} The transform property name.
- */
-function getTransformPropertyName(globalObj = window) {
-  if (storedTransformPropertyName_ === undefined || globalObj !== window) {
+// Choose the correct transform property to use on the current browser.
+export function getTransformPropertyName(globalObj = window, forceRefresh = false) {
+  if (storedTransformPropertyName_ === undefined || forceRefresh) {
     const el = globalObj.document.createElement('div');
     const transformPropertyName = ('transform' in el.style ? 'transform' : '-webkit-transform');
-
-    if (globalObj === window) {
-      storedTransformPropertyName_ = transformPropertyName;
-    }
-    return transformPropertyName;
+    storedTransformPropertyName_ = transformPropertyName;
   }
 
   return storedTransformPropertyName_;
 }
 
-/**
- * Determine whether the current browser supports CSS properties.
- * @param {Object} globalObj The global object, useful for testing (defaults to window).
- * @return {boolean} Whether the current browser supports CSS properties.
- */
-function supportsCssCustomProperties(globalObj = window) {
+// Determine whether the current browser supports CSS properties.
+export function supportsCssCustomProperties(globalObj = window) {
   if ('CSS' in globalObj) {
     return globalObj.CSS.supports('(--color: red)');
   }
   return false;
 }
 
-/**
- * Save the tab state for an element.
- * @param {Element} el The element for which to save the tab state.
- */
-function saveElementTabState(el) {
+// Determine whether the current browser supports passive event listeners, and if so, use them.
+export function applyPassive(globalObj = window, forceRefresh = false) {
+  if (supportsPassive_ === undefined || forceRefresh) {
+    let isSupported = false;
+    try {
+      globalObj.document.addEventListener('test', null, {get passive() {
+        isSupported = true;
+      }});
+    } catch (e) { }
+
+    supportsPassive_ = isSupported;
+  }
+
+  return supportsPassive_ ? {passive: true} : false;
+}
+
+// Save the tab state for an element.
+export function saveElementTabState(el) {
   if (el.hasAttribute('tabindex')) {
     el.setAttribute(TAB_DATA, el.getAttribute('tabindex'));
   }
   el.setAttribute(TAB_DATA_HANDLED, true);
 }
 
-/**
- * Restore the tab state for an element, if it was saved.
- * @param {Element} el The element for which to restore the tab state.
- */
-function restoreElementTabState(el) {
+// Restore the tab state for an element, if it was saved.
+export function restoreElementTabState(el) {
   // Only modify elements we've already handled, in case anything was dynamically added since we saved state.
   if (el.hasAttribute(TAB_DATA_HANDLED)) {
     if (el.hasAttribute(TAB_DATA)) {
@@ -100,5 +94,3 @@ function restoreElementTabState(el) {
     el.removeAttribute(TAB_DATA_HANDLED);
   }
 }
-
-export {remapEvent, getTransformPropertyName, supportsCssCustomProperties, saveElementTabState, restoreElementTabState};

test/unit/mdl-drawer/util.test.js

@@ -55,7 +55,7 @@ test('getTransformPropertyName returns "transform" for browsers that support it'
       }
     }
   };
-  t.equal(utils.getTransformPropertyName(mockWindow), 'transform');
+  t.equal(utils.getTransformPropertyName(mockWindow, true), 'transform');
   t.end();
 });
 
@@ -67,7 +67,7 @@ test('getTransformPropertyName returns "-webkit-transform" for browsers that do
       }
     }
   };
-  t.equal(utils.getTransformPropertyName(mockWindow), '-webkit-transform');
+  t.equal(utils.getTransformPropertyName(mockWindow, true), '-webkit-transform');
   t.end();
 });
 
@@ -91,6 +91,30 @@ test('supportsCssCustomProperties returns dalse for browsers that do not support
   t.end();
 });
 
+test('applyPassive returns an options object for browsers that support passive event listeners', t => {
+  const mockWindow = {
+    document: {
+      addEventListener: function(name, method, options) {
+        return options.passive;
+      }
+    }
+  };
+  t.deepEqual(utils.applyPassive(mockWindow, true), {passive: true});
+  t.end();
+});
+
+test('applyPassive returns false for browsers that do not support passive event listeners', t => {
+  const mockWindow = {
+    document: {
+      addEventListener: function() {
+        throw new Error();
+      }
+    }
+  };
+  t.false(utils.applyPassive(mockWindow, true));
+  t.end();
+});
+
 test('saveElementTabState saves the tab index of an element', t => {
   const el = bel`<div id="foo" tabindex="42"></div>`;
   utils.saveElementTabState(el);