html-gorhill-ublock-small-change

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before…lines 1–10 unchanged (10 lines)
11
12<body>
13<aside>
14    <div id="quit" data-i18n-title="zapperTipQuit">
15        <svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg>
16    </div>
17</aside>
18<svg id="sea"><path d></path><path d></path></svg>
19
20<script src="js/theme.js" type="module"></script>
21<script src="js/i18n.js" type="module"></script>
22<script src="/js/zapper-ui.js" type="module"></script>
23
24</body>
25</html>
26

After…lines 1–10 unchanged (10 lines)
11
12<body>
13<aside>
14    <div id="quit" data-i18n-title="zapperTipQuit">
15        <svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg>
16    </div>
17    <div id="pick">
18        <svg viewBox="0 0 64 64">
19            <path d="M10 32L54 32M32 10L32 54" />
20            <circle cx="32" cy="32" r="12" />
21        </svg>
22    </div>
23</aside>
24<svg id="sea"><path d></path><path d></path></svg>
25
26<script src="js/theme.js" type="module"></script>
27<script src="js/i18n.js" type="module"></script>
28<script src="js/zapper-ui.js" type="module"></script>
29
30</body>
31</html>
32

Before…lines 1–10 unchanged (10 lines)
11
12<body>
13<aside>
14    <div id="quit" data-i18n-title="zapperTipQuit">
15        <svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg>
16    </div>
17</aside>
18<svg id="sea"><path d></path><path d></path></svg>
19
20<script src="js/theme.js" type="module"></script>
21<script src="js/i18n.js" type="module"></script>
22<script src="/js/zapper-ui.js" type="module"></script>
23
24</body>
25</html>
26

After…lines 1–10 unchanged (10 lines)
11
12<body>
13<aside>
14    <div id="quit" data-i18n-title="zapperTipQuit">
15        <svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg>
16    </div>
17    <div id="pick">
18        <svg viewBox="0 0 64 64">
19            <path d="M10 32L54 32M32 10L32 54" />
20            <circle cx="32" cy="32" r="12" />
21        </svg>
22    </div>
23</aside>
24<svg id="sea"><path d></path><path d></path></svg>
25
26<script src="js/theme.js" type="module"></script>
27<script src="js/i18n.js" type="module"></script>
28<script src="js/zapper-ui.js" type="module"></script>
29
30</body>
31</html>
32

Before…lines 1–10 unchanged (10 lines)
11
12<body>
13<aside>
14    <div id="quit" data-i18n-title="zapperTipQuit">
15        <svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg>
16    </div>
17</aside>
18<svg id="sea"><path d></path><path d></path></svg>
19
20<script src="js/theme.js" type="module"></script>
21<script src="js/i18n.js" type="module"></script>
22<script src="/js/zapper-ui.js" type="module"></script>
23
24</body>
25</html>
26

After…lines 1–10 unchanged (10 lines)
11
12<body>
13<aside>
14    <div id="quit" data-i18n-title="zapperTipQuit">
15        <svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg>
16    </div>
17    <div id="pick">
18        <svg viewBox="0 0 64 64">
19            <path d="M10 32L54 32M32 10L32 54" />
20            <circle cx="32" cy="32" r="12" />
21        </svg>
22    </div>
23</aside>
24<svg id="sea"><path d></path><path d></path></svg>
25
26<script src="js/theme.js" type="module"></script>
27<script src="js/i18n.js" type="module"></script>
28<script src="js/zapper-ui.js" type="module"></script>
29
30</body>
31</html>
32

Before

document

doctype

<! "<!"

doctype "DOCTYPE"

> ">"

element

start_tag

< "<"

tag_name "html"

attribute

attribute_name "id"

= "="

quoted_attribute_value

" "\""

attribute_value "ubol-zapper"

" "\""

> ">"

element (+88 nodes collapsed)

element

start_tag

< "<"

tag_name "body"

> ">"

element

start_tag

< "<"

tag_name "aside"

> ">"

element (+51 nodes collapsed)

end_tag

</ "</"

tag_name "aside"

> ">"

element (+38 nodes collapsed)

script_element (+24 nodes collapsed)

script_element

start_tag

< "<"

tag_name "script"

attribute

attribute_name "src"

= "="

quoted_attribute_value

" "\""

attribute_value "/js/zapper-ui.js"

" "\""

attribute

attribute_name "type"

= "="

quoted_attribute_value

" "\""

attribute_value "module"

" "\""

> ">"

raw_text ""

end_tag

</ "</"

tag_name "script"

> ">"

end_tag

</ "</"

tag_name "body"

> ">"

end_tag

</ "</"

tag_name "html"

> ">"

After

document

doctype

<! "<!"

doctype "DOCTYPE"

> ">"

element

start_tag

< "<"

tag_name "html"

attribute

attribute_name "id"

= "="

quoted_attribute_value

" "\""

attribute_value "ubol-zapper"

" "\""

> ">"

element (+88 nodes collapsed)

element

start_tag

< "<"

tag_name "body"

> ">"

element

start_tag

< "<"

tag_name "aside"

> ">"

element (+51 nodes collapsed)

element

start_tag

< "<"

tag_name "div"

attribute

attribute_name "id"

= "="

quoted_attribute_value

" "\""

attribute_value "pick"

" "\""

> ">"

element

start_tag

< "<"

tag_name "svg"

attribute

attribute_name "viewBox"

= "="

quoted_attribute_value

" "\""

attribute_value "0 0 64 64"

" "\""

> ">"

element

self_closing_tag

< "<"

tag_name "path"

attribute

attribute_name "d"

= "="

quoted_attribute_value

" "\""

attribute_value "M10 32L54 32M32 10L32 54"

" "\""

/> "/>"

element

self_closing_tag

< "<"

tag_name "circle"

attribute

attribute_name "cx"

= "="

quoted_attribute_value

" "\""

attribute_value "32"

" "\""

attribute

attribute_name "cy"

= "="

quoted_attribute_value

" "\""

attribute_value "32"

" "\""

attribute

attribute_name "r"

= "="

quoted_attribute_value

" "\""

attribute_value "12"

" "\""

/> "/>"

end_tag

</ "</"

tag_name "svg"

> ">"

end_tag

</ "</"

tag_name "div"

> ">"

end_tag

</ "</"

tag_name "aside"

> ">"

element (+38 nodes collapsed)

script_element (+24 nodes collapsed)

script_element

start_tag

< "<"

tag_name "script"

attribute

attribute_name "src"

= "="

quoted_attribute_value

" "\""

attribute_value "js/zapper-ui.js"

" "\""

attribute

attribute_name "type"

= "="

quoted_attribute_value

" "\""

attribute_value "module"

" "\""

> ">"

raw_text ""

end_tag

</ "</"

tag_name "script"

> ">"

end_tag

</ "</"

tag_name "body"

> ">"

end_tag

</ "</"

tag_name "html"

> ">"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help