Update loot-dropdown-menu

bower.json

@@ -19,6 +19,7 @@
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
     "paper-input": "PolymerElements/paper-input#^1.0.0",
     "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^1.1.1",
     "paper-menu": "PolymerElements/paper-menu#^1.0.0",
     "paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
     "paper-progress": "PolymerElements/paper-progress#^1.0.0",

scripts/vulcanize.js

@@ -63,6 +63,7 @@ function vulcanizeTests(releasePath) {
 
   const tests = [
     'test_loot-custom-icons.html',
+    'test_loot-dropdown-menu.html',
   ];
 
   tests.forEach((test) => {

src/gui/html/elements/loot-dropdown-menu.html

@@ -8,58 +8,58 @@ it a <select>-like API. This means:
 -->
 
 <link rel="import" href="../../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../../bower_components/paper-dropdown/paper-dropdown.html">
+
 <link rel="import" href="../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../../../bower_components/core-menu/core-menu.html">
+<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
 
-<polymer-element name="loot-dropdown-menu" attributes="disabled halign value">
-    <template>
-        <style>
-        /* Material Design overrides */
-        paper-dropdown-menu {
-            margin-left: 4px;
-            margin-right: 4px;
-            border-bottom-color: rgba(0, 0, 0, 0.12);
-        }
-        paper-dropdown-menu::shadow #label {
-            color: rgba(0, 0, 0, 0.87);
-        }
-        paper-dropdown-menu[disabled]::shadow #label,
-        paper-dropdown-menu::shadow #arrow {
-            color: rgba(0, 0, 0, 0.26);
-        }
+<dom-module id="loot-dropdown-menu">
+  <template>
+    <style>
+      paper-dropdown-menu {
+        margin-left: 4px;
+        margin-right: 4px;
 
-        /* LOOT-specific overrides */
-        ::content .core-selected {
-            color: #2196F3;
-            background-color: inherit;
-        }
-        :host(.dark) paper-dropdown-menu {
-            border-bottom-color: rgba(255, 255, 255, 0.12);
-        }
-        paper-dropdown-menu[disabled]::shadow #label {
-            transition: color 0.6s;
-        }
-        :host(.dark) paper-dropdown-menu::shadow #label {
-            color: white;
-        }
-        :host(.dark) paper-dropdown-menu[disabled]::shadow #label,
-        :host(.dark) paper-dropdown-menu::shadow #arrow {
-            color: rgba(255, 255, 255, 0.30);
-        }
-        </style>
-        <paper-dropdown-menu disabled?="{{disabled}}">
-            <paper-dropdown class="dropdown" halign="{{halign}}">
-                <core-menu id="menu" class="menu" valueattr="value" selected="{{value}}">
-                    <content></content>
-                </core-menu>
-            </paper-dropdown>
-        </paper-dropdown-menu>
-    </template>
-    <script>
+        --paper-input-container: {
+          transition: opacity 0.6s;
+        };
+        --paper-dropdown-menu-icon: {
+          color: var(--loot-secondary-text-color);
+        };
+      }
+      :host(.dark) paper-dropdown-menu {
+        --paper-input-container-underline: {
+          background-color: var(--loot-dark-theme-divider-color);
+        };
+        --paper-input-container-input-color: white;
+        --paper-dropdown-menu-input: {
+          color: var(--loot-dark-theme-primary-text-color);
+        };
+        --paper-dropdown-menu-icon: {
+          color: var(--loot-dark-theme-secondary-text-color);
+        };
+      }
+    </style>
+    <paper-dropdown-menu disabled$="[[disabled]]" no-label-float>
+      <paper-listbox class="dropdown-content" attr-for-selected="value" selected="{{value}}">
+        <content></content>
+      </paper-listbox>
+    </paper-dropdown-menu>
+  </template>
+  <script>
     Polymer({
-        value: undefined,
-        disabled: false
+      is: 'loot-dropdown-menu',
+      properties: {
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        value: {
+          type: String,
+          notify: true,
+          reflectToAttribute: true,
+        },
+      },
     });
-    </script>
-</polymer-element>
+  </script>
+</dom-module>

src/tests/gui/html/elements/test_loot-dropdown-menu.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-dropdown-menu.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/paper-item/paper-item.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-dropdown-menu.html">
+</head>
+
+<body>
+  <div>
+    <span>A dropdown:</span>
+    <loot-dropdown-menu value="say">
+      <paper-item value="say">Note</paper-item>
+      <paper-item value="warn">Warning</paper-item>
+      <paper-item value="error">Error</paper-item>
+    </loot-dropdown-menu>
+
+    <loot-dropdown-menu disabled value="3">
+      <paper-item value="1">1</paper-item>
+      <paper-item value="2">2</paper-item>
+      <paper-item value="3">3</paper-item>
+    </loot-dropdown-menu>
+  </div>
+
+  <div style="background: #424242">
+    <loot-dropdown-menu class="dark" value="2">
+      <paper-item value="1">1</paper-item>
+      <paper-item value="2">2</paper-item>
+      <paper-item value="3">3</paper-item>
+    </loot-dropdown-menu>
+
+    <loot-dropdown-menu class="dark" disabled value="1">
+      <paper-item value="1">1</paper-item>
+      <paper-item value="2">2</paper-item>
+      <paper-item value="3">3</paper-item>
+    </loot-dropdown-menu>
+  </div>
+</body>