MD Settings: Introduce CrScrollableBehavior

ui/webui/resources/cr_elements/cr_scrollable_behavior.js

Index: ui/webui/resources/cr_elements/cr_scrollable_behavior.js
diff --git a/ui/webui/resources/cr_elements/cr_scrollable_behavior.js b/ui/webui/resources/cr_elements/cr_scrollable_behavior.js
new file mode 100644
index 0000000000000000000000000000000000000000..7984c73f8be6ded8722533f90a0e37adbc41ca95
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_scrollable_behavior.js
@@ -0,0 +1,81 @@
+// 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 Behavior for scrollable containers with <iron-list>.
+ *
+ * Any containers with the 'scrollable' attribute set will have the following
+ * classes toggled appropriately: can-scroll, is-scrolled, scrolled-to-bottom.
+ * These classes are used to style the container div and list elements
+ * appropriately, see shared_style_css.html.
+ *
+ * The associated HTML should look something like:
+ *   <div id="container" scrollable>
+ *     <iron-list items="[[items]]" scroll-target="container">
+ *       <template>
+ *         <my-element item="[[item]] tabindex$="[[tabIndex]]"></my-element>
+ *       </template>
+ *     </iron-list>
+ *   </div>
+ *
+ * In order to get correct keyboard focus (tab) behavior within the list,
+ * any elements with tabbable sub-elements also need to set tabindex, e.g:
+ *
+ * <dom-module id="my-element>
+ *   <template>
+ *     ...
+ *     <paper-icon-button toggles active="{{opened}}" tabindex$="[[tabindex]]">
+ *   </template>
+ * </dom-module>
+ *
+ * NOTE: If 'container' is not fixed size, it is important to call
+ * updateScrollableContents() when [[items]] changes, otherwise the container
+ * will not be sized correctly.
+ */
+
+/** @polymerBehavior */
+var CrScrollableBehavior = {
+  attached: function() {
+    var scrollableElements = this.root.querySelectorAll('[scrollable]');
+
+    // Setup the intial scrolling related classes for each scrollable container.
+    requestAnimationFrame(function() {
+      for (let scrollable of scrollableElements)
+        this.updateScroll_(scrollable);
+    }.bind(this));
+
+    // Listen to the 'scroll' event for each scrollable container.
+    for (let scrollable of scrollableElements) {
+      scrollable.addEventListener('scroll', function(e) {
+        this.updateScroll_(e.target);
+      }.bind(this));

[dschuyler, 2016/08/17 23:07:40]

When/where are these listeners be removed?

[stevenjb, 2016/08/18 00:05:24]

Added detached(). (Which rarely gets called in practice, but it is still a good
idea, thanks). Also simplified this to simplify removing listeners.

+    }
+  },
+
+  /**
+   * Called any time the contents of a scrollable container may have changed.
+   * This ensures that the <iron-list> contents of dynamically sized
+   * containers are resized correctly.
+   */
+  updateScrollableContents() {
+    var nodeList = this.root.querySelectorAll('[scrollable] iron-list');
+    for (let node of nodeList) {
+      let ironList = /** @type {!IronListElement} */ (node);
+      ironList.notifyResize();

[hcarmona, 2016/08/17 23:43:23]

Are there non-IronListElements that need to be notified of resize?

[stevenjb, 2016/08/18 00:05:24]

As far as I am aware, notfyResize is an iron-list specific feature:
https://elements.polymer-project.org/elements/iron-list#method-notifyResize

(Or, at least a IronResizableBehavior specific feature).

If we decide to use this model with anything other than iron-list, we could use
an attribute to identify the list element instead, but I think keeping this
specific to iron-list makes sense for now.

+    }
+  },
+
+  /**
+   * This gets called once intially and any time a scrollable container scrolls.
+   * @private

[hcarmona, 2016/08/17 23:43:23]

Can we add an @param for |scrollable|?

[stevenjb, 2016/08/18 00:05:24]

Effectively done; passing |event| to this now, with a @param comment.

+   */
+  updateScroll_(scrollable) {
+    scrollable.classList.toggle(
+        'can-scroll', scrollable.clientHeight < scrollable.scrollHeight);
+    scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0);
+    scrollable.classList.toggle(
+        'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >=
+            scrollable.scrollHeight);
+  },
+};