Bug 155387 - Web Inspector: Large repaints when typing any character in console
Summary: Web Inspector: Large repaints when typing any character in console
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on: 155467
Blocks: 152220
  Show dependency tree / graph
 
Reported: 2016-03-11 23:04 PST by Nikita Vasilyev
Modified: 2016-06-30 13:24 PDT (History)
8 users (show)

See Also:

Attachments
[Animated GIF] With translateZ hack (664.88 KB, image/gif)
2016-03-11 23:15 PST, Nikita Vasilyev 		no flags Details
Patch (1.16 KB, patch)
2016-03-11 23:23 PST, Nikita Vasilyev 		timothy: review+
Details | Formatted Diff | Diff
Patch (1.19 KB, patch)
2016-03-13 22:19 PDT, Nikita Vasilyev 		no flags Details | Formatted Diff | Diff
Patch (1.17 KB, patch)
2016-03-17 00:45 PDT, Nikita Vasilyev 		no flags Details | Formatted Diff | Diff
Show Obsolete (2) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2016-03-11 23:04:11 PST 
To keep Bug 145324 "Large repaints when flexbox layout is used" specific to Layout and Rendering,
I'm creating this bug for Web Inspector.

---

* SUMMARY
Large repaints when typing any character in console.

See attached screenshot (https://bugs.webkit.org/attachment.cgi?id=253613).
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
Comment 1 Radar WebKit Bug Importer 2016-03-11 23:04:33 PST 
<rdar://problem/25125720>
Comment 2 Nikita Vasilyev 2016-03-11 23:15:10 PST 
Created attachment 273813 [details]
[Animated GIF] With translateZ hack

Adding

    #content {
        transform: translateZ(0px);
    }

somehow solves the problem.

Adding that to #quick-console or .console-prompt doesn't
affect repaint areas, which was surprising to me.

I don't understand why the toolbar is being repainted
but it's fixed in Bug 155386.
Comment 3 Nikita Vasilyev 2016-03-11 23:23:44 PST 
Created attachment 273815 [details]
Patch
Comment 4 Timothy Hatcher 2016-03-12 09:30:44 PST 
Comment on attachment 273815 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=273815&action=review

> Source/WebInspectorUI/UserInterface/Views/Main.css:145
> +    transform: translateZ(0); /* Promote #content into a layer to reduce repaint areas. */

Should add a URL to the WebKit bug.
Comment 5 Nikita Vasilyev 2016-03-13 22:19:45 PDT 
Created attachment 273926 [details]
Patch
Comment 6 WebKit Commit Bot 2016-03-13 23:20:16 PDT 
Comment on attachment 273926 [details]
Patch

Clearing flags on attachment: 273926

Committed r198095: <http://trac.webkit.org/changeset/198095>
Comment 7 WebKit Commit Bot 2016-03-13 23:20:21 PDT 
All reviewed patches have been landed.  Closing bug.
Comment 8 WebKit Commit Bot 2016-03-14 14:40:23 PDT 
Re-opened since this is blocked by bug 155467
Comment 9 Joseph Pecoraro 2016-03-14 14:45:11 PDT 
(In reply to comment #8)
> Re-opened since this is blocked by bug 155467

Rolled out in <http://trac.webkit.org/changeset/198158> as it made text look poor.
Comment 10 Nikita Vasilyev 2016-03-17 00:45:03 PDT 
Created attachment 274268 [details]
Patch

#content {z-index: 1} reduces the repaint area without introducing
a new layer (it doesn't show up in the Layers sidebar).
Comment 11 WebKit Commit Bot 2016-03-17 12:07:24 PDT 
Comment on attachment 274268 [details]
Patch

Clearing flags on attachment: 274268

Committed r198346: <http://trac.webkit.org/changeset/198346>
Comment 12 WebKit Commit Bot 2016-03-17 12:07:29 PDT 
All reviewed patches have been landed.  Closing bug.