MD Settings: Fix rendering of popup menus inside iron-lists.

chrome/browser/resources/settings/list_item_behavior.js

Index: chrome/browser/resources/settings/list_item_behavior.js
diff --git a/chrome/browser/resources/settings/list_item_behavior.js b/chrome/browser/resources/settings/list_item_behavior.js
new file mode 100644
index 0000000000000000000000000000000000000000..462c8f22b46a23ea2d8410e3df8fc103ae92bd8c
--- /dev/null
+++ b/chrome/browser/resources/settings/list_item_behavior.js
@@ -0,0 +1,27 @@
+// 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.
+
+cr.define('settings', function() {

[stevenjb, 2016/09/26 22:52:00]

Optional: It seems like this might be generally useful. Maybe move it out of the
namespace / directory and call it CrListItemBehavior?

[dpapad, 2016/09/26 23:04:32]

Prefer to wait until the 2nd client of this class outside of settings/ is found,
before promoting to a shared directory.

+  /**
+   * The max z index assigned to an <iron-list> item so far. Used to
+   * ensure that the per-item popup menu is displayed correctly.
+   * @type {number}
+   */
+  var maxZIndex = 0;

[stevenjb, 2016/09/26 22:52:00]

nit: maxZIndex_ since it's private

[dpapad, 2016/09/26 23:04:32]

Done.
Responding to the question from the other CL: This can't be moved on the Polymer
object itself. Apparently it is not equivalent to a static member variable.

+
+  var ListItemBehavior = {
+    showActionMenu: function() {
+      // <iron-list> applies translate3d() transform on every element, which
+      // means that in the natural order the (n-1)-th element is at a lower z
+      // index than the n-th element. This prevents the popup menu from being
+      // painted on top of other elements, and therefore a zIndex adjustment is
+      // necessary.
+      this.style.zIndex = ++maxZIndex;
+    },
+  };
+
+  return {
+    ListItemBehavior: ListItemBehavior,
+  };
+});