MD Settings: in cr_dialog, prevent intersectionObserver from firing early.

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview 'cr-dialog' is a component for showing a modal dialog. If the
  * dialog is closed via close(), a 'close' event is fired. If the dialog is
  * canceled via cancel(), a 'cancel' event is fired followed by a 'close' event.
  * Additionally clients can inspect the dialog's |returnValue| property inside
  * the 'close' event listener to determine whether it was canceled or just
@@ skipping 27 matching lines @@
       value: false,
     },
 
     showScrollBorders: {
       type: Boolean,
       value: false,
       reflectToAttribute: true,
     },
   },
 
+  observers: ['onOpenChanged_(open)'],

[dpapad, 2017/04/13 01:12:12]

You probably checked this already, but does this work without adding an "open"
as a Polymer property within the "properties" section?

[scottchen, 2017/04/13 20:17:51]

It does work, but unfortunately found out that observing |open| messes with its
native behavior. We started getting failing tests because dialog.open became
''/null instead of true/false after being observed.

Submitted another patch to use MutationObserver instead.

+
   /** @private {?IntersectionObserver} */
   intersectionObserver_: null,
 
   /** @override */
   ready: function() {
     // If the active history entry changes (i.e. user clicks back button),
     // all open dialogs should be cancelled.
     window.addEventListener('popstate', function() {
       if (!this.ignorePopstate && this.open)
         this.cancel();
     }.bind(this));
 
     if (!this.ignoreEnterKey)
       this.addEventListener('keypress', this.onKeypress_.bind(this));
   },
 
-  /** @override */
-  attached: function() {
-    if (this.showScrollBorders) {
+  /** @private */
+  onOpenChanged_: function() {
+    if (!this.showScrollBorders) {
+      return;
+    }
+
+    if (this.open !== null && !this.intersectionObserver_) {
       var bodyContainer = this.$$('.body-container');
 
       var bottomMarker = this.$.bodyBottomMarker;
       var topMarker = this.$.bodyTopMarker;
 
       var callback = function(entries) {
         assert(entries.length <= 2);
         for (var i = 0; i < entries.length; i++) {
           var target = entries[i].target;
           assert(target == bottomMarker || target == topMarker);
 
           var classToToggle =
               target == bottomMarker ? 'bottom-scrollable' : 'top-scrollable';
 
           bodyContainer.classList.toggle(
               classToToggle, entries[i].intersectionRatio == 0);
         }
       };
 
       this.intersectionObserver_ = new IntersectionObserver(
           callback,
           /** @type {IntersectionObserverInit} */ ({
             root: bodyContainer,
             threshold: 0,
           }));
+
       this.intersectionObserver_.observe(bottomMarker);
       this.intersectionObserver_.observe(topMarker);
-    }
-  },
-
-  /** @override */
-  detached: function() {
-    if (this.intersectionObserver_) {
+    } else if (this.open === null && this.intersectionObserver_) {
       this.intersectionObserver_.disconnect();
       this.intersectionObserver_ = null;
     }
   },
 
   cancel: function() {
     this.fire('cancel');
     HTMLDialogElement.prototype.close.call(this, '');
   },
 
@@ skipping 23 matching lines @@
       return;
 
     var actionButton =
         this.querySelector('.action-button:not([disabled]):not([hidden])');
     if (actionButton) {
       actionButton.click();
       e.preventDefault();
     }
   },
 });