Web Inspector: Inactive window may cause many layers to be created due to Dashboard opacity

• Component: Web Inspector
• Status: RESOLVED FIXED

[Joseph Pecoraro]

* SUMMARY
Inactive window may cause many layers to be created due to Dashboard opacity.

See attached screenshots.

* STEPS TO REPRODUCE
1. Inspect a page
2. Pause
3. Make the window inactive
  => lots of layers

[Radar WebKit Bug Importer]

<rdar://problem/22742333>

[Joseph Pecoraro]

Created attachment 261401 [details]
[IMAGE] Window Active

[Joseph Pecoraro]

Created attachment 261402 [details]
[IMAGE] Window Inactive (Issue)

[Joseph Pecoraro]

The issue appears to be because of the opacity:

    body.latest-mac.window-inactive .toolbar .dashboard-container {
        opacity: 0.65;
        ...
    }

Which contains an animating element. This then uses a cascade of overlapping elements.

A possible workaround might be:

    body.latest-mac.window-inactive .toolbar .dashboard-container > *
        opacity: 0.65;
    }

[Joseph Pecoraro]

> A possible workaround might be:

Naw that isn't good, it causes a few other issues and making it work starts being ugly.

An easy solution, stop the animation when the window is inactive!

[Joseph Pecoraro]

Created attachment 261405 [details]
[PATCH] Proposed Fix

[Joseph Pecoraro]

Created attachment 261406 [details]
[IMAGE] With Fix

[BJ Burg]

Comment on attachment 261405 [details]
[PATCH] Proposed Fix

r=me

[WebKit Commit Bot]

Comment on attachment 261405 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 261405

Committed r189923: <http://trac.webkit.org/changeset/189923>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.