gerrit: update theme to javascript plugin

Gerrit 3.4 deprecates HTML-based plugins, so the old theme doesn't
work.  I have reworked this into a javascript plugin.

This should look the same, although I've achieved things in different
ways.

This doesn't register light and dark variants; since
background-primary-color is white, by setting the
header-background-color to this we get white behind the header bar,
and it correctly switches to the default black(ish) when in dark mode
(currently its seems the header doesn't obey dark mode, so this is an
improvement).

I'm not sure what's going on with the extant header-border-image which
is a linear gradient all of the same color.  I modified this down to
1px (same as default) and made it fade in-and-out of the logo colour,
just for fun.

Change-Id: Ia2e32731c1cfe97639de2ec0e7660c7ed583e045

docker/gerrit/bazel/Dockerfile

@@ -22,7 +22,7 @@ RUN mkdir /var/gerrit/plugins && \
   unzip -jo /var/gerrit/bin/gerrit.war WEB-INF/plugins/* -d /var/gerrit/plugins
 
 # NOTE(ianw) : copied into build context by playbooks/zuul/gerrit/run.yaml
-COPY plugins/opendevtheme.html /var/gerrit/plugins/opendevtheme.html
+COPY plugins/opendev-theme-plugin.js /var/gerrit/plugins/opendev-theme-plugin.js
 # Copy copies only the contents of a directory not the directory itself.
 COPY static/ /var/gerrit/static/
 

playbooks/zuul/gerrit/files/plugins/opendev-theme-plugin.js

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright (C) 2021 Red Hat, Inc.
+ *
+ * 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.
+ */
+
+'use strict';
+
+const openDevThemeStyle = document.createElement('dom-module');
+openDevThemeStyle.innerHTML = `
+      <template>
+        <style>
+          html {
+            --header-title-content: "OpenDev";
+            --header-icon: url("/static/opendev-sm.png");
+            --header-background-color: var(--background-color-primary);
+            --header-icon-size: 1.2em;
+            --header-border-bottom: 1px solid;
+            --header-border-image: linear-gradient(to right, #ee265e,  #f9b8cb, #ee265e) 1;
+          }
+        </style>
+      </template>
+`;
+openDevThemeStyle.register('opendev-site-theme');
+
+Gerrit.install(plugin => {
+    plugin.registerStyleModule('app-theme', 'opendev-site-theme');
+});

playbooks/zuul/gerrit/files/plugins/opendevtheme.html

@@ -1,70 +0,0 @@
-<!--
-Copyright (C) 2019 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.
--->
-
-<dom-module id="opendev-styles">
-  <script>
-    if (window.Polymer) {
-      Gerrit.install((plugin) => {
-        if (window.localStorage.getItem('dark-theme')) {
-          plugin.registerStyleModule('app-theme', 'opendev-dark-style');
-        } else {
-          plugin.registerStyleModule('app-theme', 'opendev-light-style');
-        }
-        plugin.registerStyleModule('app-theme', 'opendev-common-style');
-      });
-    }
-  </script>
-</dom-module>
-
-<dom-module id="opendev-light-style">
-  <template>
-    <style>
-      html {
-        --header-background: white;
-        --header-text-color: #001133;
-      }
-    </style>
-  </template>
-</dom-module>
-
-<dom-module id="opendev-dark-style">
-  <template>
-    <style>
-      html {
-        --header-background: #3b3d3f;
-        --header-text-color: #e8eaed;
-      }
-    </style>
-  </template>
-</dom-module>
-
-<dom-module id="opendev-common-style">
-  <template>
-    <style>
-      html {
-        --header-title-content: "opendev";
-        --header-icon: url("/static/opendev-sm.png");
-        --header-icon-size: 1.2em;
-
-        --border-width: 0 0 3px 0;
-        --border-style: solid;
-        --box-shadow: 0 3px 3px 2px rgba(0,0,0,0.075), 0 0 2px rgba(0,0,0,0.2);
-        --header-border-bottom: 4px solid;
-        --header-border-image: linear-gradient(to right, #ed1944 15%, #ed1944 15%, #ed1944 85%, #ed1944 85%) 1;
-      }
-    </style>
-  </template>
-</dom-module>

playbooks/zuul/gerrit/run.yaml

@@ -53,7 +53,7 @@
             - static/robots.txt
             - static/system-cla.html
             - static/usg-cla.html
-            - plugins/opendevtheme.html
+            - plugins/opendev-theme-plugin.js
 
     - name: Build docker image
       include_role: