Use query builder when queryBuilder feature enabled

webapp/components/test-runs-query-builder.html

@@ -17,6 +17,7 @@
 <link rel="import" href="../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
 <link rel="import" href="./display-logo.html">
+<link rel="import" href="./info-banner.html">
 <link rel="import" href="./product-info.html">
 <link rel="import" href="./test-runs-query.html">
 
@@ -31,6 +32,14 @@
         background-color: var(--paper-red-500);
         color: white;
       }
+      #submit-button {
+        background-color: var(--paper-green-500);
+        color: white;
+      }
+      product-builder {
+        max-width: 180px;
+        display: inline-block;
+      }
     </style>
 
     <h3>
@@ -53,6 +62,11 @@ <h3>
                          on-product-changed="[[productChanged(i)]]"
                          on-delete="[[productDeleted(i)]]"></product-builder>
       </template>
+      <template is="dom-if" if="[[!products.length]]">
+        <info-banner>
+          <iron-icon icon="info"></iron-icon> No products selected. The default products will be used.
+        </info-banner>
+      </template>
     </div>
     <br>
     <paper-button raised id="add-button" onclick="[[addProduct]]">
@@ -61,6 +75,9 @@ <h3>
     <paper-button raised id="clear-button" onclick="[[clearAll]]">
       <iron-icon icon="delete"></iron-icon> Clear all
     </paper-button>
+    <paper-button raised id="submit-button" onclick="[[submit]]">
+      <iron-icon icon="done"></iron-icon> Submit
+    </paper-button>
   </template>
   <script>
     /**
@@ -77,12 +94,13 @@ <h3>
         return {
           edit: {
             type: Boolean,
-            value: false,
+            value: true,
           },
           debug: {
             type: Boolean,
             value: false,
           },
+          onSubmit: Function,
         };
       }
 
@@ -103,6 +121,9 @@ <h3>
         this.clearAll = () => {
           this.set('products', []);
         };
+        this.submit = () => {
+          this.onSubmit && this.onSubmit();
+        };
       }
 
       observeSpec(change) {

webapp/components/test-runs-query.html

@@ -9,6 +9,55 @@
 
 <dom-module id="test-runs-query">
   <script>
+    const DEFAULT_PRODUCT_SPECS = [
+      'chrome',
+      'edge',
+      'firefox',
+      'safari',
+    ];
+    const DEFAULT_PRODUCTS = DEFAULT_PRODUCT_SPECS.map(p => parseProductSpec(p));
+
+    function parseProductSpec(spec) {
+      // @sha (optional)
+      let revision = '';
+      const atIndex = spec.indexOf('@');
+      if (atIndex > 0) {
+        revision = spec.substr(atIndex + 1);
+        spec = spec.substr(0, atIndex);
+      }
+      // [foo,bar] labels syntax (optional)
+      let labels = new Set();
+      const arrayIndex = spec.indexOf('[');
+      if (arrayIndex > 0) {
+        let labelsStr = spec.substr(arrayIndex + 1);
+        if (labelsStr[labelsStr.length - 1] !== ']') {
+          throw 'Expected closing bracket';
+        }
+        labelsStr = labelsStr.substr(0, labelsStr.length - 1);
+        labelsStr.split(',').forEach(l => labels.add(l));
+        spec = spec.substr(0, arrayIndex);
+      }
+      // product
+      const product = parseProduct(spec);
+      product.revision = revision;
+      product.labels = labels;
+      return product;
+    }
+
+    function parseProduct(name) {
+      // -version (optional)
+      let version;
+      const dashIndex = name.indexOf('-');
+      if (dashIndex > 0) {
+        version = name.substr(dashIndex + 1);
+        name = name.substr(0, dashIndex);
+      }
+      return {
+        browser_name: name,
+        browser_version: version,
+      };
+    }
+
     /**
      * Behaviour class for re-use of test-runs fetching behaviour.
      */
@@ -18,7 +67,7 @@
       (superClass) => class extends QueryBuilder(ProductInfo(superClass)) {
         static get properties() {
           return {
-          /* Parsed product objects, computed from the spec strings */
+            /* Parsed product objects, computed from the spec strings */
             products: {
               type: Array,
               notify: true,
@@ -29,6 +78,11 @@
               notify: true,
               value: [],
             },
+            isDefaultProducts: {
+              type: Boolean,
+              computed: 'computeIsDefaultProducts(productSpecs, productSpecs.*)',
+              value: true,
+            },
             labels: {
               type: Array,
               value: [],
@@ -51,10 +105,13 @@
           };
         }
 
+
+
         ready() {
           super.ready();
+          // Convert any initial product specs to products, if provided.
           if (this.productSpecs && this.productSpecs.length
-            && !(this.product && this.products.length)) {
+            && !(this.products && this.products.length)) {
             this.products = this.productSpecs.map(p => this.parseProductSpec(p));
           }
           this._createMethodObserver('productsUpdated(products, products.*)');
@@ -65,10 +122,6 @@
           this.productSpecs = (products || []).map(p => this.getSpec(p));
         }
 
-        computeIsLatest(sha) {
-          return !sha || sha === 'latest';
-        }
-
         computeTestRunQueryParams(sha, labels, productSpecs, maxCount) {
           const params = {};
           if (sha) {
@@ -77,7 +130,7 @@
           if (labels && labels.length) {
             params.label = labels;
           }
-          if (productSpecs && productSpecs.length) {
+          if (productSpecs && productSpecs.length && !this.isDefaultProducts) {
             params.product = productSpecs;
           }
           maxCount = maxCount || this.defaultMaxCount;
@@ -94,45 +147,21 @@
           return productSpecs && productSpecs.map(s => this.parseProductSpec(s));
         }
 
-        parseProductSpec(spec) {
-        // @sha (optional)
-          let revision = '';
-          const atIndex = spec.indexOf('@');
-          if (atIndex > 0) {
-            revision = spec.substr(atIndex + 1);
-            spec = spec.substr(0, atIndex);
-          }
-          // [foo,bar] labels syntax (optional)
-          let labels = new Set();
-          const arrayIndex = spec.indexOf('[');
-          if (arrayIndex > 0) {
-            let labelsStr = spec.substr(arrayIndex + 1);
-            if (labelsStr[labelsStr.length - 1] !== ']') {
-              throw 'Expected closing bracket';
-            }
-            labelsStr = labelsStr.substr(0, labelsStr.length - 1);
-            labelsStr.split(',').forEach(l => labels.add(l));
-            spec = spec.substr(0, arrayIndex);
-          }
-          // product
-          const product = this.parseProduct(spec);
-          product.revision = revision;
-          product.labels = labels;
-          return product;
+        computeIsDefaultProducts(productSpecs) {
+          return !productSpecs || !productSpecs.length
+            || DEFAULT_PRODUCT_SPECS.join(',') === (productSpecs || []).join(',');
         }
 
-        parseProduct(name) {
-        // -version (optional)
-          let version;
-          const dashIndex = name.indexOf('-');
-          if (dashIndex > 0) {
-            version = name.substr(dashIndex + 1);
-            name = name.substr(0, dashIndex);
-          }
-          return {
-            browser_name: name,
-            browser_version: version,
-          };
+        parseProductSpec(p) {
+          return window.parseProductSpec(p);
+        }
+
+        clearQuery() {
+          this.products = Array.from(DEFAULT_PRODUCTS);
+          this.labels = [];
+          this.maxCount = undefined;
+          this.sha = 'latest';
+          this.aligned = undefined;
         }
       };
   </script>

webapp/components/test-runs.html

@@ -13,7 +13,7 @@
      * Base class for re-use of results-fetching behaviour, between
      * multi-item (wpt-results) and single-test (test-file-results) views.
      */
-    /* global TestRunsQuery */
+    /* global TestRunsQuery, DEFAULT_PRODUCTS */
     class TestRunsBase extends TestRunsQuery(window.Polymer.Element) {
       static get is() {
         return 'wpt-results-base';
@@ -46,6 +46,15 @@
         };
       }
 
+      ready() {
+        super.ready();
+        // Fall back to the default product set.
+        if (!(this.products && this.products.length)
+            && !this.testRunResources) {
+          this.products = Array.from(DEFAULT_PRODUCTS);
+        }
+      }
+
       computeTestScheme(path) {
         // This should (close enough) match up with the logic in:
         // https://github.com/web-platform-tests/wpt/blob/master/tools/manifest/item.py
@@ -71,9 +80,8 @@
         if (preloaded) {
           runs.push(...preloaded);
         }
-        // Fetch by products (or default products, if nothing else is present).
-        if ((this.productSpecs && this.productSpecs.length)
-          || (!preloaded && !this.testRunResources)) {
+        // Fetch by products.
+        if (this.productSpecs && this.productSpecs.length) {
           runs.push(fetch(`/api/runs${this.testRunQuery}`)
             .then(r => r.ok && r.json()));
         }

webapp/components/test/test-runs-query-builder.html

@@ -8,7 +8,10 @@
   <link rel="import" href="../test-runs-query-builder.html">
 </head>
 <body>
-  <test-runs-query-builder edit debug></test-runs-query-builder>
+  <test-runs-query-builder id="playground"
+                           product-specs='["chrome","firefox[experimental]"]'
+                           edit
+                           debug></test-runs-query-builder>
 
   <test-fixture id="query-builder-fixture">
     <template>
@@ -23,12 +26,6 @@
   </test-fixture>
 
   <script>
-    document.addEventListener('WebComponentsReady', () => {
-      // Set up the playground.
-      document.querySelector('test-runs-query-builder').addProduct();
-      document.querySelector('test-runs-query-builder').addProduct();
-    });
-
     suite('TestRunsQueryBuilder', () => {
       let queryBuilder;
 

webapp/components/test/test-runs-query.html

@@ -8,24 +8,46 @@
   <link rel="import" href="../../bower_components/polymer/polymer-element.html">
   <link rel="import" href="../test-runs-query.html">
 </head>
+
+<dom-module id="test-runs-query-concrete">
+  <script>
+    // Needed for FF, which doesn't block on the imports above.
+    document.addEventListener('WebComponentsReady', () => {
+      /* global TestRunsQuery */
+      class ConcreteType extends TestRunsQuery(window.Polymer.Element) {}
+
+      window.customElements.define('test-runs-query-concrete', ConcreteType);
+    });
+  </script>
+</dom-module>
+
+<test-fixture id="test-runs-query-fixture">
+  <template>
+    <test-runs-query-concrete></test-runs-query-concrete>
+  </template>
+</test-fixture>
+
 <body>
   <script>
-    /* global TestRunsQuery */
+    /* global DEFAULT_PRODUCTS */
     suite('TestRunsQuery', () => {
       let testRunsQuery;
 
       setup(() => {
-        if (!window.customElements.get('test-runs-query')) {
-          class ConcreteClass extends TestRunsQuery(window.Polymer.Element) {}
-          window.customElements.define('test-runs-query', ConcreteClass);
-        }
-        testRunsQuery = document.createElement('test-runs-query');
+        testRunsQuery = fixture('test-runs-query-fixture');
       });
 
       test('instanceof Polymer.Element', () => {
         assert.isTrue(testRunsQuery instanceof window.Polymer.Element);
       });
 
+      test('isDefaultProducts', () => {
+        testRunsQuery.products = Array.from(DEFAULT_PRODUCTS);
+        expect(testRunsQuery.isDefaultProducts).to.equal(true);
+        testRunsQuery.products = Array.from([DEFAULT_PRODUCTS[0]]);
+        expect(testRunsQuery.isDefaultProducts).to.equal(false);
+      });
+
       suite('TestRunsQuery.prototype.*', () => {
 
         const revision = '1234512345';