Add paging, polymer tests breaking b/c databinding

It looks like there is an open bug on Polymer 2.0 and wct 6 that data
binding is broken:

PolymerElements/test-fixture#47

This is a huge problem, and I don't understand why it remains open after
being opened in March. However, the functionality is important enough
that, for now, I am going to begrudgingly allow it to break.

chromeapp/app/polymer-ui/elements/cache-page-list.html

@@ -79,13 +79,24 @@
 
       <div class="flexchild flex-equal-around-justified">
 
-        <paper-button class="page-button back-button" raised>
-          <iron-icon icon="icons:chevron-left"></iron-icon>
-          Prev
+          <!-- disabled$="{{has&#45;prev}}" -->
+        <paper-button
+          id="button-back"
+          class="page-button back-button"
+          disabled={{!hasPrev}}
+          on-click="getPrev"
+          raised>
+            <iron-icon icon="icons:chevron-left"></iron-icon>
+            Prev
         </paper-button> 
-        <paper-button class="page-button next-button" raised>
-          Next
-          <iron-icon icon="icons:chevron-right"></iron-icon>
+        <paper-button
+          id="button-next"
+          class="page-button next-button"
+          disabled={{!hasNext}}
+          on-click="getNext"
+          raised>
+            Next
+            <iron-icon icon="icons:chevron-right"></iron-icon>
         </paper-button> 
 
       </div>
@@ -124,15 +135,56 @@
         type: Object,
         notify: true,
         value: function() { return []; }
-      }
+      },
+      hasPrev: {
+        type: Boolean,
+        notify: true,
+        reflectToAttribute: true,
+        value: false
+      },
+      hasNext: {
+        type: Boolean,
+        notify: true,
+        reflectToAttribute: true,
+        value: function() { return false; }
+      },
+      prevOffset: {
+        type: Number,
+        notify: true,
+        value: function() { return 0; }
+      },
+      nextOffset: {
+        type: Number,
+        notify: true,
+        value: function() { return 0; }
+      },
+      limit: {
+        type: Number,
+        notify: true,
+        value: function() { return 2; }
+      },
     },
 
     getAppControllerModule: function() {
       var appc = require('appController');
       return appc;
     },
 
-    refresh: function() {
+    getPrev: function() {
+      return this.refresh(this.prevOffset, this.limit);
+    },
+
+    getNext: function() {
+      return this.refresh(this.nextOffset, this.limit);
+    },
+
+    refresh: function(offset, limit) {
+      if (!Number.isSafeInteger(offset)) {
+        offset = 0;
+      }
+      if (!Number.isSafeInteger(limit)) {
+        limit = this.limit;
+      }
       var thisEl = this;
       return new Promise(function(resolve) {
         if (!thisEl.serviceName) {
@@ -146,10 +198,30 @@
         })
         .then(appController => {
           appc = appController;
-          return appc.getListFromService(thisEl.serviceName);
+          return appc.getListFromService(thisEl.serviceName, offset, limit);
         })
-        .then(pageList => {
-          thisEl.pageList = pageList;
+        .then(pageListResp => {
+          // We expect:
+          // {
+          //   hasNext: boolean,
+          //   nextOffset: integer,
+          //   hasPrev: booean
+          //   prevOffset: integer,
+          //   cachedPages: [CPSummary, ... ]
+          // }
+          thisEl.hasPrev = pageListResp.hasPrev;
+          thisEl.hasNext = pageListResp.hasNext;
+          if (pageListResp.prevOffset) {
+            thisEl.prevOffset = pageListResp.prevOffset;
+          } else {
+            thisEl.prevOffset = 0;
+          }
+          if (pageListResp.nextOffset) {
+            thisEl.nextOffset = pageListResp.nextOffset;
+          } else {
+            thisEl.nextOffset = 0;
+          }
+          thisEl.pageList = pageListResp.cachedPages;
           thisEl.hideLoading();
           resolve();
         })

chromeapp/app/scripts/server/server-api.js

@@ -292,14 +292,14 @@ exports.getResponseForBloomFilter = function() {
 /**
  * @param {Buffer} buff
  *
- * @return {Array.<CPSummary>}
+ * @return {Object}
  */
 exports.parseResponseForList = function(buff) {
   let result = JSON.parse(buff.toString());
   result.cachedPages = result.cachedPages.map(
     cpsumJson => objects.CPSummary.fromJSON(cpsumJson)
   );
-  return result.cachedPages;
+  return result;
 };
 
 /*

chromeapp/bower.json

@@ -26,9 +26,11 @@
     "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
     "paper-toast": "PolymerElements/paper-toast#^2.0.0",
     "paper-radio-group": "PolymerElements/paper-radio-group#^2.0.0",
-    "iron-icons": "PolymerElements/iron-icons#^2.0.1"
+    "iron-icons": "PolymerElements/iron-icons#^2.0.1",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.1"
   },
   "devDependencies": {
-    "web-component-tester": "^6.0.0"
+    "web-component-tester": "^6.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1"
   }
 }

chromeapp/dist/index.html

@@ -4707,13 +4707,14 @@ <h3 id="full-url">{{captureHref}}</h3>
 
       <div class="flexchild flex-equal-around-justified">
 
-        <paper-button class="page-button back-button" raised="">
-          <iron-icon icon="icons:chevron-left"></iron-icon>
-          Prev
+          <!-- disabled$="{{has&#45;prev}}" -->
+        <paper-button id="button-back" class="page-button back-button" disabled="{{!hasPrev}}" on-click="getPrev" raised="">
+            <iron-icon icon="icons:chevron-left"></iron-icon>
+            Prev
         </paper-button> 
-        <paper-button class="page-button next-button" raised="">
-          Next
-          <iron-icon icon="icons:chevron-right"></iron-icon>
+        <paper-button id="button-next" class="page-button next-button" disabled="{{!hasNext}}" on-click="getNext" raised="">
+            Next
+            <iron-icon icon="icons:chevron-right"></iron-icon>
         </paper-button> 
 
       </div>