Fix screen resizer memory leak for mdl layout

src/layout/layout.js

@@ -16,7 +16,6 @@
  */
 (function() {
   'use strict';
-
   /**
    * Class constructor for Layout MDL component.
    * Implements MDL component design pattern defined at:
@@ -140,6 +139,12 @@
     return window.matchMedia(query);
   };
 
+  var mediaQuery = MaterialLayout.prototype.matchMedia_(
+    /** @type {string} */ (MaterialLayout.prototype.Constant_.MAX_WIDTH));
+  mediaQuery.onchange = screenSizeHandler;
+
+  MaterialLayout.prototype.screenSizeMediaQuery_ = mediaQuery;
+
   /**
    * Handles scrolling on the content.
    *
@@ -190,27 +195,39 @@
    *
    * @private
    */
-  MaterialLayout.prototype.screenSizeHandler_ = function() {
-    if (this.screenSizeMediaQuery_.matches) {
-      this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
 
-      if (this.drawer_) {
-        this.drawer_.setAttribute('aria-hidden', 'true');
-      }
-    } else {
-      this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
-      // Collapse drawer (if any) when moving to a large screen size.
-      if (this.drawer_) {
-        this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
-        this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+  function screenSizeHandler(e) {
+    // modified to query dependent elements rather than binding materialLayout to windows media query result
+    var materialLayouts = document.querySelectorAll('.mdl-layout');
+
+    for (var i = 0; i < materialLayouts.length; i++) {
+      var layout = materialLayouts[i];
 
-        if (this.element_.classList.contains(this.CssClasses_.FIXED_DRAWER)) {
-          this.drawer_.setAttribute('aria-hidden', 'false');
+      if (layout) {
+        var drawerElement = layout.querySelector('.mdl-layout__drawer');
+
+        if (e.matches) {
+          layout.classList.add('is-small-screen');
+          if (drawerElement) {
+            drawerElement.setAttribute('aria-hidden', 'true');
+          }
+        } else {
+          layout.classList.remove('is-small-screen');
+          // Collapse drawer (if any) when moving to a large screen size.
+          if (drawerElement) {
+            drawerElement.classList.remove('is-visible');
+            var obfuscator = layout.querySelector('.mdl-layout__obfuscator'); // corrected selector
+            if (obfuscator) {
+              obfuscator.classList.remove('is-visible');
+            }
+            if (layout.classList.contains('mdl-layout--fixed-drawer')) {
+              drawerElement.setAttribute('aria-hidden', 'false');
+            }
+          }
         }
       }
     }
-  };
-
+  }
   /**
    * Handles events of drawer button.
    *
@@ -223,7 +240,6 @@
         // prevent scrolling in drawer nav
         evt.preventDefault();
       } else {
-        // prevent other keys
         return;
       }
     }
@@ -433,10 +449,8 @@
 
       // Keep an eye on screen size, and add/remove auxiliary class for styling
       // of small screens.
-      this.screenSizeMediaQuery_ = this.matchMedia_(
-          /** @type {string} */ (this.Constant_.MAX_WIDTH));
-      this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
-      this.screenSizeHandler_();
+
+      screenSizeHandler(this.screenSizeMediaQuery_);
 
       // Initialize tabs, if any.
       if (this.header_ && this.tabBar_) {

test/unit/layout.js

@@ -22,6 +22,10 @@ describe('MaterialLayout', function () {
   }
 
   MockMediaQueryList.registry = {};
+  if(window.MaterialLayout.prototype.screenSizeMediaQuery_){
+    var query = window.MaterialLayout.prototype.Constant_.MAX_WIDTH
+    MockMediaQueryList.registry[query] = new MockMediaQueryList(query)
+  }
 
   MockMediaQueryList.mockMatchMedia = function(query) {
     if (! MockMediaQueryList.registry.hasOwnProperty(query)) {