Move bot-list and task-list to use pageable-data

appengine/swarming/elements/res/imp/common/pageable-data.html

 <!--
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <pageable-data>
 
   The pageable-data element allows for easy paging of data from the swarming
   server. It displays a button to the user to go fetch more data, which will
   be appended to the output, rather than replaced, which is typical in
   elements like iron-ajax.
@@ skipping 16 matching lines @@
 
     // output
     busy: Boolean, if a request is in flight. Calls to page() while busy will
         be ignored.
     output: Array<Object> the accumulated values from the server.
 
   Methods:
     clear(): Reset the element, emptying output.  page() will not work until
         a call to load() has been made.
 
-    load(url, headers, pageSize): Initialize the element and make a call to
-        the server for the first batch of data.
+    load(url, headers, [pageSize]): Initialize the element and make a call to
+        the server for the first batch of data. If [pageSize] is omitted, the
+        server default (or those specified in the url) will be used
 
     page(): Must be called after a call to load().  Fetch the next batch of
         data from the server.
 
   Events:
     None.
 -->
 
 <link rel="import" href="/res/imp/common/swarming-app.html">
 
@@ skipping 52 matching lines @@
           type: Object,
         },
         _page_size: {
           type: Number,
         }
       },
 
       clear: function() {
         this.set("output", []);
         this._cursor = null;
+        this._url = "";
       },
 
       load: function(url, headers, pageSize) {
         if (!url) {
           throw "url can't be blank";
         }
         if (url.indexOf("?") === -1) {
           url += "?";
         }
         this._url = url;
         this._headers = headers;
-        this._page_size = pageSize || 50;
+        this._page_size = pageSize;
+        this._cursor = null;
         this.page();
       },
 
       page: function() {
         if (this.busy || this._cursor === END) {
           // ignore pages while we are loading or are at the end of the data.
           return;
         }
         if (!this._url) {
           throw "You must first call load() before calling page()";
         }
         this.set("busy", true);
 
-        var url = this._url + "&limit=" + this._page_size;
+        var url = this._url;
+        if (this._page_size) {
+          url += "&limit=" + this._page_size;
+        }
         if (this._cursor) {
           url += "&cursor=" + this._cursor;
         }
 
         sk.request("GET", url, "", this._headers).then(JSON.parse).then(function(json){
           var vals = this.parse(json);
-          if (!this.output) {
+          // !this._cursor means this is our first load and we should empty the
+          // array
+          if (!this._cursor || !this.output) {
             this.set("output", vals);
           } else {
             this.push("output", ...vals);
           }
           this.set("_cursor", json.cursor || END);
           this.set("busy", false);
         }.bind(this)).catch(function(reason){
           console.log("Reason for failure of request to " + this._url, reason);
           sk.errorMessage("Could not get next set of results. Try reloading the page?", 0);
           this.set("busy", false);
         }.bind(this));
       },
 
       _noMore: function(cursor) {
         return cursor === END;
       }
     });
   })();
   </script>
 </dom-module>