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..2024db82d5eb1b1f27ec7043e767fb26b64a20a5
--- /dev/null
+++ b/chrome/browser/resources/settings/list_item_behavior.js
@@ -0,0 +1,22 @@
+// 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.
+
+/**
+ * The max z index assigned to an <iron-list> item so far. Used to
+ * ensure that the per-item popup menu is displayed correctly.
+ * @private {number}
+ */
+var maxZIndex_ = 0;
+
+/** @polymerBehavior */
+var ListItemBehavior = {
+  showActionMenu: function() {

[Dan Beam, 2016/09/27 23:02:04]

this really doesn't show any action menu.  it really just ensures this item is
on top?  can we rename it to something closer to what it's currently doing and
rename it later if it needs to be more generic?

[dpapad, 2016/09/28 00:13:35]

Renamed.

+    // <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_;
+  },
+};

[Dan Beam, 2016/09/27 23:02:04]

can we make this static and private?

ListItemBehavior.maxZIndex_ = 0;

[dpapad, 2016/09/28 00:13:35]

Already responded to Steven's similar question. Tried this and it did not work
as expected (the counter is not unique among behavior instances). 

[Dan Beam, 2016/09/28 01:32:07]

I can see how this would look a little confusing.  What I meant was:

/** @polymerBehavior */
var ListItemBehavior = {
  ensureOnTop: function() {
    this.style.zIndex = ++ListItemBehavior.maxZIndex_;
  },
};

/** @private {number} */
ListItemBehavior.maxZIndex_ = 0;

where there's only 1, globally static max z-index.

[dpapad, 2016/09/28 01:50:32]

Done. Thanks for the clarification. I misunderstood the original suggestion.