New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 767849 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Sep 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Line breaks in CSS selectors are shown only on editing

Reported by stasvare...@gmail.com, Sep 22 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Steps to reproduce the problem:
1. Find an element with a long selector, for example ".profilePage .contentSection .leftColumn .infoItem .value"
2. Enter the edit selector mode and try to copy it
3. The result would be like this:

".profilePage .contentSection .leftColumn .infoItem
.value"

Notice that there is a line break before ".value".

What is the expected behavior?
There should be no line breaks and the valid output would be:

".profilePage .contentSection .leftColumn .infoItem .value"

What went wrong?
DevTools adds an unnecessary line break for long selectors, which is super inconvenient if you do a strict search using selectors.

Attached screenshots of how it looks like when you enter the edit mode. Notice that ".value" has received a line break.

Did this work before? Yes 

Chrome version: 61.0.3163.100  Channel: stable
OS Version: 10.0
Flash Version: 

It worked fine about 10 versions before, can't remember exactly when it happened.
 
before.PNG
7.8 KB View Download
after.PNG
9.7 KB View Download

Comment 1 Deleted

Comment 2 Deleted

Comment 3 by woxxom@gmail.com, Sep 22 2017

1. Open the attached test.html
2. Right-click the text, Inspect
3. Click ".a .b .c .d" in "Styles" panel
Expected: ".a .b .c .d" is preserved
Observed: "                           .a
                                      .b
                                      .c
                                      .d"

Bisect info: 381667 (good) - 381669 (bad)
https://chromium.googlesource.com/chromium/src/+log/73bd7ce8..3242e5d0?pretty=fuller
Suspecting r381668 "Don't collapse whitespace in contenteditable=plaintext-only"
Landed in 51.0.2682.0

The change was caused by a global fix for plain text contenteditable, but the new behavior doesn't make sense in devtools in-place selector edit box so obviously it's a bug.
test.html
512 bytes View Download
good.png
1.2 KB View Download
bad.png
1.4 KB View Download
Labels: Needs-Bisect Needs-Triage-M61
Cc: ranjitkan@chromium.org
Labels: -Pri-2 -Needs-Bisect M-63 hasbisect OS-Linux OS-Mac Pri-1
Owner: tkent@chromium.org
Status: Assigned (was: Unconfirmed)
Able to reproduce the issue on 61.0.3163.100 and is a regression broken in M51, below are the bisect details for the same.

Bisect Info:
============
51.0.2682.0 - Bad build
51.0.2681.0 - Good build

You are probably looking for a change made after 381667 (known good), but no later than 381668 (first known bad).
CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/73bd7ce8655bcaf07dc6abfe18f32ee7c10c78ba..73a59b847f8b048bf26d7806bafa403c8f3f95d6

Change: https://chromium.googlesource.com/chromium/src/+/73a59b847f8b048bf26d7806bafa403c8f3f95d6

@tkent: Assigning to you, kindly take a look into it. Please help us to find an owner if not with respect to your change.

Issue is observed on Windows (10), Mac 10.12.6 and Ubuntu 14.04.

Thanks.!

Comment 6 by tkent@chromium.org, Sep 25 2017

Labels: -Pri-1 -Arch-x86_64 -M-63 -Needs-Triage-M61 Pri-2
Summary: Line breaks in CSS selectors are shown only on editing (was: Long CSS selectors have line breaks when you copy them)

Comment 7 by tkent@chromium.org, Sep 26 2017

Status: Started (was: Assigned)
Finding a reviewer: https://chromium-review.googlesource.com/684098


Project Member

Comment 8 by bugdroid1@chromium.org, Sep 28 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d9256e381a967cfc1c9bfab5a84008adabb08396

commit d9256e381a967cfc1c9bfab5a84008adabb08396
Author: Kent Tamura <tkent@chromium.org>
Date: Thu Sep 28 01:03:44 2017

DevTools: Normalize whitespace in selector text on editing.

Bug:  767849 
Change-Id: Iaa02ed396dd0fde720bebcc276029326b20445a5
Reviewed-on: https://chromium-review.googlesource.com/684098
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#504848}
[modify] https://crrev.com/d9256e381a967cfc1c9bfab5a84008adabb08396/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

Comment 9 by tkent@chromium.org, Sep 28 2017

Labels: M-63
Status: Fixed (was: Started)
Labels: TE-Verified-M63 TE-Verified-63.0.3227.0
Rechecked this issue on Windows 10, Mac 10.12.6, Ubuntu 14.04 using chrome 63.0.3227.0. Fix is working as intended. Line break is not observed for Css selector.

Adding TE-verified labels.

Thanks.!

Sign in to add a comment