New issue
Advanced search Search tips

Issue 770633 link

Starred by 6 users

Issue metadata

Status: Fixed
Owner:
Closed: Oct 3
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug



Sign in to add a comment

DevTools: console input height is cut off on high device scale factors

Reported by ttzwgu@gmail.com, Oct 2 2017

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Steps to reproduce the problem:
1. Open Chromium, press F12
2. Switch theme to »dark« in Settings (F11)
3. Go to console tab and enter »console.log("TEST");«

What is the expected behavior?
The text should be fully shown.

What went wrong?
The text gets clipped and the bottom of the line is not visible.

Did this work before? N/A 

Chrome version: 61.0.3163.100  Channel: stable
OS Version: Debian sid
Flash Version: 

I'm having a high resolution display with 3840x2160 and starting chromium with --force-device-scale-factor=3
 
bad-dark-theme.png
137 KB View Download
good-light-theme.png
111 KB View Download
Owner: l...@chromium.org
Status: Assigned (was: Unconfirmed)

Comment 2 by l...@chromium.org, Oct 2 2017

Cc: einbinder@chromium.org
Labels: Hotlist-Polish
Summary: DevTools: console input height is cut off on high device scale factors (was: Line-height of console input to small)
Thanks for the report, I'm able to reproduce.  My guess is that the root issue is the same as the one in  https://crbug.com/671722 

When DevTools is run with extreme zoom levels/scale factors, our Console prompt will become cutoff.  CodeMirror tries to account for the height of the scrollbar when calculating the size of the prompt.  In Dark Theme, it looks like we use a different scrollbar style that doesn't scale along with the zoom/scale factor, resulting in a miscalculated console prompt size.

Comment 3 by l...@chromium.org, Jan 31 2018

 Issue 805614  has been merged into this issue.
In my case it's more then half so it makes console completely unusable.
OS: Windows 10
Display settings -> Scale: 150%
Display settings -> Resolution: 1920 x 1080
Chrome: 64.0.3282.119
chrome-console-bug.png
29.2 KB View Download
Project Member

Comment 5 by bugdroid1@chromium.org, Jun 4 2018

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

commit 36d5b00c49c1adc54accc1e169951cabfda5ddb0
Author: Erik Luo <luoe@chromium.org>
Date: Mon Jun 04 22:33:16 2018

DevTools: fix dark theme Console prompt cutoff

CodeMirror's 'scroll clipping' process re-measures scrollbars upon zoom to
ensure that its artificial scrollbar is hidden. It assumes that the vertical
scrollbar width is equal to horizontal scrollbar height, which is false.

This CL updates dark theme's custom scrollbar height to be the same as its
width.

Screenshot: https://imgur.com/a/eMUQiIt

Bug:  770633 
Change-Id: Iddfcca8bc48ee414c0307d6d9e4035e2ed8771f9
Reviewed-on: https://chromium-review.googlesource.com/1083595
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#564273}
[modify] https://crrev.com/36d5b00c49c1adc54accc1e169951cabfda5ddb0/third_party/blink/renderer/devtools/front_end/ui/inspectorCommon.css

Comment 6 by l...@chromium.org, Jun 14 2018

Cc: l...@chromium.org
 Issue 849264  has been merged into this issue.
Status: Fixed (was: Assigned)
I'm no longer able to reproduce console prompt cutoffs on monitors on light or dark theme in 71.0.3564.0.

In the recent past, a fix landed in CodeMirror [1] and we rolled in changes in for DevTools frontend [2].
[1] https://github.com/codemirror/CodeMirror/issues/5445
[2] https://chromium-review.googlesource.com/c/chromium/src/+/1182680

These fixes should be part of M70 (currently Beta channel) or later.  If anyone still sees a cutoff prompt on M70+, please let us know with a comment with your resolution/flags.
ty

Sign in to add a comment