Convert polygerrit to es6-modules
This change replace all HTML imports with es6-modules. The only exceptions are:
* gr-app.html file, which can be deleted only after updating the
gerrit/httpd/raw/PolyGerritIndexHtml.soy file.
* dark-theme.html which is loaded via importHref. Must be updated manually
later in a separate change.
This change was produced automatically by ./es6-modules-converter.sh script.
No manual changes were made.
Change-Id: I0c447dd8c05757741e2c940720652d01d9fb7d67
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.js b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.js
index 6f458d1..0cd2d7c 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.js
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.js
@@ -14,33 +14,39 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-(function() {
- 'use strict';
+import '../../../scripts/bundled-polymer.js';
- /** @extends Polymer.Element */
- class GrTooltip extends Polymer.GestureEventListeners(
- Polymer.LegacyElementMixin(
- Polymer.Element)) {
- static get is() { return 'gr-tooltip'; }
+import '../../../styles/shared-styles.js';
+import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {htmlTemplate} from './gr-tooltip_html.js';
- static get properties() {
- return {
- text: String,
- maxWidth: {
- type: String,
- observer: '_updateWidth',
- },
- positionBelow: {
- type: Boolean,
- reflectToAttribute: true,
- },
- };
- }
+/** @extends Polymer.Element */
+class GrTooltip extends GestureEventListeners(
+ LegacyElementMixin(
+ PolymerElement)) {
+ static get template() { return htmlTemplate; }
- _updateWidth(maxWidth) {
- this.updateStyles({'--tooltip-max-width': maxWidth});
- }
+ static get is() { return 'gr-tooltip'; }
+
+ static get properties() {
+ return {
+ text: String,
+ maxWidth: {
+ type: String,
+ observer: '_updateWidth',
+ },
+ positionBelow: {
+ type: Boolean,
+ reflectToAttribute: true,
+ },
+ };
}
- customElements.define(GrTooltip.is, GrTooltip);
-})();
+ _updateWidth(maxWidth) {
+ this.updateStyles({'--tooltip-max-width': maxWidth});
+ }
+}
+
+customElements.define(GrTooltip.is, GrTooltip);
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_html.js b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_html.js
index d78d554..5f9ce51 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_html.js
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_html.js
@@ -1,25 +1,22 @@
-<!--
-@license
-Copyright (C) 2016 The Android Open Source Project
+/**
+ * @license
+ * Copyright (C) 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<link rel="import" href="/bower_components/polymer/polymer.html">
-<link rel="import" href="../../../styles/shared-styles.html">
-
-<dom-module id="gr-tooltip">
- <template>
+export const htmlTemplate = html`
<style include="shared-styles">
:host {
--gr-tooltip-arrow-size: .5em;
@@ -66,6 +63,4 @@
[[text]]
<i class="arrowPositionAbove arrow"></i>
</div>
- </template>
- <script src="gr-tooltip.js"></script>
-</dom-module>
+`;
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_test.html b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_test.html
index 4c9b954..be5e26e 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_test.html
@@ -18,15 +18,20 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>gr-storage</title>
-<script src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
-<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
-<script src="/bower_components/web-component-tester/browser.js"></script>
-<script src="../../../test/test-pre-setup.js"></script>
-<link rel="import" href="../../../test/common-test-setup.html"/>
-<link rel="import" href="gr-tooltip.html">
+<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
+<script src="/components/wct-browser-legacy/browser.js"></script>
+<script type="module" src="../../../test/test-pre-setup.js"></script>
+<script type="module" src="../../../test/common-test-setup.js"></script>
+<script type="module" src="./gr-tooltip.js"></script>
-<script>void(0);</script>
+<script type="module">
+import '../../../test/test-pre-setup.js';
+import '../../../test/common-test-setup.js';
+import './gr-tooltip.js';
+void(0);
+</script>
<test-fixture id="basic">
<template>
@@ -35,35 +40,37 @@
</template>
</test-fixture>
-<script>
- suite('gr-tooltip tests', async () => {
- await readyToTest();
- let element;
- setup(() => {
- element = fixture('basic');
- });
-
- test('max-width is respected if set', () => {
- element.text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' +
- ', sed do eiusmod tempor incididunt ut labore et dolore magna aliqua';
- element.maxWidth = '50px';
- assert.equal(getComputedStyle(element).width, '50px');
- });
-
- test('the correct arrow is displayed', () => {
- assert.equal(getComputedStyle(element.shadowRoot
- .querySelector('.arrowPositionBelow')).display,
- 'none');
- assert.notEqual(getComputedStyle(element.shadowRoot
- .querySelector('.arrowPositionAbove'))
- .display, 'none');
- element.positionBelow = true;
- assert.notEqual(getComputedStyle(element.shadowRoot
- .querySelector('.arrowPositionBelow'))
- .display, 'none');
- assert.equal(getComputedStyle(element.shadowRoot
- .querySelector('.arrowPositionAbove'))
- .display, 'none');
- });
+<script type="module">
+import '../../../test/test-pre-setup.js';
+import '../../../test/common-test-setup.js';
+import './gr-tooltip.js';
+suite('gr-tooltip tests', () => {
+ let element;
+ setup(() => {
+ element = fixture('basic');
});
+
+ test('max-width is respected if set', () => {
+ element.text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' +
+ ', sed do eiusmod tempor incididunt ut labore et dolore magna aliqua';
+ element.maxWidth = '50px';
+ assert.equal(getComputedStyle(element).width, '50px');
+ });
+
+ test('the correct arrow is displayed', () => {
+ assert.equal(getComputedStyle(element.shadowRoot
+ .querySelector('.arrowPositionBelow')).display,
+ 'none');
+ assert.notEqual(getComputedStyle(element.shadowRoot
+ .querySelector('.arrowPositionAbove'))
+ .display, 'none');
+ element.positionBelow = true;
+ assert.notEqual(getComputedStyle(element.shadowRoot
+ .querySelector('.arrowPositionBelow'))
+ .display, 'none');
+ assert.equal(getComputedStyle(element.shadowRoot
+ .querySelector('.arrowPositionAbove'))
+ .display, 'none');
+ });
+});
</script>
