commit 0be40a8ff686dd93104998473c0fe2a5a60b39b1
author Becky Siegel <beckysiegel@google.com> Thu Jul 06 18:11:07 2017 -0700
committer Becky Siegel <beckysiegel@google.com> Fri Jul 07 20:57:59 2017 +0000
tree d2ff000d6201092e9dd7c6c928caa4262db115ef
parent 3d8468ba805376f3cd25194cb9e6e6cd652fe6ac

Update handling of shadow dom

1. Instead of refreshing with ?dom=shadow, set window.Polymer before
   Polymer is loaded.

2. Show a pink bottom border on the header to indicate when we are using
   shadow dom, making it more obvious for testing.

Change-Id: I99130bf162c6301ef612e92f72214243d8a9512e

polygerrit-ui/app/elements/gr-app.html

diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index 754ca69d..1f8ae5e 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -13,6 +13,14 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<script>
+  // This must be set prior to loading Polymer for the first time.
+  if (localStorage.getItem('USE_SHADOW_DOM') === 'true') {
+    window.Polymer = {
+      dom: 'shadow',
+    };
+  }
+</script>
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/polymer-resin/standalone/polymer-resin.html">
@@ -67,6 +75,10 @@
       footer {
         color: var(--primary-text-color);
       }
+      gr-main-header.shadow {
+        /* Make it obvious for shadow dom testing */
+        border-bottom: 1px dotted pink;
+      }
       gr-main-header {
         background-color: var(--header-background-color);
         padding: 0 var(--default-horizontal-margin);
@@ -114,7 +126,10 @@
       }
     </style>
     <gr-fixed-panel id="header">
-      <gr-main-header id="mainHeader" search-query="{{params.query}}">
+      <gr-main-header
+          id="mainHeader"
+          search-query="{{params.query}}"
+          class$="[[_computeShadowClass(_isShadowDom)]]">
       </gr-main-header>
     </gr-fixed-panel>
     <main>
@@ -160,7 +175,7 @@
         <div class="errorMoreInfo">[[_lastError.moreInfo]]</div>
       </div>
     </main>
-    <footer r="contentinfo">
+    <footer r="contentinfo" class$="[[_computeShadowClass(_isShadowDom)]]">
       <div>
         Powered by <a href="https://www.gerritcodereview.com/" rel="noopener"
         target="_blank">Gerrit Code Review</a>

polygerrit-ui/app/elements/gr-app.js

diff --git a/polygerrit-ui/app/elements/gr-app.js b/polygerrit-ui/app/elements/gr-app.js
index d4e1bb1..bd29798 100644
--- a/polygerrit-ui/app/elements/gr-app.js
+++ b/polygerrit-ui/app/elements/gr-app.js
@@ -54,6 +54,7 @@
       _lastError: Object,
       _lastSearchPage: String,
       _path: String,
+      _isShadowDom: Boolean,
     },
 
     listeners: {
@@ -75,16 +76,8 @@
       '?': '_showKeyboardShortcuts',
     },
 
-    created() {
-      // If shadow dom cookie is set, reload the page using shadow dom.
-      if (util.getCookie('USE_SHADOW_DOM') === 'true') {
-        if (!window.location.href.includes('?dom=shadow')) {
-          window.location.href = window.location.href + '?dom=shadow';
-        }
-      }
-    },
-
     ready() {
+      this._isShadowDom = Polymer.Settings.useShadow;
       this.$.router.start();
 
       this.$.restAPI.getAccount().then(account => {
@@ -234,5 +227,9 @@
       this.params.justRegistered = false;
       this.$.registration.close();
     },
+
+    _computeShadowClass(isShadowDom) {
+      return isShadowDom ? 'shadow' : '';
+    },
   });
 })();