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

Issue 851262 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Last visit 28 days ago
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Devtools Styles tab bug: CSS declaration value goes on two lines

Reported by liran...@gmail.com, Jun 9 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36

Steps to reproduce the problem:
1. Go to Elements -> Styles
2. In an existing or new CSS rule, add a new declaration property, e.g. `background-color`, and press tab to go to the declaration value field
3. You will notice that the value has two lines, and the keyboard cursor is placed on the second line

What is the expected behavior?
The CSS declaration value field should have just one line

What went wrong?
The CSS declaration value field has two lines

Did this work before? Yes This is a regression, but not a new one. It started happening around a year ago (2017).

Chrome version: 67.0.3396.79  Channel: stable
OS Version: OS X 10.13.4
Flash Version:
 
Screen Shot 2018-06-09 at 18.34.36.png
31.0 KB View Download
Labels: Needs-Bisect Needs-Triage-M67
Cc: phanindra.mandapaka@chromium.org
Labels: Triaged-ET Needs-Feedback
Tested this on reported chrome version on 67.0.3396.79 using Mac 10.13.3 as we don't have Mac 10.13.4. Attaching Screecast for reference.

Steps 
--------
1. Launched chrome
2. Opened Dev tools and navigated to Elements -> Styles
3. Clicked on body colors and styles and also used Tab 
Observed that CSS declaration value field is displayed in one line

@Reporter: As we are unable to reproduce the issue from our end. Could you please review the attached screen-cast and confirm if anything being missed here.

Thanks! 
851262.mp4
3.0 MB View Download

Comment 3 by kozy@chromium.org, Jun 11 2018

Owner: lushnikov@chromium.org
Status: Assigned (was: Unconfirmed)

Comment 4 by liran...@gmail.com, Jun 11 2018

Hi Phanindra,

Thanks for your response.

No, sorry, this happens in the CSS declaration *value* field, not the declaration property field, as you did.

In any case, I have now discovered exactly when this happens: the steps to reproduce are as I've described above, but with two crucial differences in step 2:
  - You need to use the Dev Tools' auto-complete
  - You need to press Enter rather than Tab

Here are the updated steps to reproduce this bug:

1. Go to Elements -> Styles
2. In an existing or new CSS rule, start typing a new declaration property, e.g. `font-`, but don't write finish it. When the Dev Tools suggest a completion for the property, e.g. `font-size`, press *Enter* to go to the declaration value field
3. You will notice that the declaration value has two lines, and the keyboard cursor is placed on the second line

This should not happen. Pressing Enter when writing the declaration property should have the exact same effect as pressing Tab: it should go to the declaration value.

I've attached a screen-grab of the bug for convenience.

Kind regards,
Liran
chrome-css-value-two-lines-bug.mp4
1.3 MB View Download

Sign in to add a comment