From ddaaa2f9fc01618f241e7a27e732502dbd6ab25d Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Wed, 14 Sep 2016 19:02:57 -0700
Subject: [PATCH 1/2] use blocking-elements

---
 bower.json | 8 +++++---
 index.html | 3 +++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/bower.json b/bower.json
index 43891a29..751030b7 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,7 @@
   "private": true,
   "dependencies": {
     "polymer": "polymer/polymer#^1.4.0",
-    "app-layout": "polymerelements/app-layout#^0.10.0",
+    "app-layout": "polymerelements/app-layout#blocking-elements",
     "app-route": "polymerelements/app-route#^0.9.1",
     "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
     "iron-form": "polymerelements/iron-form#^1.0.0",
@@ -15,11 +15,13 @@
     "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0",
     "iron-localstorage": "polymerelements/iron-localstorage#^1.0.0",
     "iron-media-query": "polymerelements/iron-media-query#^1.0.0",
-    "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^1.0.0",
+    "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#blocking-elements",
     "iron-pages": "polymerelements/iron-pages#^1.0.0",
     "iron-selector": "polymerelements/iron-selector#^1.0.0",
     "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
-    "paper-spinner": "polymerelements/paper-spinner#^1.0.0"
+    "paper-spinner": "polymerelements/paper-spinner#^1.0.0",
+    "blockingElements": "PolymerLabs/blockingElements#issue-2",
+    "inert": "WICG/inert"
   },
   "devDependencies": {
     "web-component-tester": "^4.0.0"
diff --git a/index.html b/index.html
index aa9dd5ea..eb261ff3 100644
--- a/index.html
+++ b/index.html
@@ -73,5 +73,8 @@
     })();
   </script>
 
+  <script src="/bower_components/blockingElements/blocking-elements.js"></script>
+  <script src="/bower_components/inert/inert.js"></script>
+
 </body>
 </html>

From 7d383f48e1924564243b811a86abaa3e9ab0a3cd Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Fri, 16 Sep 2016 15:04:55 -0700
Subject: [PATCH 2/2] move blocking elements code to shop-app only

---
 bower.json               |  4 ++--
 src/shop-app.html        | 13 ++++++++++++-
 src/shop-cart-modal.html |  9 ---------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/bower.json b/bower.json
index 751030b7..09019ec6 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,7 @@
   "private": true,
   "dependencies": {
     "polymer": "polymer/polymer#^1.4.0",
-    "app-layout": "polymerelements/app-layout#blocking-elements",
+    "app-layout": "polymerelements/app-layout#^0.10.0",
     "app-route": "polymerelements/app-route#^0.9.1",
     "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
     "iron-form": "polymerelements/iron-form#^1.0.0",
@@ -15,7 +15,7 @@
     "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0",
     "iron-localstorage": "polymerelements/iron-localstorage#^1.0.0",
     "iron-media-query": "polymerelements/iron-media-query#^1.0.0",
-    "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#blocking-elements",
+    "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^1.0.0",
     "iron-pages": "polymerelements/iron-pages#^1.0.0",
     "iron-selector": "polymerelements/iron-selector#^1.0.0",
     "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
diff --git a/src/shop-app.html b/src/shop-app.html
index 606d0354..a6f7c966 100644
--- a/src/shop-app.html
+++ b/src/shop-app.html
@@ -291,7 +291,7 @@
     <!-- Lazy-create the drawer for small screen sizes. -->
     <template is="dom-if" if="[[_shouldRenderDrawer]]">
       <!-- Two-way bind `drawerOpened` since app-drawer can update `opened` itself. -->
-      <app-drawer opened="{{drawerOpened}}" swipe-open tabindex="0">
+      <app-drawer opened="{{drawerOpened}}" swipe-open no-focus-trap on-opened-changed="_updateBlockingElements">
         <iron-selector role="navigation" class="drawer-list" selected="[[categoryName]]" attr-for-selected="name">
           <template is="dom-repeat" items="[[categories]]" as="category" initial-count="4">
             <a name="[[category.name]]" href="/list/[[category.name]]">[[category.title]]</a>
@@ -472,6 +472,7 @@
       _onAddCartItem: function(event) {
         if (!this._cartModal) {
           this._cartModal = document.createElement('shop-cart-modal');
+          this._cartModal.addEventListener('opened-changed', this._updateBlockingElements.bind(this));
           Polymer.dom(this.root).appendChild(this._cartModal);
         }
         this.$.cart.addItem(event.detail);
@@ -532,6 +533,16 @@
 
       _computePluralizedQuantity: function(quantity) {
         return quantity + ' ' + (quantity === 1 ? 'item' : 'items');
+      },
+
+      _updateBlockingElements: function(event) {
+        var opened = event.detail.value;
+        var element = event.target;
+        if (opened) {
+          document.$blockingElements.push(element);
+        } else {
+          document.$blockingElements.remove(element);
+        }
       }
 
     });
diff --git a/src/shop-cart-modal.html b/src/shop-cart-modal.html
index fd41be02..435b2e65 100644
--- a/src/shop-cart-modal.html
+++ b/src/shop-cart-modal.html
@@ -114,13 +114,6 @@
         Polymer.IronOverlayBehaviorImpl
       ],
 
-      properties: {
-        withBackdrop: {
-          type: Boolean,
-          value: true
-        }
-      },
-
       hostAttributes: {
         role: 'dialog',
         'aria-modal': 'true'
@@ -133,7 +126,6 @@
 
       _renderOpened: function() {
         this.restoreFocusOnClose = true;
-        this.backdropElement.style.display = 'none';
         this.classList.add('opened');
       },
 
@@ -157,7 +149,6 @@
           this.fire('announce', 'Item added to the cart');
         } else {
           this._finishRenderClosed();
-          this.backdropElement.style.display = '';
         }
       },