From 0fe08826ac5b3fe5f7465622890f963819952ab8 Mon Sep 17 00:00:00 2001 From: tophf Date: Mon, 14 Feb 2022 11:27:20 +0300 Subject: [PATCH] fix stuff --- edit/base.js | 8 ++++---- edit/edit.css | 23 ++++++++++++++--------- edit/edit.js | 20 ++++---------------- edit/embedded-popup.js | 6 +++--- edit/global-search.js | 4 ++-- edit/linter-manager.js | 3 ++- edit/moz-section-widget.js | 4 ++-- edit/sections-editor.js | 4 ++-- edit/util.js | 6 +++--- js/dom.js | 9 +++++---- manage/manage.js | 8 +++----- manage/sorter.js | 6 +++--- popup/popup.js | 6 +++--- 13 files changed, 50 insertions(+), 57 deletions(-) diff --git a/edit/base.js b/edit/base.js index 3aab872e..c9cca9e3 100644 --- a/edit/base.js +++ b/edit/base.js @@ -1,4 +1,4 @@ -/* global $ $$ $create $root setupLivePrefs waitForSelector */// dom.js +/* global $ $$ $create setupLivePrefs waitForSelector */// dom.js /* global API */// msg.js /* global CODEMIRROR_THEMES */ /* global CodeMirror */ @@ -32,7 +32,7 @@ const editor = { cancel: () => location.assign('/manage.html'), updateClass() { - $root.classList.toggle('is-new-style', !editor.style.id); + $.rootCL.toggle('is-new-style', !editor.style.id); }, updateTitle(isDirty = editor.dirty.isDirty()) { @@ -50,7 +50,7 @@ const editor = { const baseInit = (() => { const domReady = waitForSelector('#sections'); const mqCompact = matchMedia('(max-width: 850px)'); - const toggleCompact = mq => $root.classList.toggle('compact-layout', mq.matches); + const toggleCompact = mq => $.rootCL.toggle('compact-layout', mq.matches); mqCompact.on('change', toggleCompact); toggleCompact(mqCompact); @@ -92,7 +92,7 @@ const baseInit = (() => { editor.style = style; editor.updateClass(); editor.updateTitle(false); - $root.classList.add(editor.isUsercss ? 'usercss' : 'sectioned'); + $.rootCL.add(editor.isUsercss ? 'usercss' : 'sectioned'); sessionStore.justEditedStyleId = style.id || ''; // no such style so let's clear the invalid URL parameters if (!style.id) history.replaceState({}, '', location.pathname); diff --git a/edit/edit.css b/edit/edit.css index 856fcf52..7c53f783 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -1,5 +1,5 @@ :root { - --pad: 1rem; + --pad: 1rem; /* Edge padding for modals/blocks/whatnot. TODO: reuse it in more places */ --pad05: calc(0.5 * var(--pad)); --popup-button-width: 16px; } @@ -1095,12 +1095,6 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high flex-direction: row; margin: .25em 0 var(--pad05); } - #details-wrapper[data-open^=".."] details { - max-width: 50%; - } - #details-wrapper[data-open^="..."] { - flex-wrap: wrap; - } #details-wrapper details[open] { margin-top: 0; z-index: 1000; @@ -1114,11 +1108,22 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high } #details-wrapper details[open] > summary + * { position: absolute; - overflow-y: auto; - max-height: 10vh; + overflow: hidden auto; + max-height: var(--max-height, 10vh); background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); padding: var(--pad); + margin-top: var(--pad05); + } + @media (max-height: 500px) { + #details-wrapper { + --max-height: 50px; + } + } + #sections-list[open] > #toc { + left: 0; + margin-left: auto; + margin-right: auto; } #sections-list[open] > #toc, #lint[open] > .lint-report-container { diff --git a/edit/edit.js b/edit/edit.js index 700a1071..eafbb212 100644 --- a/edit/edit.js +++ b/edit/edit.js @@ -39,19 +39,6 @@ baseInit.ready.then(async () => { new MutationObserver(() => elSec.open && editor.updateToc()) .observe(elSec, {attributes: true, attributeFilter: ['open']}); - // Auto-update `data-open` attribute to the number of open details - { - const wrapper = $('#details-wrapper'); - const details = $$('details', wrapper); - const ds = wrapper.dataset; - const update = () => { - ds.open = '.'.repeat(details.reduce((res, el) => res + (el.open ? 1 : 0), 0)); - }; - for (const el of details) { - new MutationObserver(update).observe(el, {attributes: true, attributeFilter: ['open']}); - } - } - $('#toc').onclick = e => editor.jumpToEditor([...$('#toc').children].indexOf(e.target)); $('#keyMap-help').onclick = () => @@ -75,7 +62,8 @@ baseInit.ready.then(async () => { const {isUsercss} = editor; const el = $create('#header-sticker'); const scroller = isUsercss ? $('.CodeMirror-scroll') : document.body; - const xo = new IntersectionObserver(onScrolled, {root: isUsercss ? scroller : document}); + const xoRoot = isUsercss ? scroller : undefined; + const xo = new IntersectionObserver(onScrolled, {root: xoRoot}); scroller.appendChild(el); onCompactToggled(baseInit.mqCompact); baseInit.mqCompact.on('change', onCompactToggled); @@ -92,9 +80,9 @@ baseInit.ready.then(async () => { } } /** @param {IntersectionObserverEntry[]} entries */ - function onScrolled([e]) { + function onScrolled(entries) { const h = $('#header'); - const sticky = !e.isIntersecting; + const sticky = !entries.pop().isIntersecting; if (!isUsercss) scroller.style.paddingTop = sticky ? h.offsetHeight + 'px' : ''; h.classList.toggle('sticky', sticky); } diff --git a/edit/embedded-popup.js b/edit/embedded-popup.js index 9353ceb9..b09529c7 100644 --- a/edit/embedded-popup.js +++ b/edit/embedded-popup.js @@ -1,4 +1,4 @@ -/* global $ $create $remove $root getEventKeyName */// dom.js +/* global $ $create $remove getEventKeyName */// dom.js /* global CodeMirror */ /* global baseInit */// base.js /* global prefs */ @@ -20,8 +20,8 @@ title: t('optionsCustomizePopup') + '\n' + POPUP_HOTKEY, onclick: embedPopup, }); - $root.appendChild(btn); - $root.classList.add('popup-window'); + $.root.appendChild(btn); + $.rootCL.add('popup-window'); baseInit.domReady.then(() => { document.body.appendChild(btn); // Adding a dummy command to show in keymap help popup diff --git a/edit/global-search.js b/edit/global-search.js index 782b86a1..e4ebbaa8 100644 --- a/edit/global-search.js +++ b/edit/global-search.js @@ -1,4 +1,4 @@ -/* global $ $$ $create $remove $root focusAccessibility toggleDataset */// dom.js +/* global $ $$ $create $remove focusAccessibility toggleDataset */// dom.js /* global CodeMirror */ /* global chromeLocal */// storage-util.js /* global colorMimicry */ @@ -588,7 +588,7 @@ input: colorMimicry($('input:not(:disabled)'), {bg: 'backgroundColor'}), icon: colorMimicry($$('svg.info')[1], {fill: 'fill'}), }; - $root.appendChild( + $.root.appendChild( $(DIALOG_STYLE_SELECTOR) || $create('style' + DIALOG_STYLE_SELECTOR) ).textContent = ` diff --git a/edit/linter-manager.js b/edit/linter-manager.js index faccced0..6bd1792c 100644 --- a/edit/linter-manager.js +++ b/edit/linter-manager.js @@ -344,7 +344,8 @@ linterMan.DEFAULTS = { }; function updateCaption() { - Object.assign(caption, editor.getEditorTitle(cm)); + const t = editor.getEditorTitle(cm); + Object.assign(caption, typeof t == 'string' ? {textContent: t} : t); } function updateAnnotations(lines) { diff --git a/edit/moz-section-widget.js b/edit/moz-section-widget.js index 55394211..674d03b1 100644 --- a/edit/moz-section-widget.js +++ b/edit/moz-section-widget.js @@ -1,4 +1,4 @@ -/* global $ $create $root messageBoxProxy */// dom.js +/* global $ $create messageBoxProxy */// dom.js /* global CodeMirror */ /* global MozSectionFinder */ /* global colorMimicry */ @@ -218,7 +218,7 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) { transition: none; } `; - $root.appendChild(actualStyle); + $.root.appendChild(actualStyle); } /** diff --git a/edit/sections-editor.js b/edit/sections-editor.js index 10b575d7..4154b02a 100644 --- a/edit/sections-editor.js +++ b/edit/sections-editor.js @@ -1,4 +1,4 @@ -/* global $ $create $remove $root messageBoxProxy */// dom.js +/* global $ $create $remove messageBoxProxy */// dom.js /* global API */// msg.js /* global CodeMirror */ /* global RX_META debounce */// toolbox.js @@ -396,7 +396,7 @@ function SectionsEditor() { } function lockPageUI(locked) { - $root.style.pointerEvents = locked ? 'none' : ''; + $.root.style.pointerEvents = locked ? 'none' : ''; if (popup.codebox) { popup.classList.toggle('ready', locked ? false : !popup.codebox.isBlank()); popup.codebox.options.readOnly = locked; diff --git a/edit/util.js b/edit/util.js index 555d63f0..9a7f2c3d 100644 --- a/edit/util.js +++ b/edit/util.js @@ -1,4 +1,4 @@ -/* global $ $create $root getEventKeyName messageBoxProxy moveFocus */// dom.js +/* global $ $create getEventKeyName messageBoxProxy moveFocus */// dom.js /* global CodeMirror */ /* global editor */ /* global prefs */ @@ -195,7 +195,7 @@ function showCodeMirrorPopup(title, html, options) { }, options)); cm.focus(); - $root.style.pointerEvents = 'none'; + $.root.style.pointerEvents = 'none'; popup.style.pointerEvents = 'auto'; const onKeyDown = event => { @@ -210,7 +210,7 @@ function showCodeMirrorPopup(title, html, options) { window.on('closeHelp', () => { window.off('keydown', onKeyDown, true); - $root.style.removeProperty('pointer-events'); + $.root.style.removeProperty('pointer-events'); cm = popup.codebox = null; }, {once: true}); diff --git a/js/dom.js b/js/dom.js index 3e6ffe55..f89fcf8a 100644 --- a/js/dom.js +++ b/js/dom.js @@ -27,7 +27,8 @@ Object.assign(EventTarget.prototype, { //#region Exports -const $root = document.documentElement; +$.root = document.documentElement; +$.rootCL = $.root.classList; // Makes the focus outline appear on keyboard tabbing, but not on mouse clicks. const focusAccessibility = { @@ -476,9 +477,9 @@ const dom = {}; const lazyScripts = [ '/js/dom-on-load', ]; - if (!UA.windows) $root.classList.add('non-windows'); + if (!UA.windows) $.rootCL.add('non-windows'); // set language for a) CSS :lang pseudo and b) hyphenation - $root.setAttribute('lang', chrome.i18n.getUILanguage()); + $.root.setAttribute('lang', chrome.i18n.getUILanguage()); // set up header width resizer const HW = 'headerWidth.'; const HWprefId = HW + location.pathname.match(/^.(\w*)/)[1]; @@ -490,7 +491,7 @@ const dom = {}; // If this is a small window on a big monitor the user can maximize it later const max = (innerWidth < 850 ? screen.availWidth : innerWidth) / 3; width = Math.round(Math.max(200, Math.min(max, Number(width) || 0))); - $root.style.setProperty('--header-width', width + 'px'); + $.root.style.setProperty('--header-width', width + 'px'); return width; }, }); diff --git a/manage/manage.js b/manage/manage.js index 4c7b6199..31d5a4a7 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -10,7 +10,6 @@ $ $$ $create - $root animateElement setupLivePrefs waitForSelector @@ -37,9 +36,8 @@ Object.assign(newUI, { ids: Object.keys(newUI), prefKeyForId: id => `manage.newUI.${id}`.replace(/\.enabled$/, ''), renderClass: () => { - const cl = $root.classList; - cl.toggle('newUI', newUI.enabled); - cl.toggle('oldUI', !newUI.enabled); + $.rootCL.toggle('newUI', newUI.enabled); + $.rootCL.toggle('oldUI', !newUI.enabled); }, }); // ...read the actual values @@ -129,7 +127,7 @@ function onRuntimeMessage(msg) { async function toggleEmbeddedOptions(state) { const el = $('#stylus-embedded-options') || - state && $root.appendChild($create('iframe', { + state && $.root.appendChild($create('iframe', { id: 'stylus-embedded-options', src: '/options.html', })); diff --git a/manage/sorter.js b/manage/sorter.js index 12d5c412..7380bfab 100644 --- a/manage/sorter.js +++ b/manage/sorter.js @@ -1,4 +1,4 @@ -/* global $ $create $root messageBoxProxy onDOMready */// dom.js +/* global $ $create messageBoxProxy onDOMready */// dom.js /* global installed */// manage.js /* global prefs */ /* global t */// localization.js @@ -172,11 +172,11 @@ const sorter = (() => { function updateColumnCount() { let newValue = 1; - for (let el = $root.lastElementChild; + for (let el = $.root.lastElementChild; el.localName === 'style'; el = el.previousElementSibling) { if (el.textContent.includes('--columns:')) { - newValue = Math.max(1, getComputedStyle($root).getPropertyValue('--columns') | 0); + newValue = Math.max(1, getComputedStyle($.root).getPropertyValue('--columns') | 0); break; } } diff --git a/popup/popup.js b/popup/popup.js index 1c85be9e..7e7dd932 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -1,4 +1,4 @@ -/* global $ $$ $create $root setupLivePrefs */// dom.js +/* global $ $$ $create setupLivePrefs */// dom.js /* global ABOUT_BLANK getStyleDataMerged preinit */// preinit.js /* global API msg */// msg.js /* global Events */ @@ -38,7 +38,7 @@ preinit.then(({frames, styles, url}) => { msg.onExtension(onRuntimeMessage); prefs.subscribe('popup.stylesFirst', (key, stylesFirst) => { - $root.classList.toggle('styles-last', !stylesFirst); + $.rootCL.toggle('styles-last', !stylesFirst); }, {runNow: true}); if (CHROME_POPUP_BORDER_BUG) { prefs.subscribe('popup.borders', toggleSideBorders, {runNow: true}); @@ -70,7 +70,7 @@ function setPopupWidth(_key, width) { function toggleSideBorders(_key, state) { // runs before is parsed - const style = $root.style; + const style = $.root.style; if (state) { style.cssText += 'border-left: 2px solid white !important;' +