Add css styles to the frontend plugin api
This is required for non-Polymer plugin elements for being able
to refer to some standard styling in Gerrit.
Change-Id: I545c76e30eae33dd7f2ce229129d35c76dff3a9b
diff --git a/polygerrit-ui/app/api/gerrit.ts b/polygerrit-ui/app/api/gerrit.ts
index b5a349f..8488961 100644
--- a/polygerrit-ui/app/api/gerrit.ts
+++ b/polygerrit-ui/app/api/gerrit.ts
@@ -15,6 +15,7 @@
* limitations under the License.
*/
import {PluginApi} from './plugin';
+import {Styles} from './styles';
declare global {
interface Window {
@@ -30,4 +31,5 @@
opt_version?: string,
src?: string
): void;
+ styles: Styles;
}
diff --git a/polygerrit-ui/app/api/styles.ts b/polygerrit-ui/app/api/styles.ts
new file mode 100644
index 0000000..e393667
--- /dev/null
+++ b/polygerrit-ui/app/api/styles.ts
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (C) 2021 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.
+ */
+
+/**
+ * We are sharing a couple of sets of CSS rules with plugins such that they can
+ * adopt Gerrit's styling beyond just using CSS properties from the theme.
+ *
+ * This is a bit tricky, because plugin elements have their own shadow DOM, and
+ * unfortunately Firefox has not adopted "constructable stylesheets" yet. So we
+ * are basically just exposing CSS strings here.
+ *
+ * Plugins that use Lit can cast `Style` to `CSSResult`.
+ *
+ * Non-Lit plugins can call call `toString()` on `Style`.
+ */
+
+/** Lit plugins can cast Style to CSSResult. */
+export interface Style {
+ toString(): string;
+}
+
+export interface Styles {
+ form: Style;
+ menuPage: Style;
+ subPage: Style;
+ table: Style;
+}
diff --git a/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-gerrit.ts b/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-gerrit.ts
index a195206..3ee393c 100644
--- a/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-gerrit.ts
+++ b/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-gerrit.ts
@@ -31,6 +31,10 @@
} from '../../../services/gr-event-interface/gr-event-interface';
import {GerritNav} from '../../core/gr-navigation/gr-navigation';
import {Gerrit} from '../../../api/gerrit';
+import {formStyles} from '../../../styles/gr-form-styles';
+import {menuPageStyles} from '../../../styles/gr-menu-page-styles';
+import {subpageStyles} from '../../../styles/gr-subpage-styles';
+import {tableStyles} from '../../../styles/gr-table-styles';
/**
* These are the methods and properties that are exposed explicitly in the
@@ -116,6 +120,13 @@
public readonly Auth = appContext.authService;
+ public readonly styles = {
+ form: formStyles,
+ menuPage: menuPageStyles,
+ subPage: subpageStyles,
+ table: tableStyles,
+ };
+
/**
* @deprecated Use plugin.styles().css(rulesStr) instead. Please, consult
* the documentation how to replace it accordingly.
diff --git a/polygerrit-ui/app/styles/gr-form-styles.ts b/polygerrit-ui/app/styles/gr-form-styles.ts
index a2a4bab..b9aecff9 100644
--- a/polygerrit-ui/app/styles/gr-form-styles.ts
+++ b/polygerrit-ui/app/styles/gr-form-styles.ts
@@ -14,16 +14,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import {css} from 'lit-element';
-// Mark the file as a module. Otherwise typescript assumes this is a script
-// and $_documentContainer is a global variable.
-// See: https://www.typescriptlang.org/docs/handbook/modules.html
-export {};
-
-const $_documentContainer = document.createElement('template');
-
export const formStyles = css`
.gr-form-styles input {
background-color: var(--view-background-color);
@@ -121,6 +113,7 @@
}
`;
+const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<dom-module id="gr-form-styles">
<template>
<style>
@@ -128,5 +121,4 @@
</style>
</template>
</dom-module>`;
-
document.head.appendChild($_documentContainer.content);
diff --git a/polygerrit-ui/app/styles/gr-menu-page-styles.ts b/polygerrit-ui/app/styles/gr-menu-page-styles.ts
index d46f136..0471a4e 100644
--- a/polygerrit-ui/app/styles/gr-menu-page-styles.ts
+++ b/polygerrit-ui/app/styles/gr-menu-page-styles.ts
@@ -14,68 +14,68 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+import {css} from 'lit-element';
-// Mark the file as a module. Otherwise typescript assumes this is a script
-// and $_documentContainer is a global variable.
-// See: https://www.typescriptlang.org/docs/handbook/modules.html
-export {};
+export const menuPageStyles = css`
+ :host {
+ display: block;
+ }
+ .main {
+ margin: var(--spacing-xxl) auto;
+ max-width: 50em;
+ }
+ .mainHeader {
+ margin-left: 14em;
+ padding: var(--spacing-l) 0 var(--spacing-l) var(--spacing-xxl);
+ }
+ .main.table,
+ .mainHeader {
+ margin-top: 0;
+ margin-right: 0;
+ margin-left: 14em;
+ max-width: none;
+ }
+ h2.edited:after {
+ color: var(--deemphasized-text-color);
+ content: ' *';
+ }
+ .loading {
+ color: var(--deemphasized-text-color);
+ padding: var(--spacing-l);
+ }
+ @media only screen and (max-width: 67em) {
+ .main {
+ margin: var(--spacing-xxl) 0 var(--spacing-xxl) 15em;
+ }
+ .main.table {
+ margin-left: 14em;
+ }
+ }
+ @media only screen and (max-width: 53em) {
+ .loading {
+ padding: 0 var(--spacing-l);
+ }
+ .main {
+ margin: var(--spacing-xxl) var(--spacing-l);
+ }
+ .main.table {
+ margin: 0;
+ }
+ .mainHeader {
+ margin-left: 0;
+ padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-l);
+ }
+ }
+`;
const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = `<dom-module id="gr-menu-page-styles">
- <template>
- <style>
- :host {
- display: block;
- }
- .main {
- margin: var(--spacing-xxl) auto;
- max-width: 50em;
- }
- .mainHeader {
- margin-left: 14em;
- padding: var(--spacing-l) 0 var(--spacing-l) var(--spacing-xxl);
- }
- .main.table,
- .mainHeader {
- margin-top: 0;
- margin-right: 0;
- margin-left: 14em;
- max-width: none;
- }
- h2.edited:after {
- color: var(--deemphasized-text-color);
- content: ' *';
- }
- .loading {
- color: var(--deemphasized-text-color);
- padding: var(--spacing-l);
- }
- @media only screen and (max-width: 67em) {
- .main {
- margin: var(--spacing-xxl) 0 var(--spacing-xxl) 15em;
- }
- .main.table {
- margin-left: 14em;
- }
- }
- @media only screen and (max-width: 53em) {
- .loading {
- padding: 0 var(--spacing-l);
- }
- .main {
- margin: var(--spacing-xxl) var(--spacing-l);
- }
- .main.table {
- margin: 0;
- }
- .mainHeader {
- margin-left: 0;
- padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-l);
- }
- }
- </style>
- </template>
-</dom-module>`;
-
+$_documentContainer.innerHTML = `
+ <dom-module id="gr-menu-page-styles">
+ <template>
+ <style>
+ ${menuPageStyles.cssText}
+ </style>
+ </template>
+ </dom-module>
+`;
document.head.appendChild($_documentContainer.content);
diff --git a/polygerrit-ui/app/styles/gr-subpage-styles.ts b/polygerrit-ui/app/styles/gr-subpage-styles.ts
index 02364c8..fa3e55f 100644
--- a/polygerrit-ui/app/styles/gr-subpage-styles.ts
+++ b/polygerrit-ui/app/styles/gr-subpage-styles.ts
@@ -14,16 +14,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import {css} from 'lit-element';
-// Mark the file as a module. Otherwise typescript assumes this is a script
-// and $_documentContainer is a global variable.
-// See: https://www.typescriptlang.org/docs/handbook/modules.html
-export {};
-
-const $_documentContainer = document.createElement('template');
-
export const subpageStyles = css`
.main {
margin: var(--spacing-l);
@@ -39,12 +31,14 @@
}
`;
-$_documentContainer.innerHTML = `<dom-module id="gr-subpage-styles">
- <template>
- <style>
- ${subpageStyles.cssText}
- </style>
- </template>
-</dom-module>`;
-
+const $_documentContainer = document.createElement('template');
+$_documentContainer.innerHTML = `
+ <dom-module id="gr-subpage-styles">
+ <template>
+ <style>
+ ${subpageStyles.cssText}
+ </style>
+ </template>
+ </dom-module>
+`;
document.head.appendChild($_documentContainer.content);
diff --git a/polygerrit-ui/app/styles/gr-table-styles.ts b/polygerrit-ui/app/styles/gr-table-styles.ts
index d92bf55..72e36e1 100644
--- a/polygerrit-ui/app/styles/gr-table-styles.ts
+++ b/polygerrit-ui/app/styles/gr-table-styles.ts
@@ -14,16 +14,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import {css} from 'lit-element';
-// Mark the file as a module. Otherwise typescript assumes this is a script
-// and $_documentContainer is a global variable.
-// See: https://www.typescriptlang.org/docs/handbook/modules.html
-export {};
-
-const $_documentContainer = document.createElement('template');
-
export const tableStyles = css`
.genericList {
background-color: var(--background-color-primary);
@@ -113,12 +105,14 @@
}
`;
-$_documentContainer.innerHTML = `<dom-module id="gr-table-styles">
- <template>
- <style>
- ${tableStyles.cssText}
- </style>
- </template>
-</dom-module>`;
-
+const $_documentContainer = document.createElement('template');
+$_documentContainer.innerHTML = `
+ <dom-module id="gr-table-styles">
+ <template>
+ <style>
+ ${tableStyles.cssText}
+ </style>
+ </template>
+ </dom-module>
+`;
document.head.appendChild($_documentContainer.content);
