<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body>
<p>
<div>
<b><a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: Large repaints when typing any character in console"
href="https://bugs.webkit.org/show_bug.cgi?id=145324#c3">Comment # 3</a>
on <a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: Large repaints when typing any character in console"
href="https://bugs.webkit.org/show_bug.cgi?id=145324">bug 145324</a>
from <span class="vcard"><a class="email" href="mailto:nvasilyev@apple.com" title="Nikita Vasilyev <nvasilyev@apple.com>"> <span class="fn">Nikita Vasilyev</span></a>
</span></b>
<pre>Two observations:
1. Chrome DevTools also flashes the whole window on every keystroke.
It doesn't use CodeMirror, it uses `-webkit-user-modify: read-write-plaintext-only` instead. It does use flexbox the same way Web Inspector does.
2. CodeMirror forces layout on every key stroke (that causes text to change):
// Read the actual heights of the rendered lines, and update their
// stored heights to match.
function updateHeightsInViewport(cm) {
var display = cm.display;
var prevBottom = display.lineDiv.offsetTop;
<a href="https://github.com/WebKit/webkit/blob/master/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js#L783">https://github.com/WebKit/webkit/blob/master/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js#L783</a>
If we don't wrap text, we would need to updateHeightsInViewport
only when a line break is inserted or removed, theoretically.
While this would mitigate the issue, it doesn't explain large repaints.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>