Skip to content

Commit

Permalink
Add source code viewer (from logger)
Browse files Browse the repository at this point in the history
This commits add the ability to open html/css/script
resources from the logger, as a formatted and syntax-
highligthed document.

The goal is to make it easier for filter list authors to
investigate filter-related issues.
  • Loading branch information
gorhill committed Mar 1, 2023
1 parent db11848 commit 33c437f
Show file tree
Hide file tree
Showing 17 changed files with 2,588 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/1p-filters.html
Expand Up @@ -33,7 +33,7 @@
<button id="exportUserFiltersToFile" class="iconified" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="1pExport">_</span><span class="hover"></span></button>
</p>
</div>
<div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll" spellcheck="false"></div>
<div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll codeMirrorFilters" spellcheck="false"></div>
<div class="hidden">
<input id="importFilePicker" type="file" accept="text/plain">
</div>
Expand Down
1 change: 1 addition & 0 deletions src/about.html
Expand Up @@ -38,6 +38,7 @@
<div class="li"><span><a href="https://github.com/hsluv/hsluv" target="_blank">HSLuv - Human-friendly HSL</a> by <a href="https://github.com/boronine">Alexei Boronine</a></span></div>
<div class="li"><span><a href="https://searchfox.org/mozilla-central/rev/d317e93d9a59c9e4c06ada85fbff9f6a1ceaaad1/browser/extensions/webcompat/shims/google-ima.js" target="_blank">google-ima.js</a> by <a href="https://www.mozilla.org/">Mozilla</a></span></div>
<div class="li"><span><a href="https://github.com/csstree/csstree" target="_blank">CSSTree</a> by <a href="https://github.com/lahmatiy">Roman Dvornov</a></span></div>
<div class="li"><span><a href="https://github.com/beautify-web/js-beautify" target="_blank">js-beautify</a> by <a href="https://github.com/einars">Einar Lielmanis</a>, <a href="https://github.com/bitwiseman">Liam Newman</a>, et al.</span></div>
</div>
<div class="li"><span data-i18n="aboutCDNs"></span></div>
<div class="liul">
Expand Down
6 changes: 3 additions & 3 deletions src/asset-viewer.html
Expand Up @@ -7,7 +7,7 @@
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
<link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.css">
<link rel="stylesheet" type="text/css" href="css/themes/default.css">
<link rel="stylesheet" href="css/themes/default.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css">
<link rel="stylesheet" href="css/codemirror.css">
Expand All @@ -17,13 +17,13 @@
<body class="loading">

<section id="subscribe" class="hide notice">
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg"></span>
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg" alt="logo"></span>
<span id="subscribePrompt"><span></span><a></a></span>
<span class="fa-icon">spinner</span>
<button id="subscribeButton" type="button" data-i18n="subscribeButton">_<span class="hover"></span></button>
</section>

<div id="content" class="codeMirrorContainer codeMirrorBreakAll"></div>
<div id="content" class="codeMirrorContainer codeMirrorBreakAll codeMirrorFilters"></div>

<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/display/panel.js"></script>
Expand Down
42 changes: 42 additions & 0 deletions src/code-viewer.html
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Code viewer</title>
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="lib/codemirror/theme/night.css">
<link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.css">
<link rel="stylesheet" href="css/themes/default.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css">
<link rel="stylesheet" href="css/codemirror.css">
<link rel="stylesheet" href="css/code-viewer.css">
</head>
<body class="loading">

<div id="content" class="codeMirrorContainer codeMirrorBreakAll"></div>

<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/display/panel.js"></script>
<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/codemirror/mode/javascript/javascript.js"></script>
<script src="lib/codemirror/mode/css/css.js"></script>
<script src="lib/codemirror/mode/xml/xml.js"></script>
<script src="lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<script src="js/codemirror/search.js"></script>
<script src="js/codemirror/search-thread.js"></script>
<script src="lib/js-beautify/beautify.min.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>
<script src="js/theme.js" type="module"></script>
<script src="js/i18n.js" type="module"></script>
<script src="js/dashboard-common.js" type="module"></script>
<script src="js/code-viewer.js" type="module"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions src/css/code-viewer.css
@@ -0,0 +1,13 @@
body {
border: 0;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
overflow: hidden;
padding: 0;
width: 100vw;
}
#content {
flex-grow: 1;
}
36 changes: 19 additions & 17 deletions src/css/codemirror.css
Expand Up @@ -68,65 +68,67 @@
word-break: break-all;
}

.cm-s-default .cm-comment {
.codeMirrorFilters .cm-s-default .cm-comment {
color: var(--sf-comment-ink);
}
.cm-s-default .cm-def {
.codeMirrorFilters .cm-s-default .cm-def {
color: var(--sf-def-ink);
}
.cm-s-default .cm-directive {
.codeMirrorFilters .cm-s-default .cm-directive {
color: var(--sf-directive-ink);
font-weight: bold;
}
.cm-s-default .cm-error {
.codeMirrorFilters .cm-s-default .cm-error {
color: inherit;
}
.cm-s-default .cm-error,
.codeMirrorFilters .cm-s-default .cm-error,
.CodeMirror-linebackground.error {
background-color: var(--sf-error-surface);
text-decoration: underline var(--sf-error-ink);
text-underline-position: under;
}
.cm-s-default .cm-link {
.codeMirrorFilters .cm-s-default .cm-link {
text-decoration: none;
}
.cm-s-default .cm-link:hover {
.codeMirrorFilters .cm-s-default .cm-link:hover {
color: var(--link-ink);
}
.cm-s-default .cm-keyword {
.codeMirrorFilters .cm-s-default .cm-keyword {
color: var(--sf-keyword-ink);
}
.cm-s-default .cm-negative {
.codeMirrorFilters .cm-s-default .cm-negative {
color: var(--cm-negative);
}
.cm-s-default .cm-positive {
.codeMirrorFilters .cm-s-default .cm-positive {
color: var(--cm-positive);
}
.cm-s-default .cm-notice {
.codeMirrorFilters .cm-s-default .cm-notice {
text-underline-position: under;
text-decoration-color: var(--sf-notice-ink);
text-decoration-style: solid;
text-decoration-line: underline;
}
.cm-s-default .cm-unicode {
.codeMirrorFilters .cm-s-default .cm-unicode {
text-underline-position: under;
text-decoration-color: var(--sf-unicode-ink);
text-decoration-style: dashed;
text-decoration-line: underline;
}
.cm-s-default .cm-tag {
.codeMirrorFilters .cm-s-default .cm-tag {
color: var(--sf-tag-ink);
}
.cm-s-default .cm-value { color: var(--sf-value-ink); }
.cm-s-default .cm-variable {
.codeMirrorFilters .cm-s-default .cm-value {
color: var(--sf-value-ink);
}
.codeMirrorFilters .cm-s-default .cm-variable {
color: var(--sf-variable-ink);
}
.cm-s-default .cm-warning {
.codeMirrorFilters .cm-s-default .cm-warning {
background-color: var(--sf-warning-surface);
text-decoration: underline var(--sf-warning-ink);
text-underline-position: under;
}
.cm-s-default .cm-readonly {
.codeMirrorFilters .cm-s-default .cm-readonly {
color: var(--sf-readonly-ink);
}

Expand Down
75 changes: 75 additions & 0 deletions src/js/code-viewer.js
@@ -0,0 +1,75 @@
/*******************************************************************************
uBlock Origin - a browser extension to block requests.
Copyright (C) 2023-present Raymond Hill
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see {http://www.gnu.org/licenses/}.
Home: https://github.com/gorhill/uBlock
*/

/* globals CodeMirror, uBlockDashboard, beautifier */

'use strict';

/******************************************************************************/

import { dom, qs$ } from './dom.js';

/******************************************************************************/

(async ( ) => {
const params = new URLSearchParams(document.location.search);
const url = params.get('url');
const a = qs$('.cm-search-widget .sourceURL');
dom.attr(a, 'href', url);
dom.attr(a, 'title', url);
const response = await fetch(url);
const text = await response.text();
const formatOptions = { indent_size: 2 };
let value = '', mode = '';
switch ( params.get('type') ) {
case 'css':
mode = 'text/css';
value = beautifier.css(text, formatOptions);
break;
case 'html':
mode = 'text/html';
value = beautifier.html(text, formatOptions);
break;
case 'js':
mode = 'text/javascript';
value = beautifier.js(text, formatOptions);
break;
default:
break;
}
const cmEditor = new CodeMirror(qs$('#content'), {
autofocus: true,
gutters: [ 'CodeMirror-linenumbers' ],
lineNumbers: true,
lineWrapping: true,
mode,
readOnly: true,
styleActiveLine: {
nonEmpty: true,
},
value,
});
uBlockDashboard.patchCodeMirrorEditor(cmEditor);
if ( dom.cl.has(dom.html, 'dark') ) {
dom.cl.add('#content .cm-s-default', 'cm-s-night');
dom.cl.remove('#content .cm-s-default', 'cm-s-default');
}
})();
21 changes: 18 additions & 3 deletions src/js/logger-ui.js
Expand Up @@ -253,7 +253,7 @@ const regexFromURLFilteringResult = function(result) {

// Emphasize hostname in URL, as this is what matters in uMatrix's rules.

const nodeFromURL = function(parent, url, re) {
const nodeFromURL = function(parent, url, re, type) {
const fragment = document.createDocumentFragment();
if ( re === undefined ) {
fragment.textContent = url;
Expand Down Expand Up @@ -282,7 +282,22 @@ const nodeFromURL = function(parent, url, re) {
}
if ( /^https?:\/\//.test(url) ) {
const a = document.createElement('a');
dom.attr(a, 'href', url);
let href = url;
switch ( type ) {
case 'css':
href = `code-viewer.html?url=${encodeURIComponent(url)}&type=css`;
break;
case 'doc':
case 'frame':
href = `code-viewer.html?url=${encodeURIComponent(url)}&type=html`;
break
case 'script':
href = `code-viewer.html?url=${encodeURIComponent(url)}&type=js`;
break;
default:
break;
}
dom.attr(a, 'href', href);
dom.attr(a, 'target', '_blank');
fragment.appendChild(a);
}
Expand Down Expand Up @@ -862,7 +877,7 @@ const viewPort = (( ) => {
} else if ( filteringType === 'dynamicUrl' ) {
re = regexFromURLFilteringResult(filter.rule.join(' '));
}
nodeFromURL(div.children[COLUMN_URL], cells[COLUMN_URL], re);
nodeFromURL(div.children[COLUMN_URL], cells[COLUMN_URL], re, cells[COLUMN_TYPE]);

// Alias URL (CNAME, etc.)
if ( cells.length > 8 ) {
Expand Down

5 comments on commit 33c437f

@uBlock-user
Copy link
Contributor

@uBlock-user uBlock-user commented on 33c437f Mar 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capture

Name of the js is beautifier.min.js, while the script path mentions - beautify.min.js as a result of the name mis-match, script fails to load.

@gorhill
Copy link
Owner Author

@gorhill gorhill commented on 33c437f Mar 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duh... I changed the name right before committing during code review, then forgot to other side.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just keep it beautifier.min.js ?

@gorhill
Copy link
Owner Author

@gorhill gorhill commented on 33c437f Mar 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's what it's supposed to be, it was originally named beautify.min.js and I ended up using the other library because it supports html/css as well.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh. I thought it was the other way round.

Please sign in to comment.