Add new botlist for swarming

appengine/swarming/elements/res/imp/common/sort-toggle.html

Index: appengine/swarming/elements/res/imp/common/sort-toggle.html
diff --git a/appengine/swarming/elements/res/imp/common/sort-toggle.html b/appengine/swarming/elements/res/imp/common/sort-toggle.html
new file mode 100644
index 0000000000000000000000000000000000000000..5ef606b4c4449d4830bc3cbec97270626ccaa712
--- /dev/null
+++ b/appengine/swarming/elements/res/imp/common/sort-toggle.html
@@ -0,0 +1,106 @@
+<!--
+  Copyright 2016 The LUCI Authors. All rights reserved.
+  Use of this source code is governed under the Apache License, Version 2.0
+  that can be found in the LICENSE file.
+
+  This in an HTML Import-able file that contains the definition
+  of the following elements:
+
+    <sort-toggle>
+
+  Sort-toggle is a small ui widget that can be tapped to change the way
+  something is sorted.
+
+  Properties:
+    name: String, the name of the thing being sorted. To be used in the
+        fired event.
+    sort: Number, the direction of the sorting.  1, 0, -1 for

[stephana, 2016/07/29 14:09:31]

IMO, should be a string with either values: 'asc', 'dec', ''
It's much more descriptive. I might still have to look up the docs, 
but if I see 

ele.sort = 'asc';

I know immediately what's going on. 

[kjlubick, 2016/07/29 19:13:25]

Done.

+        ascending/nothing/descending.
+
+  Methods:
+    None.
+
+  Events:
+    sort_change: when a user has tapped this element.  The details includes
+        name and sort.
+-->
+
+<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
+
+<dom-module id="sort-toggle">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        position: relative;
+        min-width: 20px;
+        min-height: 16px;
+        vertical-align: middle;
+      }
+      iron-icon {
+        position: absolute;
+        left: 0;
+        cursor: pointer;
+      }
+      .hidden {
+        visibility: hidden;
+      }
+    </style>
+
+    <span on-click="toggle">
+      <iron-icon
+        style="top:0"
+        class$="[[_hidden(sort,'1')]]"
+        icon="icons:arrow-drop-down">
+      </iron-icon>
+      <iron-icon
+        style="bottom:0"
+        class$="[[_hidden(sort,'-1')]]"
+        icon="icons:arrow-drop-up">
+      </iron-icon>
+    </span>
+
+  </template>
+  <script>
+    Polymer({
+      is: "sort-toggle",
+      properties: {
+        name: {
+          type: String,
+          observer: "_resetSort",
+        },
+        sort: {
+          type: Number,
+          value: 0,
+          notify: true,
+        },
+      },
+      toggle: function() {

[stephana, 2016/07/29 14:09:31]

Nit: spaces between methods.

[kjlubick, 2016/07/29 19:13:25]

Done.

+        if (this.sort === -1) {
+          this.set("sort", 0);
+        } else if (this.sort === 1) {
+          this.set("sort", -1);
+        } else {
+          this.set("sort", 1);
+        }
+        this.fire("sort_change", {sort: this.sort, name: this.name});
+      },
+      _hidden: function(num, compare) {
+        // double equals intentionally used here because compare is a string
+        // and num is an int.
+        if (num == compare) {
+          return "hidden";
+        }
+        return "";
+      },
+      _resetSort: function(newV, old) {
+        // Because of how Polymer inserts and moves elements around, we need to
+        // reset the sort value if the name changes so the ascending sort by
+        // "os" doesn't become the ascending sort by "gpu" if a column gets
+        // added before "os", for example.
+        this.set("sort", 0);
+        this.fire("sort_change", {sort: 0, name: newV});
+      },
+    });
+  </script>
+</dom-module>