Merge branch 'style-editor2'

#253
This commit is contained in:
toasted-nutbread 2019-10-13 12:14:53 -04:00
commit 2f88bcf82c
14 changed files with 153 additions and 30 deletions

View File

@ -128,7 +128,8 @@
content: counter(audio-source-id); content: counter(audio-source-id);
} }
#custom-popup-css { #custom-popup-css,
#custom-popup-outer-css {
width: 100%; width: 100%;
min-height: 34px; min-height: 34px;
height: 96px; height: 96px;

View File

@ -241,3 +241,32 @@ function apiFrameInformationGet(sender) {
const frameId = sender.frameId; const frameId = sender.frameId;
return Promise.resolve({frameId}); return Promise.resolve({frameId});
} }
function apiInjectStylesheet(css, sender) {
if (!sender.tab) {
return Promise.reject(new Error('Invalid tab'));
}
const tabId = sender.tab.id;
const frameId = sender.frameId;
const details = {
code: css,
runAt: 'document_start',
cssOrigin: 'user',
allFrames: false
};
if (typeof frameId === 'number') {
details.frameId = frameId;
}
return new Promise((resolve, reject) => {
chrome.tabs.insertCSS(tabId, details, () => {
const e = chrome.runtime.lastError;
if (e) {
reject(new Error(e.message));
} else {
resolve();
}
});
});
}

View File

@ -185,6 +185,7 @@ Backend.messageHandlers = {
screenshotGet: ({options}, sender) => apiScreenshotGet(options, sender), screenshotGet: ({options}, sender) => apiScreenshotGet(options, sender),
forward: ({action, params}, sender) => apiForward(action, params, sender), forward: ({action, params}, sender) => apiForward(action, params, sender),
frameInformationGet: (params, sender) => apiFrameInformationGet(sender), frameInformationGet: (params, sender) => apiFrameInformationGet(sender),
injectStylesheet: ({css}, sender) => apiInjectStylesheet(css, sender)
}; };
window.yomichan_backend = new Backend(); window.yomichan_backend = new Backend();

View File

@ -278,7 +278,8 @@ function profileOptionsCreateDefaults() {
mainDictionary: '', mainDictionary: '',
popupTheme: 'default', popupTheme: 'default',
popupOuterTheme: 'default', popupOuterTheme: 'default',
customPopupCss: '' customPopupCss: '',
customPopupOuterCss: ''
}, },
audio: { audio: {

View File

@ -21,6 +21,7 @@ class SettingsPopupPreview {
constructor() { constructor() {
this.frontend = null; this.frontend = null;
this.apiOptionsGetOld = apiOptionsGet; this.apiOptionsGetOld = apiOptionsGet;
this.popupInjectOuterStylesheetOld = Popup.injectOuterStylesheet;
this.popupShown = false; this.popupShown = false;
this.themeChangeTimeout = null; this.themeChangeTimeout = null;
} }
@ -56,6 +57,9 @@ class SettingsPopupPreview {
await this.frontend.isPrepared(); await this.frontend.isPrepared();
// Overwrite popup
Popup.injectOuterStylesheet = (...args) => this.popupInjectOuterStylesheet(...args);
// Update search // Update search
this.updateSearch(); this.updateSearch();
} }
@ -76,6 +80,19 @@ class SettingsPopupPreview {
return options; 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() { onWindowResize() {
if (this.frontend === null) { return; } if (this.frontend === null) { return; }
const textSource = this.frontend.textSourceLast; const textSource = this.frontend.textSourceLast;
@ -127,6 +144,11 @@ class SettingsPopupPreview {
this.frontend.popup.setCustomCss(css); this.frontend.popup.setCustomCss(css);
} }
setCustomOuterCss(css) {
if (this.frontend === null) { return; }
this.frontend.popup.setCustomOuterCss(css, true);
}
async updateSearch() { async updateSearch() {
const exampleText = document.querySelector('#example-text'); const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; } if (exampleText === null) { return; }
@ -152,7 +174,8 @@ class SettingsPopupPreview {
SettingsPopupPreview.messageHandlers = { SettingsPopupPreview.messageHandlers = {
setText: (self, {text}) => self.setText(text), setText: (self, {text}) => self.setText(text),
setCustomCss: (self, {css}) => self.setCustomCss(css) setCustomCss: (self, {css}) => self.setCustomCss(css),
setCustomOuterCss: (self, {css}) => self.setCustomOuterCss(css)
}; };
SettingsPopupPreview.instance = SettingsPopupPreview.create(); SettingsPopupPreview.instance = SettingsPopupPreview.create();

View File

@ -42,6 +42,7 @@ async function formRead(options) {
options.general.popupTheme = $('#popup-theme').val(); options.general.popupTheme = $('#popup-theme').val();
options.general.popupOuterTheme = $('#popup-outer-theme').val(); options.general.popupOuterTheme = $('#popup-outer-theme').val();
options.general.customPopupCss = $('#custom-popup-css').val(); options.general.customPopupCss = $('#custom-popup-css').val();
options.general.customPopupOuterCss = $('#custom-popup-outer-css').val();
options.audio.enabled = $('#audio-playback-enabled').prop('checked'); options.audio.enabled = $('#audio-playback-enabled').prop('checked');
options.audio.autoPlay = $('#auto-play-audio').prop('checked'); options.audio.autoPlay = $('#auto-play-audio').prop('checked');
@ -112,6 +113,7 @@ async function formWrite(options) {
$('#popup-theme').val(options.general.popupTheme); $('#popup-theme').val(options.general.popupTheme);
$('#popup-outer-theme').val(options.general.popupOuterTheme); $('#popup-outer-theme').val(options.general.popupOuterTheme);
$('#custom-popup-css').val(options.general.customPopupCss); $('#custom-popup-css').val(options.general.customPopupCss);
$('#custom-popup-outer-css').val(options.general.customPopupOuterCss);
$('#audio-playback-enabled').prop('checked', options.audio.enabled); $('#audio-playback-enabled').prop('checked', options.audio.enabled);
$('#auto-play-audio').prop('checked', options.audio.autoPlay); $('#auto-play-audio').prop('checked', options.audio.autoPlay);
@ -283,6 +285,7 @@ function showAppearancePreview() {
const settings = $('#settings-popup-preview-settings'); const settings = $('#settings-popup-preview-settings');
const text = $('#settings-popup-preview-text'); const text = $('#settings-popup-preview-text');
const customCss = $('#custom-popup-css'); const customCss = $('#custom-popup-css');
const customOuterCss = $('#custom-popup-outer-css');
const frame = document.createElement('iframe'); const frame = document.createElement('iframe');
frame.src = '/bg/settings-popup-preview.html'; frame.src = '/bg/settings-popup-preview.html';
@ -300,6 +303,11 @@ function showAppearancePreview() {
const params = {css: customCss.val()}; const params = {css: customCss.val()};
frame.contentWindow.postMessage({action, params}, '*'); frame.contentWindow.postMessage({action, params}, '*');
}); });
customOuterCss.on('input', () => {
const action = 'setCustomOuterCss';
const params = {css: customOuterCss.val()};
frame.contentWindow.postMessage({action, params}, '*');
});
container.append(frame); container.append(frame);
buttonContainer.remove(); buttonContainer.remove();

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="yomichan-search"> <html lang="en" data-yomichan-page="search">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Yomichan Popup Preview</title> <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> <style>
html { html {
transition: background-color 0.25s linear 0s, color 0.25s linear 0s; transition: background-color 0.25s linear 0s, color 0.25s linear 0s;
@ -24,7 +24,7 @@
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif; font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px; font-size: 14px;
} }
iframe#yomichan-float { iframe.yomichan-float {
resize: none; resize: none;
} }
.vertical-align-outer { .vertical-align-outer {

View File

@ -252,8 +252,16 @@
</div> </div>
<div class="form-group options-advanced"> <div class="form-group options-advanced">
<label for="custom-popup-css">Custom popup CSS</label> <div class="row">
<div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div> <div class="col-xs-6">
<label for="custom-popup-css">Custom popup CSS</label>
<div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
</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" placeholder="iframe.yomichan-float { /*styles*/ }"></textarea></div>
</div>
</div>
</div> </div>
<div class="form-group ignore-form-changes" style="display: none;" id="settings-popup-preview-settings"> <div class="form-group ignore-form-changes" style="display: none;" id="settings-popup-preview-settings">

View File

@ -17,7 +17,7 @@
*/ */
iframe#yomichan-float { iframe.yomichan-float {
all: initial; all: initial;
background-color: #fff; background-color: #fff;
border: 1px solid #999; border: 1px solid #999;
@ -29,13 +29,14 @@ iframe#yomichan-float {
box-sizing: border-box; box-sizing: border-box;
} }
iframe#yomichan-float[data-yomichan-theme=dark] { iframe.yomichan-float[data-yomichan-theme=dark],
iframe.yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] {
background-color: #1e1e1e; background-color: #1e1e1e;
border: 1px solid #666; border: 1px solid #666;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
} }
iframe#yomichan-float.yomichan-float-full-width { iframe.yomichan-float.yomichan-float-full-width {
border-left: none; border-left: none;
border-right: none; border-right: none;
left: 0 !important; left: 0 !important;
@ -45,13 +46,13 @@ iframe#yomichan-float.yomichan-float-full-width {
resize: none; resize: none;
} }
iframe#yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) { iframe.yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
border-bottom: none; border-bottom: none;
top: auto !important; top: auto !important;
bottom: 0 !important; bottom: 0 !important;
} }
iframe#yomichan-float.yomichan-float-full-width.yomichan-float-above { iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above {
border-top: none; border-top: none;
top: 0 !important; top: 0 !important;
bottom: auto !important; bottom: auto !important;

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="yomichan-float"> <html lang="en" data-yomichan-page="float">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />

View File

@ -64,3 +64,7 @@ function apiForward(action, params) {
function apiFrameInformationGet() { function apiFrameInformationGet() {
return utilInvoke('frameInformationGet'); return utilInvoke('frameInformationGet');
} }
function apiInjectStylesheet(css) {
return utilInvoke('injectStylesheet', {css});
}

View File

@ -27,7 +27,7 @@ class Popup {
this.child = null; this.child = null;
this.childrenSupported = true; this.childrenSupported = true;
this.container = document.createElement('iframe'); this.container = document.createElement('iframe');
this.container.id = 'yomichan-float'; this.container.className = 'yomichan-float';
this.container.addEventListener('mousedown', e => e.stopPropagation()); this.container.addEventListener('mousedown', e => e.stopPropagation());
this.container.addEventListener('scroll', e => e.stopPropagation()); this.container.addEventListener('scroll', e => e.stopPropagation());
this.container.setAttribute('src', chrome.extension.getURL('/fg/float.html')); this.container.setAttribute('src', chrome.extension.getURL('/fg/float.html'));
@ -38,6 +38,7 @@ class Popup {
this.visible = false; this.visible = false;
this.visibleOverride = null; this.visibleOverride = null;
this.options = null; this.options = null;
this.stylesheetInjectedViaApi = false;
this.updateVisibility(); this.updateVisibility();
} }
@ -75,6 +76,7 @@ class Popup {
}); });
this.observeFullscreen(); this.observeFullscreen();
this.onFullscreenChanged(); this.onFullscreenChanged();
this.setCustomOuterCss(this.options.general.customPopupOuterCss, false);
this.isInjected = true; this.isInjected = true;
}); });
} }
@ -271,19 +273,16 @@ class Popup {
} }
updateTheme() { updateTheme() {
this.container.dataset.yomichanTheme = this.getTheme(this.options.general.popupOuterTheme); this.container.dataset.yomichanTheme = this.options.general.popupOuterTheme;
this.container.dataset.yomichanSiteColor = this.getSiteColor();
} }
getTheme(themeName) { getSiteColor() {
if (themeName === 'auto') { const color = [255, 255, 255];
const color = [255, 255, 255]; Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor)); Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor));
Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor)); const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128); return dark ? 'dark' : 'light';
themeName = dark ? 'dark' : 'default';
}
return themeName;
} }
static addColor(target, color) { static addColor(target, color) {
@ -337,6 +336,23 @@ class Popup {
this.invokeApi('setCustomCss', {css}); this.invokeApi('setCustomCss', {css});
} }
async setCustomOuterCss(css, injectDirectly) {
// Cannot repeatedly inject stylesheets using web extension APIs since there is no way to remove them.
if (this.stylesheetInjectedViaApi) { return; }
if (injectDirectly || Popup.isOnExtensionPage()) {
Popup.injectOuterStylesheet(css);
} else {
if (!css) { return; }
try {
await apiInjectStylesheet(css);
this.stylesheetInjectedViaApi = true;
} catch (e) {
// NOP
}
}
}
clearAutoPlayTimer() { clearAutoPlayTimer() {
if (this.isInjected) { if (this.isInjected) {
this.invokeApi('clearAutoPlayTimer'); this.invokeApi('clearAutoPlayTimer');
@ -378,4 +394,35 @@ class Popup {
get url() { get url() {
return window.location.href; return window.location.href;
} }
static isOnExtensionPage() {
try {
const url = chrome.runtime.getURL('/');
return window.location.href.substr(0, url.length) === url;
} catch (e) {
// NOP
}
}
static injectOuterStylesheet(css) {
if (Popup.outerStylesheet === null) {
if (!css) { return; }
Popup.outerStylesheet = document.createElement('style');
Popup.outerStylesheet.id = "yomichan-popup-outer-stylesheet";
}
const outerStylesheet = Popup.outerStylesheet;
if (css) {
outerStylesheet.textContent = css;
const par = document.head;
if (par && outerStylesheet.parentNode !== par) {
par.appendChild(outerStylesheet);
}
} else {
outerStylesheet.textContent = '';
}
}
} }
Popup.outerStylesheet = null;

View File

@ -30,8 +30,8 @@
* General * General
*/ */
html.yomichan-float:not([data-yomichan-theme]), html:root[data-yomichan-page=float]:not([data-yomichan-theme]),
html.yomichan-float:not([data-yomichan-theme]) body { html:root[data-yomichan-page=float]:not([data-yomichan-theme]) body {
background-color: transparent; background-color: transparent;
} }
@ -82,8 +82,8 @@ ol, ul {
padding-bottom: 10px; padding-bottom: 10px;
} }
html:root.yomichan-float .entry, html:root[data-yomichan-page=float] .entry,
html:root.yomichan-float .note { html:root[data-yomichan-page=float] .note {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }