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..a84993e7e1fd185f8552ef825dac109ac91dce87 100644
--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
+++ b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
@@ -29,8 +29,17 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    showScrollBorders: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
   },
 
+  /** @private {?IntersectionObserver} */
+  intersectionObserver_: null,
+
   /** @override */
   ready: function() {
     // If the active history entry changes (i.e. user clicks back button),
@@ -41,6 +50,35 @@ Polymer({
     }.bind(this));
   },
 
+  /** @override */
+  attached: function() {
+    if (this.showScrollBorders) {
+      var bodyContainer = this.$$('.body-container');
+
+      var callback = function(entries) {
+        assert(entries.length == 1);
+        bodyContainer.classList.toggle(
+            'bottom-scrollable', entries[0].intersectionRatio == 0);
+      };
+
+      this.intersectionObserver_ = new IntersectionObserver(
+          callback,
+          /** @type {IntersectionObserverInit} */ ({
+            root: bodyContainer,
+            threshold: 0,
+          }));
+      this.intersectionObserver_.observe(this.$.bodyBottomMarker);
+    }
+  },
+
+  /** @override */
+  detached: function() {
+    if (this.intersectionObserver_) {
+      this.intersectionObserver_.disconnect();
+      this.intersectionObserver_ = null;
+    }
+  },
+
   cancel: function() {
     this.fire('cancel');
     HTMLDialogElement.prototype.close.call(this, '');