Roll Polymer

third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout-extracted.js

Index: third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout-extracted.js
diff --git a/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout-extracted.js b/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout-extracted.js
index e303e94855a2460d4811c14ef5c232d90650ca78..c92731f79decdb43c5aac8ba44ba0f7782ea2b01 100644
--- a/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout-extracted.js
+++ b/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout-extracted.js
@@ -15,15 +15,23 @@ Polymer({
         },
 
         /**
-         * If the viewport's width is smaller than this value, the panel will change to narrow layout.
-         * In the mode the drawer will be closed.
+         * If the viewport's width is smaller than this value, the panel will change to narrow
+         * layout. In the mode the drawer will be closed.
          */
         responsiveWidth: {
           type: String,
           value: '640px'
         },
 
-        _narrow: Boolean
+        /**
+         * Returns true if it is in narrow layout. This is useful if you need to show/hide
+         * elements based on the layout.
+         */
+        narrow: {
+          type: Boolean,
+          readOnly: true,
+          notify: true
+        }
       },
 
       listeners: {
@@ -32,7 +40,7 @@ Polymer({
       },
 
       observers: [
-        'resetLayout(_narrow, isAttached)'
+        'resetLayout(narrow, isAttached)'
       ],
 
       /**
@@ -61,7 +69,7 @@ Polymer({
           var drawerWidth = this.drawer.getWidth();
           var contentContainer = this.$.contentContainer;
 
-          if (this._narrow) {
+          if (this.narrow) {
             drawer.opened = drawer.persistent = false;
             contentContainer.classList.add('narrow');
 
@@ -84,6 +92,10 @@ Polymer({
         });
       },
 
+      _onQueryMatchesChanged: function(event) {
+        this._setNarrow(event.detail.value);
+      },
+
       _computeMediaQuery: function(forceNarrow, responsiveWidth) {
         return forceNarrow ? '(min-width: 0px)' : '(max-width: ' + responsiveWidth + ')';
       }