Basic theme support

Plugins may provide following global CSS variables as a style module: --primary-text-color --header-background-color --footer-background-color Plugin must be imported as .html plugin. Complete working example: ``` html <dom-module id="my-plugin"> <script> Gerrit.install(function(plugin) { plugin.registerStyleModule('app-theme', 'myplugin-app-theme'); }); </script> </dom-module> <dom-module id="myplugin-app-theme"> <style> html { --primary-text-color: #F00BAA; --header-background-color: #F01BAA; --footer-background-color: #F02BAA; } </style> </dom-module> ``` Feature: Issue 4026 Change-Id: Ide5efa71a2da71827848c22d44219338e34edc3c
2017-04-28 13:22:29 -07:00
parent 0122b0aa17
commit a23f952615
5 changed files with 127 additions and 15 deletions
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -51,7 +51,7 @@ limitations under the License.
        position: relative;
      }
      .linksTitle {
-        color: black;
+        color: var(--primary-text-color);
        display: inline-block;
        position: relative;
      }
--- a/polygerrit-ui/app/elements/gr-app-it_test.html
+++ b/polygerrit-ui/app/elements/gr-app-it_test.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2017 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.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-app-it_test</title>
+
+<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../bower_components/web-component-tester/browser.js"></script>
+
+<link rel="import" href="../bower_components/iron-test-helpers/iron-test-helpers.html">
+<link rel="import" href="gr-app.html">
+
+<script>void(0);</script>
+
+<test-fixture id="element">
+  <template>
+    <gr-app id="app"></gr-app>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-app integration tests', function() {
+    var sandbox;
+    var element;
+
+    setup(function(done) {
+      sandbox = sinon.sandbox.create();
+      stub('gr-reporting', {
+        appStarted: sandbox.stub(),
+      });
+      stub('gr-account-dropdown', {
+        _getTopContent: sinon.stub(),
+      });
+      stub('gr-rest-api-interface', {
+        getAccount: function() { return Promise.resolve(null); },
+        getAccountCapabilities: function() { return Promise.resolve({}); },
+        getConfig: function() {
+          return Promise.resolve({
+            gerrit: {web_uis: ['GWT', 'POLYGERRIT']},
+            plugin: {
+              js_resource_paths: [],
+              html_resource_paths: [
+                new URL('test/plugin.html', window.location.href).toString()
+              ]
+            },
+          });
+        },
+        getVersion: function() { return Promise.resolve(42); },
+        getLoggedIn: function() { return Promise.resolve(false); },
+      });
+      element = fixture('element');
+
+      var importSpy = sandbox.spy(element.$.externalStyle, '_import');
+      Gerrit.awaitPluginsLoaded().then(function() {
+        Promise.all(importSpy.returnValues).then(function() {
+          flush(done);
+        });
+      });
+    });
+
+    teardown(function() {
+      sandbox.restore();
+    });
+
+    test('applies --primary-text-color', function() {
+      assert.equal(
+          element.getComputedStyleValue('--primary-text-color'), '#F00BAA');
+    });
+
+    test('applies --header-background-color', function() {
+      assert.equal(element.getComputedStyleValue('--header-background-color'),
+          '#F01BAA');
+    });
+    test('applies --footer-background-color', function() {
+      assert.equal(element.getComputedStyleValue('--footer-background-color'),
+          '#F02BAA');
+    });
+  });
+</script>
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -14,28 +14,25 @@ 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="../behaviors/base-url-behavior/base-url-behavior.html">
 <link rel="import" href="../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
-<link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../styles/app-theme.html">
-<link rel="import" href="./plugins/gr-plugin-host/gr-plugin-host.html">
-
 <link rel="import" href="./admin/gr-admin-view/gr-admin-view.html">
-
-<link rel="import" href="./core/gr-error-manager/gr-error-manager.html">
-<link rel="import" href="./core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.html">
-<link rel="import" href="./core/gr-main-header/gr-main-header.html">
-<link rel="import" href="./core/gr-router/gr-router.html">
-<link rel="import" href="./core/gr-reporting/gr-reporting.html">
-
 <link rel="import" href="./change-list/gr-change-list-view/gr-change-list-view.html">
 <link rel="import" href="./change-list/gr-dashboard-view/gr-dashboard-view.html">
 <link rel="import" href="./change/gr-change-view/gr-change-view.html">
+<link rel="import" href="./core/gr-error-manager/gr-error-manager.html">
+<link rel="import" href="./core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.html">
+<link rel="import" href="./core/gr-main-header/gr-main-header.html">
+<link rel="import" href="./core/gr-reporting/gr-reporting.html">
+<link rel="import" href="./core/gr-router/gr-router.html">
 <link rel="import" href="./diff/gr-diff-view/gr-diff-view.html">
+<link rel="import" href="./plugins/gr-external-style/gr-external-style.html">
+<link rel="import" href="./plugins/gr-plugin-host/gr-plugin-host.html">
 <link rel="import" href="./settings/gr-cla-view/gr-cla-view.html">
 <link rel="import" href="./settings/gr-registration-dialog/gr-registration-dialog.html">
 <link rel="import" href="./settings/gr-settings-view/gr-settings-view.html">
-
 <link rel="import" href="./shared/gr-overlay/gr-overlay.html">
 <link rel="import" href="./shared/gr-rest-api-interface/gr-rest-api-interface.html">

@@ -54,11 +51,11 @@ limitations under the License.
        color: var(--primary-text-color);
      }
      gr-main-header {
-        background-color: var(--header-background-color, #eee);
+        background-color: var(--header-background-color);
        padding: 0 var(--default-horizontal-margin);
      }
      footer {
-        background-color: var(--footer-background-color, #eee);
+        background-color: var(--footer-background-color);
        display: flex;
        justify-content: space-between;
        padding: .5rem var(--default-horizontal-margin);
@@ -175,6 +172,7 @@ limitations under the License.
    <gr-plugin-host id="plugins"
        config="[[_serverConfig.plugin]]">
    </gr-plugin-host>
+    <gr-external-style id="externalStyle" name="app-theme"></gr-external-style>
  </template>
  <script src="gr-app.js" crossorigin="anonymous"></script>
 </dom-module>
--- a/polygerrit-ui/app/elements/test/plugin.html
+++ b/polygerrit-ui/app/elements/test/plugin.html
@@ -0,0 +1,17 @@
+<dom-module id="my-plugin">
+  <script>
+    Gerrit.install(function(plugin) {
+        plugin.registerStyleModule('app-theme', 'myplugin-app-theme');
+    });
+  </script>
+</dom-module>
+
+<dom-module id="myplugin-app-theme">
+  <style>
+    html {
+      --primary-text-color: #F00BAA;
+      --header-background-color: #F01BAA;
+      --footer-background-color: #F02BAA;
+    }
+  </style>
+</dom-module>
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@@ -15,7 +15,12 @@ limitations under the License.
 -->
 <style is="custom-style">
 :root {
+  /* Following vars have LTS for plugin API. */
  --primary-text-color: #000;
+  --header-background-color: #eee;
+  --footer-background-color: var(--header-background-color);
+
+  /* Following are not part of plugin API. */
  --search-border-color: #ddd;
  --selection-background-color: #ebf5fb;
  --default-text-color: #000;
@@ -23,7 +28,6 @@ limitations under the License.
  --default-horizontal-margin: 1rem;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --monospace-font-family: 'Source Code Pro', Menlo, 'Lucida Console', Monaco, monospace;
-
  --iron-overlay-backdrop: {
    transition: none;
  };