Perf - Move query-summary-sk away from Polymer.
Bug: skia:9219
Change-Id: I66705e37cca6b042ab0fb07c288c51191de6d500
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/229285
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
diff --git a/perf/modules/query-summary-sk/index.js b/perf/modules/query-summary-sk/index.js
new file mode 100644
index 0000000..f972f7d
--- /dev/null
+++ b/perf/modules/query-summary-sk/index.js
@@ -0,0 +1,2 @@
+import './query-summary-sk.js'
+import './query-summary-sk.scss'
diff --git a/perf/modules/query-summary-sk/query-summary-sk-demo.html b/perf/modules/query-summary-sk/query-summary-sk-demo.html
new file mode 100644
index 0000000..2c0763a
--- /dev/null
+++ b/perf/modules/query-summary-sk/query-summary-sk-demo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>query-summary-sk</title>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+ <h2>Without URL</h2>
+ <query-summary-sk selection='config=565&config=8888'></query-summary-sk>
+ <h2>With URL</h2>
+ <query-summary-sk url=/ selection='config=565&config=8888'></query-summary-sk>
+ <h3>Change</h3>
+ <button>Set</button>
+ <script type="text/javascript" charset="utf-8">
+ document.querySelector('button').addEventListener('click', (e) => {
+ document.querySelectorAll('query-summary-sk').forEach((ele) => {
+ ele.selection = 'type=GPU&config=8888';
+ });
+ });
+ </script>
+</body>
+</html>
diff --git a/perf/modules/query-summary-sk/query-summary-sk-demo.js b/perf/modules/query-summary-sk/query-summary-sk-demo.js
new file mode 100644
index 0000000..1c51332
--- /dev/null
+++ b/perf/modules/query-summary-sk/query-summary-sk-demo.js
@@ -0,0 +1 @@
+import './index.js'
diff --git a/perf/modules/query-summary-sk/query-summary-sk.js b/perf/modules/query-summary-sk/query-summary-sk.js
new file mode 100644
index 0000000..27004b3
--- /dev/null
+++ b/perf/modules/query-summary-sk/query-summary-sk.js
@@ -0,0 +1,66 @@
+/**
+ * @module modules/query-summary-sk
+ * @description <h2><code>query-summary-sk</code></h2>
+ *
+ * Displays a summary of a selection made using query-sk.
+ *
+ * @attr {string} url - If supplied, the displayed summary will be a link to the given URL.
+ *
+ * @attr {string} selection - A query-sk selection formatted as query parameters to be displayed.
+ *
+ */
+import { ElementSk } from '../../../infra-sk/modules/ElementSk'
+import { html, render } from 'lit-html'
+import { toParamSet } from 'common-sk/modules/query'
+
+const template = (ele) => {
+ if (ele.url) {
+ return html`<a href=${ele.url}><pre>${ele._display()}</pre></a>`;
+ } else {
+ return html`<pre>${ele._display()}</pre>`;
+ }
+}
+
+window.customElements.define('query-summary-sk', class extends ElementSk {
+ constructor() {
+ super(template);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this._render();
+ }
+
+ _display() {
+ if (!this.selection) {
+ return '[No filters applied]';
+ }
+ const params = toParamSet(this.selection);
+ const keys = Object.keys(params);
+ keys.sort();
+ const ret = [];
+ keys.forEach((key) => {
+ params[key].forEach((value) => {
+ ret.push(`${key}=${value}`);
+ });
+ });
+ return ret.join('\n');
+ }
+
+ static get observedAttributes() {
+ return ['url', 'selection'];
+ }
+
+ /** @prop url {string} Mirrors the 'url' attribute. */
+ get url() { return this.getAttribute('url'); }
+ set url(val) { this.setAttribute('url', val); }
+
+ /** @prop selection {string} Mirrors the 'selection' attribute. */
+ get selection() { return this.getAttribute('selection'); }
+ set selection(val) { this.setAttribute('selection', val); }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ this._render();
+ }
+
+});
diff --git a/perf/modules/query-summary-sk/query-summary-sk.scss b/perf/modules/query-summary-sk/query-summary-sk.scss
new file mode 100644
index 0000000..f86a43b
--- /dev/null
+++ b/perf/modules/query-summary-sk/query-summary-sk.scss
@@ -0,0 +1,11 @@
+@import '~elements-sk/colors';
+
+query-summary-sk,
+query-summary-sk a {
+ max-width: 30em;
+ overflow: auto;
+ color: var(--blue);
+ font-weight: bold;
+ word-wrap: break-word;
+ vertical-align: middle;
+}
diff --git a/perf/pages/main.js b/perf/pages/main.js
index ce20a26..905b098 100644
--- a/perf/pages/main.js
+++ b/perf/pages/main.js
@@ -13,6 +13,8 @@
import '../modules/day-range-sk'
import '../modules/json-source-sk'
import '../modules/plot-simple-sk'
+import '../modules/query-count-sk'
+import '../modules/query-summary-sk'
import '../modules/query-values-sk'
import '../modules/triage-status-sk'
import '../modules/triage2-sk'
diff --git a/perf/res/imp/alerts-page.html b/perf/res/imp/alerts-page.html
index 97d2807..2e135be 100644
--- a/perf/res/imp/alerts-page.html
+++ b/perf/res/imp/alerts-page.html
@@ -21,8 +21,6 @@
<link rel="import" href="/res/imp/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="/res/imp/bower_components/paper-fab/paper-fab.html">
-<link rel="import" href="/res/common/imp/query-summary-sk.html" />
-
<link rel="import" href="/res/imp/alert-config.html" />
<dom-module id="alerts-page-sk">
@@ -92,7 +90,7 @@
<tr>
<td><iron-icon title="Edit" icon="create" on-tap="_edit" __config="{{item}}"></iron-icon></td>
<td>{{item.display_name}}</td>
- <td><query-summary-sk selection="{{item.query}}"></query-summary-sk></td>
+ <td><query-summary-sk selection="[[item.query]]"></query-summary-sk></td>
<td>{{item.alert}}</td>
<td>{{item.owner}}</td>
<td><iron-icon title="Delete" icon="delete" on-tap="_delete" __config="{{item}}"></iron-icon></td>
diff --git a/perf/res/imp/cluster-page.html b/perf/res/imp/cluster-page.html
index 59eb38f..554ecae 100644
--- a/perf/res/imp/cluster-page.html
+++ b/perf/res/imp/cluster-page.html
@@ -20,7 +20,6 @@
<link rel="import" href="/res/common/imp/details-summary.html">
<link rel="import" href="/res/common/imp/query2-sk.html" />
-<link rel="import" href="/res/common/imp/query-summary-sk.html" />
<link rel="import" href="/res/common/imp/sort.html" />
<link rel="stylesheet" href="/res/common/css/md.css">
diff --git a/perf/res/imp/explore.html b/perf/res/imp/explore.html
index 53fc14b..d41da08 100644
--- a/perf/res/imp/explore.html
+++ b/perf/res/imp/explore.html
@@ -22,7 +22,6 @@
<link rel="import" href="/res/common/imp/query2-sk.html" />
<link rel="import" href="/res/common/imp/paramset.html" />
-<link rel="import" href="/res/common/imp/query-summary-sk.html" />
<link rel="stylesheet" href="/res/common/css/md.css">
<dom-module id="explore-sk">
diff --git a/perf/res/imp/triage-page.html b/perf/res/imp/triage-page.html
index 0f5ab5b..c24f848 100644
--- a/perf/res/imp/triage-page.html
+++ b/perf/res/imp/triage-page.html
@@ -17,7 +17,6 @@
<link rel="import" href="/res/imp/bower_components/iron-selector/iron-selector.html">
<link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
-<link rel="import" href="/res/common/imp/query-summary-sk.html" />
<link rel="import" href="/res/common/imp/details-summary.html" />
<dom-module id="triage-page-sk">
diff --git a/res/imp/query-chooser.html b/res/imp/query-chooser.html
index 891dc83..aa2c403 100644
--- a/res/imp/query-chooser.html
+++ b/res/imp/query-chooser.html
@@ -15,7 +15,6 @@
-->
<link rel="stylesheet" href="/res/common/css/md.css">
<link rel=import href="query.html">
-<link rel=import href="query-summary-sk.html">
<dom-module id="query-chooser-sk">
<style>
diff --git a/res/imp/query-summary-sk-demo.html b/res/imp/query-summary-sk-demo.html
deleted file mode 100644
index 39f1300..0000000
--- a/res/imp/query-summary-sk-demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<html>
-<head>
- <title>query-summary-sk demo</title>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
- <script src="/res/common/js/common.js"></script>
- <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
- <link rel=import href="/res/imp/bower_components/polymer/polymer.html">
- <link rel=import href="query-summary-sk.html">
-</head>
-<body>
- <h1>Query Summary</h1>
-
- <query-summary-sk id=summary url="#foo"></query-summary-sk>
-
- <query-summary-sk id=summary2></query-summary-sk>
-
- <script type="text/javascript" charset="utf-8">
- var paramset = {
- "config": ["565", "8888"],
- "type": ["CPU", "GPU"],
- "units": ["ms", "bytes"],
- "test": [
- "DeferredSurfaceCopy_discardable",
- "DeferredSurfaceCopy_nonDiscardable",
- "GLInstancedArraysBench_instance",
- "GLInstancedArraysBench_one_0",
- "GLInstancedArraysBench_one_1",
- "GLInstancedArraysBench_one_2",
- "GLInstancedArraysBench_one_4",
- "GLInstancedArraysBench_one_8",
- "GLInstancedArraysBench_two_0",
- "GLInstancedArraysBench_two_1",
- "GLInstancedArraysBench_two_2",
- "GLInstancedArraysBench_two_4",
- "GLInstancedArraysBench_two_8",
- "GLVec4ScalarBench_scalar_1_stage",
- "GLVec4ScalarBench_scalar_2_stage",
- ],
- };
- $$$('#summary').selection = sk.query.fromParamSet(paramset);
- $$$('#summary2').selection = sk.query.fromParamSet(paramset);
- </script>
-</body>
-</html>
diff --git a/res/imp/query-summary-sk.html b/res/imp/query-summary-sk.html
deleted file mode 100644
index 9200fae..0000000
--- a/res/imp/query-summary-sk.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!-- The <query-summary-sk> custom element declaration.
-
- Displays a summary of a selection made using query-sk.
-
- Attributes:
- url - If supplied, the displayed summary will be a link to the given URL.
-
- selection - A query-sk selection formatted as query parameters to be
- displayed.
- Events:
- None.
-
- Methods:
- None.
--->
-<dom-module id="query-summary-sk">
- <style>
- #query,
- a[href] {
- max-width: 30em;
- overflow: auto;
- color: #1f78b4;
- font-weight: bold;
- word-wrap: break-word;
- vertical-align: middle;
- }
- </style>
- <template>
- <pre id=query><template is="dom-if" if="{{url}}"><a href="{{url}}">{{_display(selection)}}</a></template><template is="dom-if" if="{{!url}}">{{_display(selection)}}</template></pre>
- </template>
-</dom-module>
-
-<script>
- Polymer({
- is: "query-summary-sk",
-
- properties: {
- url: {
- type: String,
- value: "",
- reflectToAttribute: true,
- },
- selection: {
- type: String,
- value: "",
- reflectToAttribute: true,
- },
- },
-
- _display: function(s) {
- if (!s) {
- return "[No filters applied]";
- }
- var p = sk.query.toParamSet(s);
- var keys = Object.keys(p);
- keys.sort();
- var ret = [];
- keys.forEach(function(key) {
- p[key].forEach(function(value) {
- ret.push(key + "=" + value);
- });
- });
- return ret.join("\n");
- },
- });
-</script>
diff --git a/res/imp/query2-chooser.html b/res/imp/query2-chooser.html
index 558d867..3913bd2 100644
--- a/res/imp/query2-chooser.html
+++ b/res/imp/query2-chooser.html
@@ -23,7 +23,6 @@
<link rel=import href="query2-sk.html">
<link rel=import href="query2-count.html">
-<link rel=import href="query-summary-sk.html">
<dom-module id="query2-chooser-sk">
<style include="iron-flex iron-flex-alignment iron-positioning">
@@ -63,7 +62,7 @@
<template>
<div class="horizontal layout center">
<button on-tap="_editTap" class=raised>Edit</button>
- <query-summary-sk id=summary selection="{{current_query}}"></query-summary-sk>
+ <query-summary-sk id=summary selection="[[current_query]]"></query-summary-sk>
</div>
<div id="dialog">
<query2-sk current_query="{{current_query}}" id=query></query2-sk>
diff --git a/res/imp/query2-sk-demo.html b/res/imp/query2-sk-demo.html
index 0306f09..6212194 100644
--- a/res/imp/query2-sk-demo.html
+++ b/res/imp/query2-sk-demo.html
@@ -7,7 +7,6 @@
<script src="/res/common/js/common.js"></script>
<script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel=import href="query2-sk.html">
- <link rel=import href="query-summary-sk.html">
</head>
<body>
<h1>Query2</h1>
diff --git a/res/imp/query2-values-sk-demo.html b/res/imp/query2-values-sk-demo.html
index e6088f7..b6ec3f7 100644
--- a/res/imp/query2-values-sk-demo.html
+++ b/res/imp/query2-values-sk-demo.html
@@ -7,7 +7,6 @@
<script src="/res/common/js/common.js"></script>
<script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel=import href="query2-sk.html">
- <link rel=import href="query-summary-sk.html">
<style type="text/css" media="screen">
query2-values-sk {
display: block;
