From 664dd9570064576b2cfeeb00dea6de1ae7b040fc Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Tue, 12 Mar 2024 11:25:50 -0400 Subject: [PATCH] Support maximizing editor to viewport size Related feedback: https://github.com/uBlockOrigin/uBlock-issues/issues/3161#issuecomment-1991066618 --- src/css/codemirror.css | 43 +++++++++++++++++++++----- src/css/common.css | 4 +-- src/js/asset-viewer.js | 1 + src/js/codemirror/search.js | 60 +++++++++++++++++++++++-------------- 4 files changed, 77 insertions(+), 31 deletions(-) diff --git a/src/css/codemirror.css b/src/css/codemirror.css index 2d15bf8d1..ac1b89f73 100644 --- a/src/css/codemirror.css +++ b/src/css/codemirror.css @@ -3,6 +3,13 @@ overflow: hidden; position: relative; } +.codeMirrorContainer.cm-maximized { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + } .CodeMirror { background-color: var(--surface-0); box-sizing: border-box; @@ -176,16 +183,42 @@ text-align: end; } +.cm-search-widget .cm-maximize { + fill: none; + flex-grow: 0; + font-size: 140%; + height: 1em; + stroke-width: 3px; + stroke: var(--ink-0); + width: 1em; + } +.cm-search-widget .cm-maximize * { + pointer-events: none; + } +.codeMirrorContainer[data-maximizable="false"] .cm-search-widget .cm-maximize { + display: none; + } +.codeMirrorContainer .cm-search-widget .cm-maximize svg > path:nth-child(2), +.codeMirrorContainer.cm-maximized .cm-search-widget .cm-maximize svg > path:nth-child(1) { + display: none; + } +.codeMirrorContainer.cm-maximized .cm-search-widget .cm-maximize svg > path:nth-child(2) { + display: initial; + } +html:not(.mobile) .cm-search-widget .cm-maximize:hover { + transform: scale(1.2); + } + .cm-search-widget-input { display: inline-flex; flex-grow: 1; + flex-wrap: nowrap; } .cm-search-widget .fa-icon { - fill: var(--cm-gutter-ink); font-size: 140%; } -.cm-search-widget .fa-icon:not(.fa-icon-ro):hover { - fill: var(--ink-1); +html:not(.mobile) .cm-search-widget .fa-icon:not(.fa-icon-ro):hover { + transform: scale(1.2); } .cm-search-widget-input input { border: 1px solid var(--cm-gutter-ink); @@ -198,7 +231,6 @@ display: inline-flex; flex-grow: 0; font-size: var(--font-size-smaller); - min-width: 6em; visibility: hidden; } .cm-search-widget[data-query] .cm-search-widget-count { @@ -207,9 +239,6 @@ .cm-search-widget[data-query] .cm-search-widget-count:empty { visibility: hidden; } -.cm-search-widget .cm-search-widget-button:hover { - color: #000; - } .cm-search-widget .sourceURL[href=""] { visibility: hidden; } diff --git a/src/css/common.css b/src/css/common.css index 39798752b..01606249a 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -52,11 +52,11 @@ body { margin: 0; padding: 0; } -a { +a:not(.fa-icon) { color: var(--link-ink); fill: var(--link-ink); } -a:hover { +a:not(.fa-icon):hover { color: var(--link-hover-ink); fill: var(--link-hover-ink); } diff --git a/src/js/asset-viewer.js b/src/js/asset-viewer.js index eabe13619..351531b62 100644 --- a/src/js/asset-viewer.js +++ b/src/js/asset-viewer.js @@ -60,6 +60,7 @@ import './codemirror/ubo-static-filtering.js'; lineWrapping: true, matchBrackets: true, maxScanLines: 1, + maximizable: false, readOnly: true, styleActiveLine: { nonEmpty: true, diff --git a/src/js/codemirror/search.js b/src/js/codemirror/search.js index 477e9ccd0..bde91b214 100644 --- a/src/js/codemirror/search.js +++ b/src/js/codemirror/search.js @@ -33,6 +33,15 @@ import { i18n$ } from '../i18n.js'; { const CodeMirror = self.CodeMirror; + CodeMirror.defineOption('maximizable', true, (cm, maximizable) => { + if ( typeof maximizable !== 'boolean' ) { return; } + const wrapper = cm.getWrapperElement(); + if ( wrapper === null ) { return; } + const container = wrapper.closest('.codeMirrorContainer'); + if ( container === null ) { return; } + container.dataset.maximizable = `${maximizable}`; + }); + const searchOverlay = function(query, caseInsensitive) { if ( typeof query === 'string' ) query = new RegExp( @@ -90,7 +99,8 @@ import { i18n$ } from '../i18n.js'; }; const searchWidgetClickHandler = function(cm, ev) { - const tcl = ev.target.classList; + const target = ev.target; + const tcl = target.classList; if ( tcl.contains('cm-search-widget-up') ) { findNext(cm, -1); } else if ( tcl.contains('cm-search-widget-down') ) { @@ -99,8 +109,13 @@ import { i18n$ } from '../i18n.js'; findNextError(cm, -1); } else if ( tcl.contains('cm-linter-widget-down') ) { findNextError(cm, 1); + } else if ( tcl.contains('cm-maximize') ) { + const container = target.closest('.codeMirrorContainer'); + if ( container !== null ) { + container.classList.toggle('cm-maximized'); + } } - if ( ev.target.localName !== 'input' ) { + if ( target.localName !== 'input' ) { ev.preventDefault(); } else { ev.stopImmediatePropagation(); @@ -458,26 +473,27 @@ import { i18n$ } from '../i18n.js'; }; { - const searchWidgetTemplate = - ''; + const searchWidgetTemplate = [ + '', + ].join('\n'); const domParser = new DOMParser(); const doc = domParser.parseFromString(searchWidgetTemplate, 'text/html'); const widgetTemplate = document.adoptNode(doc.body.firstElementChild);