MD Settings: long dialog body should have overscroll line.

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 11 matching lines @@
     closeText: String,
 
     /**
      * True if the dialog should remain open on 'popstate' events. This is used
      * for navigable dialogs that have their separate navigation handling code.
      */
     ignorePopstate: {
       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),
     // all open dialogs should be cancelled.
     window.addEventListener('popstate', function() {
       if (!this.ignorePopstate && this.open)
         this.cancel();
     }.bind(this));
   },
 
+  /** @override */
+  attached: function() {
+    if (this.showScrollBorders) {
+      var bodyContainer = this.$$('.body-container');
+
+      var callback = function(entries) {
+        assert(entries.length == 1);
+        entries[0].intersectionRatio == 0 ?

[dpapad, 2017/03/30 18:25:00]

Can you simplify this, similar to
https://codereview.chromium.org/2184863002/diff/220001/chrome/browser/resourc...

[scottchen, 2017/03/30 19:24:34]

Done.

+            bodyContainer.classList.add('bottom-scrollable') :
+            bodyContainer.classList.remove('bottom-scrollable');
+      };
+
+      this.intersectionObserver_ = new IntersectionObserver(callback, {
+        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, '');
   },
 
   /**
    * @param {string=} opt_returnValue
    * @override
    */
   close: function(opt_returnValue) {
     HTMLDialogElement.prototype.close.call(this, 'success');
   },
 
   /** @return {!PaperIconButtonElement} */
   getCloseButton: function() {
     return this.$.close;
   },
 });