Created attachment 253613 [details] [IMAGE] Issue - large paint flash * SUMMARY Large repaints when typing any character in console. See attached screenshot. Particularly with the QuickConsole this is unexpected. * STEPS TO REPRODUCE 1. Inspect about:blank 2. Show Elements Tab 3. Focus quick console 4. Type in the quick console => each keystroke a large portion of the window gets a paint flash
<rdar://problem/21083856>
I wonder if this is a cause of slow typing in the console?
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; https://github.com/WebKit/webkit/blob/master/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js#L783 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.
I suspect the large repaints are due to a bug in WebKit's flexbox code. It has had similar issues in the past. Lets just give this to someone in WebKit to look at.
Created attachment 273272 [details] [Animated GIF] Reduction — small paint area I created a reduction, but it did NOT reproduce the bug: http://nv.github.io/webkit-inspector-bugs/flexbox-large-repaints/ As you can see on the attached GIF, the paint area is small.
Created attachment 273274 [details] [Patch] Position absolute As a proof of concept, I replaced flexbox with `position: absolute` and some JavaScript. It indeed solved the large repaints issue. However, I don't think we should do this. It adds a lot of unnecessary complexity. We should really find what's wrong with flexbox here.
Created attachment 273275 [details] [Animated GIF] Position absolute
A reduced testcase with flex box would really help.
(In reply to comment #8) > A reduced testcase with flex box would really help. I just made one: http://nv.github.io/webkit-inspector-bugs/flexbox-large-repaints/ Typing in the CodeMirror editor causes the whole <body> to repaint.
(In reply to comment #9) > (In reply to comment #8) > > A reduced testcase with flex box would really help. > > I just made one: > http://nv.github.io/webkit-inspector-bugs/flexbox-large-repaints/ > Typing in the CodeMirror editor causes the whole <body> to repaint. Great! Thanks, I'll look into it.
Could you reduce it further so that it does not require a ~9K JS code (codemirror.js)?
(In reply to comment #11) > Could you reduce it further so that it does not require a ~9K JS code > (codemirror.js)? Sure. I replaced CodeMirror with <div style="-webkit-user-modify:read-write-plaintext-only">. http://nv.github.io/webkit-inspector-bugs/flexbox-large-repaints/
Created attachment 274445 [details] Test reduction Unfortunately while flexing the inner flexbox, we also issue repaints for the intermediate positions/sizes. We should reconsider a different repaint invalidation logic for flexboxes (maybe delaying repaint calls until after flexing is done) I am not sure if there's an easy fix for this, though Hyatt might disagree.