Bug 160986

Summary: REGRESSION (r201454): Web Inspector: Text caret isn't visible when editing an attribute
Product: WebKit Reporter: Nikita Vasilyev <nvasilyev>
Component: Web InspectorAssignee: Nikita Vasilyev <nvasilyev>
Status: RESOLVED FIXED    
Severity: Critical CC: bburg, commit-queue, hi, joepeck, mattbaker, nvasilyev, timothy, webkit-bug-importer
Priority: P1 Keywords: GoodFirstBug, InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
[Animated GIF] Bug
none
WIP
none
Patch
none
[Animated GIF] With patch applied
none
[Animated GIF] With patch applied, text caret is visible
none
Patch none

Description Nikita Vasilyev 2016-08-18 17:11:42 PDT
Steps:
1. Open http://webkit.org
2. In Web Inspector, open Elements tab
3. Double-click on "class=..."

Expected:
Text caret is visible.

Actual:
Text caret is NOT visible.
Comment 1 Radar WebKit Bug Importer 2016-08-18 17:11:58 PDT
<rdar://problem/27916207>
Comment 2 Nikita Vasilyev 2016-08-18 17:13:48 PDT
Created attachment 286420 [details]
[Animated GIF] Bug
Comment 3 Devin Rousso 2016-08-31 15:06:36 PDT
I think this was partially caused by <webkit.org/b/157468> (r279944).  The z-index change of the `.tree-outline.dom li .selection-area` element, as well as the background-color of `.editing`, seem to prevent the text caret from being visible (it is shown, but it is below the background of `.tree-outline.dom li .selection-area` AND `.editing`).  Might also be an HTML issue.
Comment 4 Nikita Vasilyev 2016-08-31 16:56:33 PDT
This was indeed broken by http://trac.webkit.org/changeset/201454.
Comment 5 Nikita Vasilyev 2016-08-31 17:08:11 PDT
Created attachment 287572 [details]
WIP
Comment 6 Nikita Vasilyev 2016-08-31 17:22:41 PDT
Created attachment 287574 [details]
Patch
Comment 7 Nikita Vasilyev 2016-08-31 17:27:12 PDT
Created attachment 287577 [details]
[Animated GIF] With patch applied

This patch has a side-effect. The nesting indicator now overlays the selected element. I personally don't mind that.
Comment 8 Devin Rousso 2016-08-31 17:33:42 PDT
Comment on attachment 287574 [details]
Patch

Somewhat unrelated, but I think that we should make the editing cursor a text-bar, not just a regular cursor.  You can change this in Editing.css:

.editing, .editing * {
    color: black !important;
    text-decoration: none !important;
    cursor: text !important;
}

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

> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:68
>      z-index: 20;

If you are removing `position: relative;` you should remove the z-index.  It is ignored if the position is static.
Comment 9 BJ Burg 2016-09-01 10:54:22 PDT
Comment on attachment 287577 [details]
[Animated GIF] With patch applied

The "after" gif doesn't show the text caret. Did you forget?
Comment 10 Nikita Vasilyev 2016-09-01 11:40:37 PDT
Created attachment 287644 [details]
[Animated GIF] With patch applied, text caret is visible
Comment 11 Nikita Vasilyev 2016-09-01 11:41:40 PDT
Created attachment 287645 [details]
Patch
Comment 12 BJ Burg 2016-09-01 12:13:35 PDT
Comment on attachment 287645 [details]
Patch

r=me
Comment 13 WebKit Commit Bot 2016-09-01 12:34:39 PDT
Comment on attachment 287645 [details]
Patch

Clearing flags on attachment: 287645

Committed r205307: <http://trac.webkit.org/changeset/205307>
Comment 14 WebKit Commit Bot 2016-09-01 12:34:43 PDT
All reviewed patches have been landed.  Closing bug.