[TASK] Change Polymer 3 TYPO3 theme from HTML to JS

assets/static/gerrit-theme.html

-<!--
-Implemented with help of
-https://gerrit.wikimedia.org/r/plugins/gitiles/operations/puppet/+/refs/heads/production/modules/gerrit/files/homedir/review_site/static/gerrit-theme.html
-https://gerrit-review.googlesource.com/Documentation/pg-plugin-dev.html
-https://gerrit-review.googlesource.com/Documentation/config-themes.html
--->
-
-<dom-module id="typo3-styles">
-    <script>
-        Gerrit.install(function (plugin) {
-            plugin.registerStyleModule('app-theme-light', 'typo3-light-style');
-            plugin.registerStyleModule('app-theme', 'typo3-common-style');
-            plugin.registerCustomComponent('footer-left', 'typo3-custom-links');
-        });
-    </script>
-</dom-module>
-
-<dom-module id="typo3-light-style">
-    <template>
-        <style>
-            html {
-                --header-background-color: white;
-            }
-        </style>
-    </template>
-</dom-module>
-
-<dom-module id="typo3-common-style">
-    <template>
-        <style>
-            html {
-                --border-width: 0 0 3px 0;
-                --border-style: solid;
-                --header-box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2);
-            }
-        </style>
-    </template>
-</dom-module>
-
-<dom-module id="typo3-custom-links">
-    <template>
-        <style>
-            a {
-                color: var(--link-color);
-            }
-        </style>
-        | <a href="https://typo3.org/legal-notice/">Legal Notice</a>
-        | <a href="https://typo3.org/privacy-policy">Privacy Policy</a>
-    </template>
-    <script>
-        Polymer({is: 'typo3-custom-links'});
-    </script>
-</dom-module>
-
-<dom-module id="typo3-header-logo">
-    <script>
-        Gerrit.install(plugin => {
-            const domHook = plugin.hook('header-title', {replace: true});
-            domHook.onAttached(element => {
-                const el = element.appendChild(document.createElement('div'));
-                el.title = 'TYPO3 Code Review';
-                const logo_name = window.localStorage.getItem('dark-theme') ? 'typo3_logo_dark_1604607499.cache.svg' : 'typo3_logo_1604607499.cache.svg';
-                el.style.cssText = 'height: 1.8em; width: 4em; background: url(/static/' + logo_name + ') no-repeat left top / 4em 1.8em;';
-            });
-        });
-    </script>
-</dom-module>

assets/static/gerrit-theme.js

+/*
+TYPO3 Theming-Plugin
+
+Implemented with help of
+https://gerrit-review.googlesource.com/Documentation/pg-plugin-dev.html
+https://gerrit-review.googlesource.com/Documentation/pg-plugin-endpoints.html
+https://gerrit-review.googlesource.com/Documentation/config-themes.html
+https://gerrit.googlesource.com/gerrit/+/8e744788852904125567506550546e0df8a08eac/polygerrit-ui/app/samples/theme-plugin.js
+https://gerrit.wikimedia.org/r/plugins/gitiles/operations/puppet/+/refs/heads/production/modules/gerrit/files/homedir/review_site/static/gerrit-theme.html
+*/
+
+const CustomCommonStyle = document.createElement('dom-module');
+CustomCommonStyle.innerHTML = `
+    <template>
+        <style>
+            html {
+                --border-width: 0 0 3px 0;
+                --border-style: solid;
+                --header-box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2);
+            }
+        </style>
+    </template>
+`;
+CustomCommonStyle.register('typo3-common-style');
+
+const CustomLightStyle = document.createElement('dom-module');
+CustomLightStyle.innerHTML = `
+    <template>
+        <style>
+            html {
+                --header-background-color: white;
+            }
+        </style>
+    </template>
+`;
+CustomLightStyle.register('typo3-light-style');
+
+Gerrit.install(plugin => {
+    plugin.registerStyleModule('app-theme', 'typo3-common-style');
+    plugin.registerStyleModule('app-theme-light', 'typo3-light-style');
+
+    const domHookHeader = plugin.hook('header-title', {replace: true});
+    domHookHeader.onAttached(element => {
+        const headerDiv = element.appendChild(document.createElement('div'));
+        headerDiv.title = 'TYPO3 Code Review';
+        const logo_name = window.localStorage.getItem('dark-theme') ? 'typo3_logo_dark_1604607499.cache.svg' : 'typo3_logo_1604607499.cache.svg';
+        headerDiv.style.cssText = 'height: 1.8em; width: 4em; background: url(/static/' + logo_name + ') no-repeat left top / 4em 1.8em;';
+    });
+    const domHookFooterLeft = plugin.hook('footer-left');
+    domHookFooterLeft.onAttached(element => {
+        element.appendChild(document.createTextNode(' | '))
+        const legalNoticeLink = element.appendChild(document.createElement('a'));
+        legalNoticeLink.href = 'https://typo3.org/legal-notice';
+        legalNoticeLink.style = 'color: var(--link-color)';
+        legalNoticeLink.textContent = 'Legal Notice';
+        element.appendChild(document.createTextNode(' | '))
+        const privacyPolicyLink = element.appendChild(document.createElement('a'));
+        privacyPolicyLink.href = 'https://typo3.org/privacy-policy';
+        privacyPolicyLink.style = 'color: var(--link-color)';
+        privacyPolicyLink.textContent = 'Privacy Policy';
+    });
+});