Inject custom styles into <wizard>

<wizard> is a custom element built-in in FF. This commit monkey-patches
attachShadow to inject custom styles into the shadow root of <wizard>.
This commit is contained in:
Tom Najdek 2024-01-10 13:17:39 +01:00 committed by Dan Stillman
parent 37d2b41778
commit b30e975379
7 changed files with 30 additions and 10 deletions

View file

@ -155,4 +155,16 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesC
originalEnsureInitialized.apply(this);
};
}
// inject custom CSS into FF built-in custom elements (currently only <wizard>)
for (let element of ["wizard"]) {
let oldAttachShadow = customElements.get(element).prototype.attachShadow;
customElements.get(element).prototype.attachShadow = function () {
let shadowRoot = oldAttachShadow.apply(this, arguments);
shadowRoot.appendChild(MozXULElement.parseXULToFragment(
`<html:link rel="stylesheet" href="chrome://zotero/skin/${element}.css"/>`
));
return shadowRoot;
};
}
}

View file

@ -26,9 +26,6 @@
/* global XULElementBase: false */
{
const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
const links = {
cc: 'https://wiki.creativecommons.org/Considerations_for_licensors_and_licensees',
cc0: 'https://wiki.creativecommons.org/CC0_FAQ'

View file

@ -26,8 +26,6 @@
/* global XULElementBase: false */
{
Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
class StyleSelector extends XULElementBase {
content = MozXULElement.parseXULToFragment(`
<div id="style-selector"

View file

@ -15,7 +15,12 @@
<html:link rel="localization" href="zotero.ftl" />
</linkset>
<script src="chrome://global/content/customElements.js"/>
<script>
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
</script>
<wizard id="import-wizard" class="import-wizard" width="600" height="400">
<wizardpage pageid="page-start" data-header-label-id="import-where-from">
<radiogroup id="import-source-group" align="start">
@ -108,8 +113,7 @@
</div>
</wizardpage>
</wizard>
<script src="chrome://zotero/content/include.js"/>
<script src="../fileInterface.js"/>
<script src="./importWizard.js" />
</window>

View file

@ -37,7 +37,11 @@
<html:link rel="localization" href="zotero.ftl" />
</linkset>
<script src="chrome://global/content/customElements.js" />
<script>
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
</script>
<script src="chrome://zotero/content/elements/publicationsLicenseInfo.js" />
<wizard

View file

@ -14,7 +14,11 @@
<html:link rel="localization" href="zotero.ftl" />
</linkset>
<script src="chrome://global/content/customElements.js" />
<script>
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
</script>
<wizard id="rtfscan-wizard" class="rtfscan-wizard" width="700" height="550" data-l10n-id="rtfScan-wizard">
<wizardpage pageid="page-start" data-l10n-id="rtfScan-intro-page">

1
scss/wizard.scss Normal file
View file

@ -0,0 +1 @@
// Override/enhance native wizard styles