MD Settings: adjust dialog style and scroll border visual

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 4c49a3a9121eec83c30f99a13af9e20d5822d294..0ef463fe6a8d238703d12079e2a073698de2d443 100644
--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
+++ b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
@@ -66,10 +66,20 @@ Polymer({
     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(
@@ -78,7 +88,8 @@ Polymer({
             root: bodyContainer,
             threshold: 0,
           }));
-      this.intersectionObserver_.observe(this.$.bodyBottomMarker);
+      this.intersectionObserver_.observe(bottomMarker);
+      this.intersectionObserver_.observe(topMarker);
     }
   },