Bug 145331 - Web Inspector: DOMTree Keyboard Shortcut 'H' to toggle element visibility is not working
Summary: Web Inspector: DOMTree Keyboard Shortcut 'H' to toggle element visibility is ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Joseph Pecoraro
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-05-22 17:28 PDT by Joseph Pecoraro
Modified: 2015-08-04 11:28 PDT (History)
10 users (show)

See Also:


Attachments
[PATCH] Proposed Fix (4.19 KB, patch)
2015-05-22 17:33 PDT, Joseph Pecoraro
joepeck: review-
Details | Formatted Diff | Diff
[PATCH] Proposed Fix (4.13 KB, patch)
2015-05-22 17:58 PDT, Joseph Pecoraro
burg: review+
burg: commit-queue-
Details | Formatted Diff | Diff
[PATCH] For Landing (4.28 KB, patch)
2015-05-22 18:24 PDT, Joseph Pecoraro
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2015-05-22 17:28:21 PDT
* SUMMARY
DOMTree Keyboard Shortcut 'H' to toggle element visibility is not working.

This regressed with r179286 which removed CSSProperty.value setters and related protocol methods.

* TEST
<div style="width: 100px; height: 100px; background: blue"></div>
<div style="width: 100px; height: 100px; background: green"></div>

* STEPS TO REPRODUCE
1. Inspect the top div on the test page
2. Input 'H' keyboard shortcut
  => expected element to hide, it did not

* NOTES
- Uncaught exception. CSSProperty.value setter doesn't exist.
- Chrome/Blink does this in a clever way. Instead of toggling CSS properties, it adds a <style> to the page with a CSS class, and then toggles the class on the element. We can do the same.
Comment 1 Radar WebKit Bug Importer 2015-05-22 17:29:05 PDT
<rdar://problem/21085680>
Comment 2 Joseph Pecoraro 2015-05-22 17:33:25 PDT
Created attachment 253620 [details]
[PATCH] Proposed Fix
Comment 3 Joseph Pecoraro 2015-05-22 17:54:24 PDT
Comment on attachment 253620 [details]
[PATCH] Proposed Fix

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

> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js:571
> +                    styleElement.textContent = ".__WebInspectorHideElement__, .__WebInspectorHideElement__::before, .__WebInspectorHideElement__::after { visibility: hidden !important; }";

I have a feeling the before/after parts may not be necessary...
Comment 4 Joseph Pecoraro 2015-05-22 17:56:18 PDT
Comment on attachment 253620 [details]
[PATCH] Proposed Fix

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

>> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js:571
>> +                    styleElement.textContent = ".__WebInspectorHideElement__, .__WebInspectorHideElement__::before, .__WebInspectorHideElement__::after { visibility: hidden !important; }";
> 
> I have a feeling the before/after parts may not be necessary...

Oops it is not. Sorry, I was getting ahead of myself. New patch up soon.
Comment 5 Joseph Pecoraro 2015-05-22 17:58:30 PDT
Created attachment 253621 [details]
[PATCH] Proposed Fix
Comment 6 Brian Burg 2015-05-22 18:03:55 PDT
Comment on attachment 253621 [details]
[PATCH] Proposed Fix

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

r=me

> Source/WebInspectorUI/ChangeLog:11
> +          1. inject a <style> on the page like ".WebInspectorHide { visiblity:hidden }"

'visibility'

> Source/WebInspectorUI/ChangeLog:17
> +        * UserInterface/Views/DOMTreeOutline.js:

Might want to note that the old approach uses different CSS properties to achieve the same thing.
Comment 7 Joseph Pecoraro 2015-05-22 18:24:12 PDT
Created attachment 253622 [details]
[PATCH] For Landing
Comment 8 WebKit Commit Bot 2015-05-22 19:13:02 PDT
Comment on attachment 253622 [details]
[PATCH] For Landing

Clearing flags on attachment: 253622

Committed r184815: <http://trac.webkit.org/changeset/184815>