opendev/gerrit
Code Issues Proposed changes

Move dark-theme to js

Browse Source 
Since now we load dark-theme to the code, we don't need
reload when apply. Also moved touched tests to karma.

Also removed related rules in build.

Change-Id: Ie1375596ae1e3aab8dcba4534ca16a5c698a915b
This commit is contained in:
Tao Zhou
2020-06-24 14:18:13 +02:00
parent 581c4ed521
commit 5cf7e775a6
11 changed files with 331 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
polygerrit-ui/app/elements/custom-dark-theme_test.js
View File

@@ -16,32 +16,45 @@
*/
import '../test/common-test-setup-karma.js';
import {getComputedStyleValue} from '../utils/dom-util.js';
import './shared/gr-rest-api-interface/gr-rest-api-interface.js';
import './gr-app.js';
import {pluginLoader} from './shared/gr-js-api-interface/gr-plugin-loader.js';
import {removeTheme} from '../styles/themes/dark-theme.js';
const basicFixture = fixtureFromElement('gr-app');
suite('gr-app custom dark theme tests', () => {
let sandbox;
let element;
setup(done => {
window.localStorage.setItem('dark-theme', 'true');
sandbox = sinon.sandbox.create();
basicFixture.instantiate();
element = basicFixture.instantiate();
pluginLoader.loadPlugins([]);
pluginLoader.awaitPluginsLoaded().then(() => flush(done));
});
teardown(() => {
sandbox.restore();
window.localStorage.removeItem('dark-theme');
const addedTheme = document
.querySelector('link[href="/styles/themes/dark-theme.html"]');
if (addedTheme) {
addedTheme.remove();
}
removeTheme();
});
test('should tried to load dark theme', () => {
assert.isTrue(
!!document.querySelector('link[href="/styles/themes/dark-theme.html"]')
!!document.head.querySelector('#dark-theme')
);
});
test('applies the right theme', () => {
assert.equal(
getComputedStyleValue('--header-background-color', element)
.toLowerCase(),
'#3b3d3f');
assert.equal(
getComputedStyleValue('--footer-background-color', element)
.toLowerCase(),
'#3b3d3f');
});
});

10
polygerrit-ui/app/elements/custom-light-theme_test.js
View File

@@ -20,6 +20,7 @@ import {getComputedStyleValue} from '../utils/dom-util.js';
import './shared/gr-rest-api-interface/gr-rest-api-interface.js';
import './gr-app.js';
import {pluginLoader} from './shared/gr-js-api-interface/gr-plugin-loader.js';
const basicFixture = fixtureFromElement('gr-app');
suite('gr-app custom light theme tests', () => {
@@ -45,16 +46,11 @@ suite('gr-app custom light theme tests', () => {
});
test('should not load dark theme', () => {
assert.isFalse(
!!document.querySelector('link[href="/styles/themes/dark-theme.html"]')
);
assert.isFalse(!!document.head.querySelector('#dark-theme'));
assert.isTrue(!!document.head.querySelector('#light-theme'));
});
test('applies the right theme', () => {
assert.equal(
getComputedStyleValue('--primary-text-color', element)
.toLowerCase(),
'black');
assert.equal(
getComputedStyleValue('--header-background-color', element)
.toLowerCase(),

5
polygerrit-ui/app/elements/gr-app-element.js
View File

@@ -16,6 +16,7 @@
*/
import '../styles/shared-styles.js';
import '../styles/themes/app-theme.js';
import {applyTheme as applyDarkTheme} from '../styles/themes/dark-theme.js';
import './admin/gr-admin-view/gr-admin-view.js';
import './documentation/gr-documentation-search/gr-documentation-search.js';
import './change-list/gr-change-list-view/gr-change-list-view.js';
@@ -202,9 +203,7 @@ class GrAppElement extends mixinBehaviors( [
});
if (window.localStorage.getItem('dark-theme')) {
// No need to add the style module to element again as it's imported
// by importHref already
this.$.libLoader.getDarkTheme();
applyDarkTheme();
}
// Note: this is evaluated here to ensure that it only happens after the

13
polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
View File

@@ -20,6 +20,7 @@ import '../../../styles/gr-form-styles.js';
import '../../../styles/gr-menu-page-styles.js';
import '../../../styles/gr-page-nav-styles.js';
import '../../../styles/shared-styles.js';
import {applyTheme as applyDarkTheme, removeTheme as removeDarkTheme} from '../../../styles/themes/dark-theme.js';
import '../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.js';
import '../gr-change-table-editor/gr-change-table-editor.js';
import '../../shared/gr-button/gr-button.js';
@@ -68,8 +69,6 @@ const GERRIT_DOCS_FILTER_PATH = '/user-notify.html';
const ABSOLUTE_URL_PATTERN = /^https?:/;
const TRAILING_SLASH_PATTERN = /\/$/;
const RELOAD_MESSAGE = 'Reloading...';
const HTTP_AUTH = [
'HTTP',
'HTTP_LDAP',
@@ -475,17 +474,19 @@ class GrSettingsView extends mixinBehaviors( [
_handleToggleDark() {
if (this._isDark) {
window.localStorage.removeItem('dark-theme');
removeDarkTheme();
} else {
window.localStorage.setItem('dark-theme', 'true');
applyDarkTheme();
}
this._isDark = !!window.localStorage.getItem('dark-theme');
this.dispatchEvent(new CustomEvent('show-alert', {
detail: {message: RELOAD_MESSAGE},
detail: {
message: `Theme changed to ${this._isDark ? 'dark' : 'light'}.`,
},
bubbles: true,
composed: true,
}));
this.async(() => {
window.location.reload();
}, 1);
}
_showHttpAuth(config) {

82
polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.html → polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.js
View File

@@ -1,46 +1,28 @@
<!DOCTYPE html>
<!--
@license
Copyright (C) 2016 The Android Open Source Project
/**
* @license
* Copyright (C) 2016 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.
*/
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.
-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta charset="utf-8">
<title>gr-settings-view</title>
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
<script src="/components/wct-browser-legacy/browser.js"></script>
<test-fixture id="basic">
<template>
<gr-settings-view></gr-settings-view>
</template>
</test-fixture>
<test-fixture id="blank">
<template>
<div></div>
</template>
</test-fixture>
<script type="module">
import '../../../test/common-test-setup.js';
import '../../../test/common-test-setup-karma.js';
import {getComputedStyleValue} from '../../../utils/dom-util.js';
import './gr-settings-view.js';
import {flush, dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
const basicFixture = fixtureFromElement('gr-settings-view');
const blankFixture = fixtureFromElement('div');
suite('gr-settings-view tests', () => {
let element;
let account;
@@ -112,7 +94,7 @@ suite('gr-settings-view tests', () => {
getConfig() { return Promise.resolve(config); },
getAccountGroups() { return Promise.resolve([]); },
});
element = fixture('basic');
element = basicFixture.instantiate();
// Allow the element to render.
element._loadingPromise.then(done);
@@ -122,6 +104,20 @@ suite('gr-settings-view tests', () => {
sandbox.restore();
});
test('theme changing', () => {
window.localStorage.removeItem('dark-theme');
assert.isFalse(window.localStorage.getItem('dark-theme') === 'true');
const themeToggle = element.shadowRoot
.querySelector('.darkToggle paper-toggle-button');
MockInteractions.tap(themeToggle);
assert.isTrue(window.localStorage.getItem('dark-theme') === 'true');
assert.equal(
getComputedStyleValue('--primary-text-color', document.body), '#e8eaed'
);
MockInteractions.tap(themeToggle);
assert.isFalse(window.localStorage.getItem('dark-theme') === 'true');
});
test('calls the title-change event', () => {
const titleChangedStub = sandbox.stub();
@@ -129,8 +125,7 @@ suite('gr-settings-view tests', () => {
const newElement = document.createElement('gr-settings-view');
newElement.addEventListener('title-change', titleChangedStub);
// Attach it to the fixture.
const blank = fixture('blank');
const blank = blankFixture.instantiate();
blank.appendChild(newElement);
flush();
@@ -529,4 +524,3 @@ suite('gr-settings-view tests', () => {
});
});
});
</script>

24
polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader.js
View File

@@ -15,7 +15,6 @@
* limitations under the License.
*/
import '../gr-js-api-interface/gr-js-api-interface.js';
import {importHref} from '../../../scripts/import-href.js';
import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
@@ -23,7 +22,6 @@ import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {htmlTemplate} from './gr-lib-loader_html.js';
const HLJS_PATH = 'bower_components/highlightjs/highlight.min.js';
const DARK_THEME_PATH = 'styles/themes/dark-theme.html';
/** @extends PolymerElement */
class GrLibLoader extends GestureEventListeners(
@@ -75,28 +73,6 @@ class GrLibLoader extends GestureEventListeners(
});
}
/**
* Loads the dark theme document. Returns a promise that resolves with a
* custom-style DOM element.
*
* @return {!Promise<Element>}
* @suppress {checkTypes}
*/
getDarkTheme() {
return new Promise((resolve, reject) => {
importHref(
this._getLibRoot() + DARK_THEME_PATH, () => {
const module = document.createElement('style');
module.setAttribute('include', 'dark-theme');
const cs = document.createElement('custom-style');
cs.appendChild(module);
resolve(cs);
},
reject);
});
}
/**
* Execute callbacks awaiting the HLJS lib load.
*/

57
polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_test.html → polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_test.js
View File

@@ -1,39 +1,25 @@
<!DOCTYPE html>
<!--
@license
Copyright (C) 2016 The Android Open Source Project
/**
* @license
* Copyright (C) 2016 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.
*/
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.
-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta charset="utf-8">
<title>gr-lib-loader</title>
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
<script src="/components/wct-browser-legacy/browser.js"></script>
<test-fixture id="basic">
<template>
<gr-lib-loader></gr-lib-loader>
</template>
</test-fixture>
<script type="module">
import '../../../test/common-test-setup.js';
import '../../../test/common-test-setup-karma.js';
import './gr-lib-loader.js';
const basicFixture = fixtureFromElement('gr-lib-loader');
suite('gr-lib-loader tests', () => {
let sandbox;
let element;
@@ -42,7 +28,7 @@ suite('gr-lib-loader tests', () => {
setup(() => {
sandbox = sinon.sandbox.create();
element = fixture('basic');
element = basicFixture.instantiate();
loadStub = sandbox.stub(element, '_loadScript', () =>
new Promise(resolve => resolveLoad = resolve)
@@ -145,4 +131,3 @@ suite('gr-lib-loader tests', () => {
});
});
});
</script>

11
polygerrit-ui/app/rules.bzl
View File

@@ -45,15 +45,6 @@ def polygerrit_bundle(name, srcs, outs, entry_point):
srcs = native.glob(["styles/**/*.css"]),
)
native.filegroup(
name = name + "_theme_sources",
srcs = native.glob(
["styles/themes/*.html"],
# app-theme.html already included via an import in gr-app.html.
exclude = ["styles/themes/app-theme.html"],
),
)
native.filegroup(
name = name + "_top_sources",
srcs = [
@@ -68,7 +59,6 @@ def polygerrit_bundle(name, srcs, outs, entry_point):
srcs = [
name + "_app_sources",
name + "_css_sources",
name + "_theme_sources",
name + "_top_sources",
"//lib/fonts:robotofonts",
"//lib/js:highlightjs__files",
@@ -84,7 +74,6 @@ def polygerrit_bundle(name, srcs, outs, entry_point):
"cp $(locations //lib/fonts:robotofonts) $$TMP/polygerrit_ui/fonts/",
"for f in $(locations " + name + "_top_sources); do cp $$f $$TMP/polygerrit_ui/; done",
"for f in $(locations " + name + "_css_sources); do cp $$f $$TMP/polygerrit_ui/styles; done",
"for f in $(locations " + name + "_theme_sources); do cp $$f $$TMP/polygerrit_ui/styles/themes; done",
"for f in $(locations //lib/js:highlightjs__files); do cp $$f $$TMP/polygerrit_ui/bower_components/highlightjs/ ; done",
"cp $(location @ui_npm//:node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js) $$TMP/polygerrit_ui/bower_components/webcomponentsjs/webcomponents-lite.js",
"cp $$FONT_DIR/roboto/*.ttf $$TMP/polygerrit_ui/fonts/roboto/",

10
polygerrit-ui/app/styles/themes/app-theme.js
View File

@@ -16,7 +16,8 @@
*/
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style><style is="custom-style">
$_documentContainer.innerHTML = `
<custom-style id="light-theme"><style is="custom-style">
html {
/**
* When adding a new color variable make sure to also add it to the other
@@ -223,10 +224,3 @@ html {
</style></custom-style>`;
document.head.appendChild($_documentContainer.content);
/*
FIXME(polymer-modulizer): the above comments were extracted
from HTML and may be out of place here. Review them and
then delete this comment!
*/

54
polygerrit-ui/app/styles/themes/dark-theme.html → polygerrit-ui/app/styles/themes/dark-theme.js
View File

@@ -1,21 +1,24 @@
<!--
@license
Copyright (C) 2019 The Android Open Source Project
/**
* @license
* Copyright (C) 2015 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.
*/
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.
-->
<dom-module id="dark-theme">
<custom-style><style is="custom-style">
function getStyleEl() {
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `
<custom-style id="dark-theme"><style is="custom-style">
html {
/**
* Sections and variables must stay consistent with app-theme.html.
@@ -153,5 +156,18 @@ limitations under the License.
/* rules applied to <html> */
background-color: var(--view-background-color);
}
</style></custom-style>
</dom-module>
</style></custom-style>`;
return $_documentContainer;
}
export function applyTheme() {
document.head.appendChild(getStyleEl().content);
}
export function removeTheme() {
const darkThemeEls = document.head.querySelectorAll('#dark-theme');
if (darkThemeEls.length) {
darkThemeEls.forEach(darkThemeEl => darkThemeEl.remove());
}
}

2
polygerrit-ui/app/test/tests.js
View File

@@ -143,7 +143,6 @@ const elements = [
'settings/gr-identities/gr-identities_test.html',
'settings/gr-menu-editor/gr-menu-editor_test.html',
'settings/gr-registration-dialog/gr-registration-dialog_test.html',
'settings/gr-settings-view/gr-settings-view_test.html',
'settings/gr-ssh-editor/gr-ssh-editor_test.html',
'settings/gr-watched-projects-editor/gr-watched-projects-editor_test.html',
'shared/gr-account-entry/gr-account-entry_test.html',
@@ -185,7 +184,6 @@ const elements = [
'shared/gr-fixed-panel/gr-fixed-panel_test.html',
'shared/gr-labeled-autocomplete/gr-labeled-autocomplete_test.html',
'shared/gr-label-info/gr-label-info_test.html',
'shared/gr-lib-loader/gr-lib-loader_test.html',
'shared/gr-limited-text/gr-limited-text_test.html',
'shared/gr-linked-chip/gr-linked-chip_test.html',
'shared/gr-linked-text/gr-linked-text_test.html',