Move chromium-style to js plugin
Change-Id: Ic91cb75104f832890423a447147954200604bff2
diff --git a/BUILD b/BUILD
index a0e2b75..848bf58 100644
--- a/BUILD
+++ b/BUILD
@@ -2,6 +2,6 @@
polygerrit_plugin(
name = "chromium_style",
- app = "src/main/resources/static/chromium-style.html",
+ app = "src/main/resources/static/chromium-style.js",
assets = glob(["**/*.png"]),
)
diff --git a/README.md b/README.md
index 40cdca9..8775686 100644
--- a/README.md
+++ b/README.md
@@ -2,4 +2,4 @@
## To use with the local testsite
-ln -s /path/to/chromium-style.html plugins/
+ln -s /path/to/chromium-style.js plugins/
diff --git a/src/main/resources/static/chromium-style.html b/src/main/resources/static/chromium-style.html
deleted file mode 100644
index 988e5ae..0000000
--- a/src/main/resources/static/chromium-style.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<dom-module id="chromium-style">
- <script>
- Gerrit.install(function(plugin) {
- plugin.registerStyleModule(
- 'change-metadata', 'chromium-style-change-metadata');
-
- if (window.location.host.includes('chromium-review')) {
- plugin.registerStyleModule('app-theme-dark', 'chromium-style-chromium-darktheme');
- plugin.registerStyleModule('app-theme-light', 'chromium-style-chromium');
- } else if (window.location.host.includes('chrome-internal-review')) {
- plugin.registerStyleModule('app-theme-dark', 'chromium-style-chrome-darktheme');
- plugin.registerStyleModule('app-theme-light', 'chromium-style-chrome');
- }
- });
- </script>
-</dom-module>
-
-<dom-module id="chromium-style-chromium-darktheme">
- <template>
- <style>
- html {
- /* Same color as light theme but with a 90 alpha */
- --header-background-color: #DCE5F890;
- --header-text-color: #000;
- --header-title-content: "Chromium Gerrit";
- --header-icon: url("chromium_logo.png");
- --header-icon-size: 1em;
- }
- </style>
- </template>
-</dom-module>
-
-
-<dom-module id="chromium-style-chromium">
- <template>
- <style>
- html {
- --header-background-color: #DCE5F8;
- --header-text-color: #000;
- --header-title-content: "Chromium Gerrit";
- --header-icon: url("chromium_logo.png");
- --header-icon-size: 1em;
- }
- </style>
- </template>
-</dom-module>
-
-<dom-module id="chromium-style-chrome-darktheme">
- <template>
- <style>
- html {
- /* Same color as light theme but with a 90 alpha */
- --header-background-color: #F5CFCC90;
- --header-text-color: #000;
- --header-title-content: "Chrome Internal Gerrit";
- --header-icon: url("chrome_logo.png");
- --header-icon-size: 1em;
- }
- </style>
- </template>
-</dom-module>
-
-<dom-module id="chromium-style-chrome">
- <template>
- <style>
- html {
- --header-background-color: #F5CFCC;
- --header-text-color: #000;
- --header-title-content: "Chrome Internal Gerrit";
- --header-icon: url("chrome_logo.png");
- --header-icon-size: 1em;
- }
- </style>
- </template>
-</dom-module>
-
-<dom-module id="chromium-style-change-metadata">
- <template>
- <style>
- html {
- --change-metadata-label-status: {
- display: none;
- }
- --change-metadata-strategy: {
- display: none;
- }
- }
- </style>
- </template>
-</dom-module>
diff --git a/src/main/resources/static/chromium-style.js b/src/main/resources/static/chromium-style.js
new file mode 100644
index 0000000..7653044
--- /dev/null
+++ b/src/main/resources/static/chromium-style.js
@@ -0,0 +1,93 @@
+const chromiumDarkTheme = document.createElement('dom-module');
+chromiumDarkTheme.innerHTML = `
+ <template>
+ <style>
+ html {
+ /* Same color as light theme but with a 90 alpha */
+ --header-background-color: #DCE5F890;
+ --header-text-color: #000;
+ --header-title-content: "Chromium Gerrit";
+ --header-icon: url("chromium_logo.png");
+ --header-icon-size: 1em;
+ }
+ </style>
+ </template>
+`;
+chromiumDarkTheme.register('chromium-style-chromium-darktheme');
+
+const chromiumLightTheme = document.createElement('dom-module');
+chromiumLightTheme.innerHTML = `
+ <template>
+ <style>
+ html {
+ --header-background-color: #DCE5F8;
+ --header-text-color: #000;
+ --header-title-content: "Chromium Gerrit";
+ --header-icon: url("chromium_logo.png");
+ --header-icon-size: 1em;
+ }
+ </style>
+ </template>`;
+
+chromiumLightTheme.register('chromium-style-chromium');
+
+const chromeDarkTheme = document.createElement('dom-module');
+chromeDarkTheme.innerHTML = `
+ <template>
+ <style>
+ html {
+ /* Same color as light theme but with a 90 alpha */
+ --header-background-color: #F5CFCC90;
+ --header-text-color: #000;
+ --header-title-content: "Chrome Internal Gerrit";
+ --header-icon: url("chrome_logo.png");
+ --header-icon-size: 1em;
+ }
+ </style>
+ </template>`;
+chromeDarkTheme.register('chromium-style-chrome-darktheme');
+
+const chromeLightTheme = document.createElement('dom-module');
+chromeLightTheme.innerHTML = `
+ <template>
+ <style>
+ html {
+ --header-background-color: #F5CFCC;
+ --header-text-color: #000;
+ --header-title-content: "Chrome Internal Gerrit";
+ --header-icon: url("chrome_logo.png");
+ --header-icon-size: 1em;
+ }
+ </style>
+ </template>`;
+chromeLightTheme.register("chromium-style-chrome");
+
+const chromiumChangeMetaStyle = document.createElement('dom-module');
+chromiumChangeMetaStyle.innerHTML = `
+ <template>
+ <style>
+ html {
+ --change-metadata-label-status: {
+ display: none;
+ }
+ --change-metadata-strategy: {
+ display: none;
+ }
+ }
+ </style>
+ </template>`;
+
+chromiumChangeMetaStyle.register('chromium-style-change-metadata');
+
+Gerrit.install(function(plugin) {
+ plugin.registerStyleModule(
+ 'change-metadata', 'chromium-style-change-metadata');
+
+ if (window.location.host.includes('chromium-review')) {
+ plugin.registerStyleModule('app-theme-dark', 'chromium-style-chromium-darktheme');
+ plugin.registerStyleModule('app-theme-light', 'chromium-style-chromium');
+ } else if (window.location.host.includes('chrome-internal-review')) {
+ plugin.registerStyleModule('app-theme-dark', 'chromium-style-chrome-darktheme');
+ plugin.registerStyleModule('app-theme-light', 'chromium-style-chrome');
+ }
+});
