mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-20 15:36:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

cssmanager: Refactor CSS manager creation to avoid race condition

Browse source 
Safari takes a while to initialize `document.styleSheets`, which
results in a race condition when loading the pad. Avoid the race
condition by accessing the CSSStyleSheet objects directly from the
HTMLStyleElement DOM objects.
This commit is contained in:
Richard Hansen 2021-03-19 20:50:01 -04:00 • committed by John McLear
parent e2bfe2fd10
commit 3ad1d0a74f
5 changed files with 20 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/static/js/ace2_inner.js
View file

@ -30,11 +30,10 @@ const htmlPrettyEscape = Ace2Common.htmlPrettyEscape;
const noop = Ace2Common.noop;
const hooks = require('./pluginfw/hooks');
function Ace2Inner(editorInfo) {
function Ace2Inner(editorInfo, cssManagers) {
const makeChangesetTracker = require('./changesettracker').makeChangesetTracker;
const colorutils = require('./colorutils').colorutils;
const makeContentCollector = require('./contentcollector').makeContentCollector;
const makeCSSManager = require('./cssmanager').makeCSSManager;
const domline = require('./domline').domline;
const AttribPool = require('./AttributePool');
const Changeset = require('./Changeset');
@ -157,10 +156,6 @@ function Ace2Inner(editorInfo) {
const scheduler = parent; // hack for opera required
let dynamicCSS = null;
let outerDynamicCSS = null;
let parentDynamicCSS = null;
const performDocumentReplaceRange = (start, end, newText) => {
if (start === undefined) start = rep.selStart;
if (end === undefined) end = rep.selEnd;
@ -181,12 +176,6 @@ function Ace2Inner(editorInfo) {
performDocumentApplyChangeset(cs);
};
const initDynamicCSS = () => {
dynamicCSS = makeCSSManager('dynamicsyntax');
outerDynamicCSS = makeCSSManager('dynamicsyntax', 'outer');
parentDynamicCSS = makeCSSManager('dynamicsyntax', 'parent');
};
const changesetTracker = makeChangesetTracker(scheduler, rep.apool, {
withCallbacks: (operationName, f) => {
inCallStackIfNecessary(operationName, () => {
@ -214,15 +203,12 @@ function Ace2Inner(editorInfo) {
editorInfo.ace_getAuthorInfos = getAuthorInfos;
const setAuthorStyle = (author, info) => {
if (!dynamicCSS) {
return;
}
const authorSelector = getAuthorColorClassSelector(getAuthorClassName(author));
const authorStyleSet = hooks.callAll('aceSetAuthorStyle', {
dynamicCSS,
parentDynamicCSS,
outerDynamicCSS,
dynamicCSS: cssManagers.inner,
outerDynamicCSS: cssManagers.outer,
parentDynamicCSS: cssManagers.parent,
info,
author,
authorSelector,
@ -234,16 +220,16 @@ function Ace2Inner(editorInfo) {
}
if (!info) {
dynamicCSS.removeSelectorStyle(authorSelector);
parentDynamicCSS.removeSelectorStyle(authorSelector);
cssManagers.inner.removeSelectorStyle(authorSelector);
cssManagers.parent.removeSelectorStyle(authorSelector);
} else if (info.bgcolor) {
let bgcolor = info.bgcolor;
if ((typeof info.fade) === 'number') {
bgcolor = fadeColor(bgcolor, info.fade);
}
const authorStyle = dynamicCSS.selectorStyle(authorSelector);
const parentAuthorStyle = parentDynamicCSS.selectorStyle(authorSelector);
const authorStyle = cssManagers.inner.selectorStyle(authorSelector);
const parentAuthorStyle = cssManagers.parent.selectorStyle(authorSelector);
// author color
authorStyle.backgroundColor = bgcolor;
@ -3906,8 +3892,6 @@ function Ace2Inner(editorInfo) {
root.classList.toggle('authorColors', true);
root.classList.toggle('doesWrap', doesWrap);
initDynamicCSS();
enforceEditability();
// set up dom and rep
@ -3929,7 +3913,7 @@ function Ace2Inner(editorInfo) {
};
}
exports.init = async (editorInfo) => {
const editor = new Ace2Inner(editorInfo);
exports.init = async (editorInfo, cssManagers) => {
const editor = new Ace2Inner(editorInfo, cssManagers);
await editor.init();
};