MD Settings: adjust dialog style and scroll border visual

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 48 matching lines @@
 
     if (!this.ignoreEnterKey)
       this.addEventListener('keypress', this.onKeypress_.bind(this));
   },
 
   /** @override */
   attached: function() {
     if (this.showScrollBorders) {
       var bodyContainer = this.$$('.body-container');
 
+      var bottomMarker = this.$.bodyBottomMarker;
+      var topMarker = this.$.bodyTopMarker;
+
       var callback = function(entries) {

[dschuyler, 2017/04/06 21:53:22]

How large can |entries.length| be?

[scottchen, 2017/04/06 22:15:57]

At most 2, added an assert to call it out.

-        assert(entries.length == 1);
-        bodyContainer.classList.toggle(
-            'bottom-scrollable', entries[0].intersectionRatio == 0);
+        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(this.$.bodyBottomMarker);
+      this.intersectionObserver_.observe(bottomMarker);
+      this.intersectionObserver_.observe(topMarker);
     }
   },
 
   /** @override */
   detached: function() {
     if (this.intersectionObserver_) {
       this.intersectionObserver_.disconnect();
       this.intersectionObserver_ = null;
     }
   },
@@ skipping 29 matching lines @@
       return;
 
     var actionButton =
         this.querySelector('.action-button:not([disabled]):not([hidden])');
     if (actionButton) {
       actionButton.click();
       e.preventDefault();
     }
   },
 });