MD Settings: Remove paper-header-panel, use IntersectionObserver.

chrome/browser/resources/settings/settings_ui/settings_ui.js

Index: chrome/browser/resources/settings/settings_ui/settings_ui.js
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.js b/chrome/browser/resources/settings/settings_ui/settings_ui.js
index e3c3ca1aba5b7eb729056b7ef8dd578cb04cf17b..9e0123fc86a99e8b4a2d77e49c6c9034ba782ec4 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.js
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.js
@@ -160,6 +160,8 @@ Polymer({
         loadTimeData.getBoolean('androidAppsAllowed');
   },
 
+  intersectionObserver_: null,

[scottchen, 2017/03/28 22:06:55]

Do you need @private here?

[dpapad, 2017/03/28 22:10:57]

This needs "@private {?IntersectionObserver}", but I have not added it yet,
since the compilation fails anyway. Will add once the JS Compiler externs issue
is resolved.

[dpapad, 2017/03/29 22:17:10]

Done.

+
   /** @override */
   attached: function() {
     setTimeout(function() {
@@ -169,12 +171,32 @@ Polymer({
     });
     // Preload bold Roboto so it doesn't load and flicker the first time used.
     document.fonts.load('bold 12px Roboto');
-    settings.setGlobalScrollTarget(this.$.headerPanel.scroller);
+    settings.setGlobalScrollTarget(this.$.container);
+
+    this.setupDropShadow_();

[Dan Beam, 2017/03/29 13:19:55]

just make this part of attached rather than a separate method (just delete
L176-180)

[dpapad, 2017/03/29 22:17:10]

Done.

+  },
+
+  /** @private */
+  setupDropShadow_: function() {
+    var callback = function(entries) {
+      assert(entries.length == 1);
+      entries[0].intersectionRatio == 0 ?
+          this.$.dropShadow.classList.add('has-shadow') :
+          this.$.dropShadow.classList.remove('has-shadow');

[Dan Beam, 2017/03/29 13:19:55]

this.$.dropShadow.classList.toggle('has-shadow', entries[0].intersectionRatio ==
0);

[dpapad, 2017/03/29 22:17:10]

Done.

+    }.bind(this);
+
+    this.intersectionObserver_ = new IntersectionObserver(callback, {
+      root: this.$.container,
+      threshold: 0,
+    });
+    this.intersectionObserver_.observe(this.$.intersectionProbe);
   },
 
   /** @override */
   detached: function() {
     settings.resetRouteForTesting();
+    this.intersectionObserver_.disconnect();
+    this.intersectionObserver_ = null;
   },
 
   /** @param {!settings.Route} route */