MD Settings: long dialog body should have overscroll line.

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

Index: ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
diff --git a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
index d15ed9b8173a769d12afe886806d1509a99cfffc..6c237f8bddd9c6b24af29ba214fa82f81c3d9217 100644
--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
+++ b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
@@ -31,6 +31,9 @@ Polymer({
     },
   },
 
+  /** @private {?IntersectionObserver} */
+  intersectionObserver_: null,
+
   /** @override */
   ready: function() {
     // If the active history entry changes (i.e. user clicks back button),
@@ -41,6 +44,28 @@ Polymer({
     }.bind(this));
   },
 
+  attached: function() {

[dpapad, 2017/03/29 17:42:16]

@override

[scottchen, 2017/03/29 21:02:08]

Done.

+    var bodyContainer = this.$$('.body-container');
+
+    var callback = function(entries) {
+      assert(entries.length == 1);
+      entries[0].intersectionRatio == 0 ?
+          bodyContainer.classList.add('bottom-scrollable') :
+          bodyContainer.classList.remove('bottom-scrollable');
+    };
+
+    this.intersectionObserver_ = new IntersectionObserver(callback, {
+      root: bodyContainer,
+      threshold: 0,
+    });
+    this.intersectionObserver_.observe(this.$.bodyBottomMarker);

[dpapad, 2017/03/29 17:42:16]

We only have a few dialogs that use this functionality. Can we make it opt-in
instead of adding the handlers for all dialogs, even the ones that don't need
it?

something like

<dialog is="cr-dialog" show-scroll-borders>....</dialog>

[scottchen, 2017/03/29 21:02:08]

Done.

+  },
+
+  detached: function() {

[dpapad, 2017/03/29 17:42:16]

@override

[scottchen, 2017/03/29 21:02:08]

Done.

+    this.intersectionObserver_.disconnect();
+    this.intersectionObserver_ = null;
+  },
+
   cancel: function() {
     this.fire('cancel');
     HTMLDialogElement.prototype.close.call(this, '');