Placeholder and improve consistency of stylesheet rule priorities

This commit is contained in:
toasted-nutbread 2019-10-13 12:10:00 -04:00
parent b34ff7ebe9
commit 1b96e69ea2
3 changed files with 19 additions and 2 deletions

View File

@ -21,6 +21,7 @@ class SettingsPopupPreview {
constructor() {
this.frontend = null;
this.apiOptionsGetOld = apiOptionsGet;
this.popupInjectOuterStylesheetOld = Popup.injectOuterStylesheet;
this.popupShown = false;
this.themeChangeTimeout = null;
}
@ -56,6 +57,9 @@ class SettingsPopupPreview {
await this.frontend.isPrepared();
// Overwrite popup
Popup.injectOuterStylesheet = (...args) => this.popupInjectOuterStylesheet(...args);
// Update search
this.updateSearch();
}
@ -76,6 +80,19 @@ class SettingsPopupPreview {
return options;
}
popupInjectOuterStylesheet(...args) {
// This simulates the stylesheet priorities when injecting using the web extension API.
const result = this.popupInjectOuterStylesheetOld(...args);
const outerStylesheet = Popup.outerStylesheet;
const node = document.querySelector('#client-css');
if (node !== null && outerStylesheet !== null) {
node.parentNode.insertBefore(outerStylesheet, node);
}
return result;
}
onWindowResize() {
if (this.frontend === null) { return; }
const textSource = this.frontend.textSourceLast;

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Yomichan Popup Preview</title>
<link rel="stylesheet" type="text/css" href="/fg/css/client.css">
<link rel="stylesheet" type="text/css" href="/fg/css/client.css" id="client-css">
<style>
html {
transition: background-color 0.25s linear 0s, color 0.25s linear 0s;

View File

@ -259,7 +259,7 @@
</div>
<div class="col-xs-6">
<label for="custom-popup-outer-css">Custom popup outer CSS</label>
<div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control"></textarea></div>
<div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control" placeholder="iframe.yomichan-float { /*styles*/ }"></textarea></div>
</div>
</div>
</div>