Skip to content

Commit

Permalink
Support maximizing editor to viewport size
Browse files Browse the repository at this point in the history 
Related feedback:
uBlockOrigin/uBlock-issues#3161 (comment)
  • Loading branch information
@gorhill
gorhill committed Mar 12, 2024
1 parent 710d8c6 commit 664dd95
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 31 deletions.
43 changes: 36 additions & 7 deletions src/css/codemirror.css
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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 {
Expand All @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions src/css/common.css
View file
Expand Up @@ -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);
}
Expand Down
1 change: 1 addition & 0 deletions src/js/asset-viewer.js
View file
Expand Up @@ -60,6 +60,7 @@ import './codemirror/ubo-static-filtering.js';
lineWrapping: true,
matchBrackets: true,
maxScanLines: 1,
maximizable: false,
readOnly: true,
styleActiveLine: {
nonEmpty: true,
Expand Down
60 changes: 38 additions & 22 deletions src/js/codemirror/search.js
View file
Expand Up @@ -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(
Expand Down Expand Up @@ -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') ) {
Expand All @@ -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();
Expand Down Expand Up @@ -458,26 +473,27 @@ import { i18n$ } from '../i18n.js';
};

{
const searchWidgetTemplate =
'<div class="cm-search-widget-template" style="display:none;">' +
'<div class="cm-search-widget">' +
'<span class="cm-search-widget-input">' +
'<span class="fa-icon fa-icon-ro">search</span>&ensp;' +
'<input type="search" spellcheck="false">&emsp;' +
'<span class="cm-search-widget-up cm-search-widget-button fa-icon">angle-up</span>&nbsp;' +
'<span class="cm-search-widget-down cm-search-widget-button fa-icon fa-icon-vflipped">angle-up</span>&emsp;' +
'<span class="cm-search-widget-count"></span>' +
'</span>' +
'<span class="cm-linter-widget" data-lint="0">' +
'<span class="cm-linter-widget-count"></span>&emsp;' +
'<span class="cm-linter-widget-up cm-search-widget-button fa-icon">angle-up</span>&nbsp;' +
'<span class="cm-linter-widget-down cm-search-widget-button fa-icon fa-icon-vflipped">angle-up</span>&emsp;' +
'</span>' +
'<span>' +
'<a class="fa-icon sourceURL" href>external-link</a>' +
'</span>' +
'</div>' +
'</div>';
const searchWidgetTemplate = [
'<div class="cm-search-widget-template" style="display:none;">',
'<div class="cm-search-widget">',
'<span class="cm-maximize"><svg viewBox="0 0 40 40"><path d="M4,16V4h12M24,4H36V16M4,24V36H16M36,24V36H24" /><path d="M14 2.5v12h-12M38 14h-12v-12M14 38v-12h-12M26 38v-12h12" /></svg></span>&ensp;',
'<span class="cm-search-widget-input">',
'<input type="search" spellcheck="false" placeholder="&#x26B2;">&ensp;',
'<span class="cm-search-widget-up cm-search-widget-button fa-icon">angle-up</span>&nbsp;',
'<span class="cm-search-widget-down cm-search-widget-button fa-icon fa-icon-vflipped">angle-up</span>&ensp;',
'<span class="cm-search-widget-count"></span>',
'</span>',
'<span class="cm-linter-widget" data-lint="0">',
'<span class="cm-linter-widget-count"></span>&ensp;',
'<span class="cm-linter-widget-up cm-search-widget-button fa-icon">angle-up</span>&nbsp;',
'<span class="cm-linter-widget-down cm-search-widget-button fa-icon fa-icon-vflipped">angle-up</span>&ensp;',
'</span>',
'<span>',
'<a class="fa-icon sourceURL" href>external-link</a>',
'</span>',
'</div>',
'</div>',
].join('\n');
const domParser = new DOMParser();
const doc = domParser.parseFromString(searchWidgetTemplate, 'text/html');
const widgetTemplate = document.adoptNode(doc.body.firstElementChild);
Expand Down

0 comments on commit 664dd95

Please sign in to comment.