MD Settings: make iron list offset so items render onscreen

chrome/browser/resources/settings/search_engines_page/search_engines_page.js

 // Copyright 2015 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 'settings-search-engines-page' is the settings page
  * containing search engines settings.
  */
 Polymer({
   is: 'settings-search-engines-page',
@@ skipping 41 matching lines @@
   // Since the iron-list for extensions is enclosed in a dom-if, observe both
   // |extensions| and |showExtensionsList_|.
   observers: ['extensionsChanged_(extensions, showExtensionsList_)'],
 
   /** @override */
   ready: function() {
     settings.SearchEnginesBrowserProxyImpl.getInstance().
         getSearchEnginesList().then(this.enginesChanged_.bind(this));
     this.addWebUIListener(
         'search-engines-changed', this.enginesChanged_.bind(this));
+
+    // Sets offset in iron-list that uses the page as a scrollTarget.
+    // The scrollTarget doesn't know about headers and items above the list.
+    Polymer.RenderStatus.afterNextRender(this, function() {
+      // Size of headers is constant, but defaultEngines size can vary.
+      this.$.otherEngines.scrollOffset = 184 +

[Dan Beam, 2017/04/07 23:32:53]

this looks brittle, where does the 184 come from?  are you sure it's the same on
all platforms?  what happens if this changes?

[hcarmona, 2017/04/08 00:02:01]

Agreed, for parts that are in this file, I can add an ID and get the height
using the client rect...
Maybe putting them in a div and getting the height of that?
But, the header on the top of the page is outside the shadow dom.

Suggestions?

[Dan Beam, 2017/04/08 00:09:44]

offsetTop

[hcarmona, 2017/04/08 00:24:40]

Sweet. Done.

+          this.$.defaultEngines.getBoundingClientRect().height;
+    });
   },
 
   /** @private */
   extensionsChanged_: function() {
     if (this.showExtensionsList_ && this.$.extensions)
       this.$.extensions.notifyResize();
   },
 
   /**
    * @param {!SearchEnginesInfo} searchEnginesInfo
@@ skipping 22 matching lines @@
         this.$.addSearchEngine.focus();
       }.bind(this));
     }.bind(this));
   },
 
   /** @private */
   computeShowExtensionsList_: function() {
     return this.extensions.length > 0;
   },
 });