Web Inspector: Existing text after completions do not have their completion style removed once hint is applied

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

* STEPS TO REPRODUCE:
1. Open the Console tab and paste the following into the prompt:

document.body.style.margin = "10px";

2. Highlight "margin" and delete it
3. Press Escape to open the autocomplete, find margin, and press enter/click on it

Expected:
The styling of " = "10px"" would at first be slightly opaque (when the completion hint is shown) but revert to the original styling once the completion is applied.

Actual:
After the completion is applied the opacity remains the same.

[Devin Rousso]

Created attachment 258025 [details]
Patch

[Nikita Vasilyev]

Created attachment 258083 [details]
[Image] “= "10px"” should not be opaque

(In reply to comment #0)
> * STEPS TO REPRODUCE:
> 1. Open the Console tab and paste the following into the prompt:
> 
> document.body.style.margin = "10px";
> 
> 2. Highlight "margin" and delete it
> 3. Press Escape to open the autocomplete, find margin, and press enter/click
> on it
> 
> Expected:
> The styling of " = "10px"" would at first be slightly opaque (when the
> completion hint is shown) but revert to the original styling once the
> completion is applied.
> 

“= "10px"” should not be opaque at all since it isn't a part of the autocomplete hint. This a recent regression, possibly from "Web Inspector: Autocomplete: Undo (Cmd+Z) doesn't work as expected" https://bugs.webkit.org/show_bug.cgi?id=147316?

[Devin Rousso]

Created attachment 258158 [details]
Patch

[Nikita Vasilyev]

Looks good to me!

[Nikita Vasilyev]

Comment on attachment 258158 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.css:27
> +    text-decoration: none !important;

Why is this needed?

[Devin Rousso]

(In reply to comment #5)
> > Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.css:27
> > +    text-decoration: none !important;
> 
> Why is this needed?

In the styles sidebar, any text in a nested span that doesn't have a CSS property/value/atom/keyword classname is given a strikethrough.

In CSSStyleDeclarationTextEditor.css:
.css-style-text-editor > .CodeMirror .CodeMirror-lines pre > span span:not(.css-style-declaration-property, .CodeMirror-widget, .cm-comment, .cm-tab)

[WebKit Commit Bot]

Comment on attachment 258158 [details]
Patch

Clearing flags on attachment: 258158

Committed r187902: <http://trac.webkit.org/changeset/187902>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.