New issue
Advanced search Search tips

Issue 319092 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Jan 2014
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

DevTools: Improve understanding of fontscalefactor & dpr

Project Member Reported by paulir...@chromium.org, Nov 14 2013

Issue description

In https://codereview.chromium.org/67743002/ we added two tooltips, but they got added to the input elements, and most users expect to find the tooltip on the label itself.

I propose two changes:
1) Move the title attributes added above to the <td> of the label for better discoverability
2) Move the font-scale factor input field underneath text autosizing checkbox and disable it when the box is unchecked.
 
pdr@, do you mind looking at this?

Comment 2 by pdr@chromium.org, Nov 14 2013

Owner: pdr@chromium.org
Status: Assigned
Sure, I can take this.

@paulirish, others:
I'm thinking of removing the field and replacing it with a checkbox that says something like "use android font metrics" (maybe next to text autosizing, disabled when text autosizing is disabled).

The font scale factor field is an android-only feature but we have to have for realistic rendering. It doesn't apply to non-android and 99% of developers won't touch it. Removing it would mean developers can't emulate devices with system font settings other than "Normal" font size, but I think that's a fair tradeoff.
I prefer that solution. 

Might have to be "Use device font metrics" so it doesnt look odd when emulating an iOS device with "android font metrics" checked/doing nothing.

Comment 4 by pdr@chromium.org, Nov 15 2013

Up for review: https://codereview.chromium.org/73203003

@paulirish, how do you think about this? http://pr.gg/as4.png
We don't have a setting for whether the emulated device is iOS/Android/etc. For example, if a user wants to emulate their new banana phone, they can use either an iOS or Android preset but modify the metrics themselves. Because only Android has this weird font scale factor, I think "Use Android font metrics" might be the best we can do for the name.

Comment 5 by pdr@chromium.org, Nov 15 2013

Cc: skobes@chromium.org
Labels: Cr-Blink-TextAutosize
If "Use Android font metrics" is only enabled when "Enable text autosizing" is, it should be below it and have indentation.
Project Member

Comment 7 by bugdroid1@chromium.org, Nov 19 2013

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=162250

------------------------------------------------------------------------
r162250 | pdr@chromium.org | 2013-11-19T00:48:23.181161Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/OverridesView.js?r1=162250&r2=162249&pathrev=162250
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/OverridesSupport.js?r1=162250&r2=162249&pathrev=162250

Refactor how font scale factor appears in the emulation panel

This patch refactors the confusing font scale factor setting. A
screenshot is available at http://pr.gg/asnew.png

Changes included in this patch:
1) Added updated tooltips for DPR, text autosizing, and the use android
   text metrics checkbox. This patch also moves the tooltips
   to be on both the input element and the associated label.
2) Removes the font scale factor textbox. Instead of manually entering
   this value, it will automatically be calculated if the new
   "Use Android font metrics" checkbox is checked.
3) Adds a new "Use Android font metrics" checkbox and auto-check it
   based on which emulation preset is chosen. When text autosizing
   is disabled, this checkbox will be disabled.
4) Minor refactoring of metrics.fontScaleFactor() which now computes
   the factor on-demand (it's cheap).

Some usecases:
If an iOS device is emulated, the text autosizing box will be checked
but the android font metrics box will not.

If an Android device is emulated, both checkboxes are checked.

If a custom device is being emulated, the user can choose whether to
use android's font metrics.

BUG= 319092 

Review URL: https://codereview.chromium.org/73203003
------------------------------------------------------------------------

Comment 8 by joh...@chromium.org, Nov 19 2013

Thanks for this, it's definitely clearer. Though it can still catch authors out:
- iOS text autosizing is very different from Chrome's, so the preview will look quite different to what you see on a device
- It's not clear that android font metrics refers specifically to Chrome (and Chromium-based browsers) but not to the legacy Android Browser.

I wonder if we can have some kind of info icon that links to a high-level explanation of Chrome Text Autosizing vs iOS text autosizing vs legacy Android Browser wrapping etc?

Comment 9 by skobes@chromium.org, Nov 19 2013

I think "Use Android font metrics" is kind of confusing since it implies that we can emulate iOS text autosizing, but we actually can't.

I'm not sure what I would change it to though :-/

Comment 10 by pdr@chromium.org, Nov 19 2013

I think you all are correct that we should not say we can emulate iOS autosizing when we can really just approximate it. With all the changes going into autosizing, this problem will only get worse moving forward. I will put up a patch that:
1) Adds some sort of help page or description.
2) Removes the checkbox so we'll just have a single autosizing checkbox.

Comment 11 Deleted

Comment 12 by pdr@chromium.org, Nov 20 2013

Patch up for review: https://codereview.chromium.org/77723002

Screenshot: http://pr.gg/learnmore.png

I'm happy to iterate further on this; this is just a first-pass. This patch adds a "learn more" (per the Google UI style guide) that links to a Chromium wiki page. If this passes the sniff test, I'll go ahead and write up a nice wiki page describing how emulating text autosizing works on iOS/etc.

I think the 99% usecase is for emulating small screens for mobile-designed sites that do not autosize. It's unfortunate that users emulating non-mobile sites on mobile on iOS will have to read this link, but I hope that's a small set.
If we're going with inline, then i'd rather this  <i> icon:
http://cache.gyazo.com/255da6d4a0840e0f851e54a70f6a2200.png instead? Good
if gray to start, and blue on hover.
This is subtle enough and stays out of the way until the curiosity really
hits.

However, I do think just a link to the docs at the end of the pane would be
better. Similar to the bottom of the keyboard shortcuts (within help).
A couple of notes / questions:
- I don't think Learn more link makes perfect sense against text autosizing. Other properties are equally confusing and need explanation.
- I also think explanation could be within-tools so that we could iterate faster. Like a question mark against each that appears on hover and brings up popover with the description
- Can we go even further and enable text autosizing whenever viewport is on? I guess they will only be used together, i.e. both or none.

New approach (with Learn more or <i>) SGTM.

Comment 16 by pdr@chromium.org, Nov 21 2013

Distilling the previous 3 comments: It sounds like we should do both the dev site link at the bottom of the page, and a small (?) icon next to text autosizing that brings up a little popup with some easily-updatable information.

I've updated https://codereview.chromium.org/77723002 to do the first half of this.
Preview screenshot: http://pr.gg/devsitelink.png

I'd like to do the (?) popup as a second patch because some minor infrastructure (icons, css, etc) will need to be added to keep it clean.
Project Member

Comment 17 by bugdroid1@chromium.org, Dec 3 2013

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=163062

------------------------------------------------------------------------
r163062 | pdr@chromium.org | 2013-12-03T05:48:05.775141Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/overrides.css?r1=163062&r2=163061&pathrev=163062
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/OverridesSupport.js?r1=163062&r2=163061&pathrev=163062
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/OverridesView.js?r1=163062&r2=163061&pathrev=163062

Remove the autosizing modes in favor of a dev site link.

Per discussion on  http://crbug.com/319092 , the autosizing configurations
are going to be confusing to users. This change switches back to just
a single "text autosizing" checkbox that emulates Chrome on Android's
text autosizing behavior. This change also adds a link at the bottom of the
screen emulation page for more information on the developers.google.com site.

A followup patch will add help icons next to some of the checkboxes for
light-weight contextual information.

Preview screenshot: http://pr.gg/devsitelink.png

BUG= 319092 

Review URL: https://codereview.chromium.org/77723002
------------------------------------------------------------------------
Status: Fixed
Fixed!
Screen Shot 2014-01-11 at 6.20.34 PM.png
50.6 KB View Download

Sign in to add a comment