Issue metadata
Sign in to add a comment
|
Update checkbox asset size |
||||||||||||||||||||||
Issue descriptionThere was a mistake in the spec. The final cut for checkboxes should be 12pt, not 14pt. Radios should remain 14pt to balance optically. Updated spec: https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20browser%20(MD)/Secondary%20UI%20Previews%20and%20specs%20(exports)/Spec#%2FSPEC-secondary-UI-04-radio-checkboxes.png%3Fz=width
,
Aug 22 2017
,
Aug 23 2017
Elly, do you have time to deal with this? I don't know whether you'll need to get any specific assets or something from Alan.
,
Aug 28 2017
I'll try to look at this next week; this week is already allocated.
,
Sep 6 2017
The NextAction date has arrived: 2017-09-06
,
Sep 6 2017
I don't think I need any new assets; these are drawn from vector icons, so drawing them at different sizes is very easy. https://chromium-review.googlesource.com/c/chromium/src/+/652593
,
Sep 7 2017
I think we need new assets.. there's some antialiasing involved in the vector drawing which causes some of the "blue" to "leak out" on the bottom and right edges. Currently the canvas size of the vector icon is 32 pixels, so it rounds out nicely scaling to 16, but not to 14 pixels.
,
Sep 7 2017
-> bettes@ for can has assets :) (or we could fiddle with numbers in https://cs.chromium.org/vector_icons/checkbox_normal.icon and https://cs.chromium.org/vector_icons/checkbox_active.icon but I don't think that's how these things are usually done).
,
Sep 7 2017
I suggest fiddling with the numbers directly, that's what I've done with a bunch of them in the past.
,
Sep 7 2017
Sizing ------------ The spec in comment #1 still stands. I think Elly might be able to achieve the same effect on her end, but I included new cuts just in case. https://drive.google.com/open?id=0B6x6iYCtKinEOThJM3ZRTmtmVnc The strokes are optimized for hi-dpi, where the optimal stroke width is 3px (1.5dp). Therefore, the blurriness seen in comment 6 is expected for the OFF state (unchecked-14.png) but not necessarily the ON state (checked-14.png) so maybe the new cuts will help. Re: #7, I'm not sure why we need to scale to 14px? Padding ------------ I've requested to Elly that we include the padding when converting to .icon files. The built-in padding will be really helpful for layouts, given that all the specs assumed they'd be present. Radio: 1px all around Checkbox: 2px all around Checked corner radii ------------ It doesn't look like there's a 1pt corner radius on the screenshots attached in #6 and 7. Unchecked colors ------------ The screenshot looks to be correct, but just to ensure, the expected color is #757575 or #000000 0.54a.
,
Sep 7 2017
Why not provide a 1x version of checkbox_off? That would address the blurriness, right?
,
Sep 8 2017
We could, but I was trying to make good on the original promise of svg's which is to have 1 deliverable for all. I'm also not entirely sure that a sharp 1px checkbox and radio is actually better. It might be mathematically better, but the 1.5px might provide the right amount of optics to make the blurriness preferable.
,
Sep 8 2017
> Re: #7, I'm not sure why we need to scale to 14px? Right - this is what caused the artifacts/blurriness. Increasing the padding built-in to the assets to get a 14px box (rather than scaling the whole asset to 14px) seems like the correct approach. Those svgs are a 16x16 canvas, which should work - computers like powers of 2 :).
,
Sep 8 2017
I converted the new assets from bettes@ to vector icons by hand: https://chromium-review.googlesource.com/c/chromium/src/+/657625 - they look great and sharp now. I'm not sure if there's a better way to convert them, so I asked estade@ but they haven't gotten back to me yet.
,
Sep 11 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/eaddc342f200653884a1ae99e428953c20018fe4 commit eaddc342f200653884a1ae99e428953c20018fe4 Author: Elly Fong-Jones <ellyjones@chromium.org> Date: Mon Sep 11 14:34:04 2017 views: update checkbox assets This updates the checkbox look from 16dip to 14dip from new SVG assets. Bug: 757677 Change-Id: Ie555eacd09a804f946b85ef4d1efd6917d3f2ec7 Reviewed-on: https://chromium-review.googlesource.com/657625 Commit-Queue: Elly Fong-Jones <ellyjones@chromium.org> Reviewed-by: Scott Violet <sky@chromium.org> Cr-Commit-Position: refs/heads/master@{#500911} [modify] https://crrev.com/eaddc342f200653884a1ae99e428953c20018fe4/ui/views/vector_icons/checkbox_active.icon [modify] https://crrev.com/eaddc342f200653884a1ae99e428953c20018fe4/ui/views/vector_icons/checkbox_normal.icon
,
Sep 11 2017
err +cc bettes :)
,
Sep 11 2017
On Windows Canary 63, checkboxes are still rendered at 14pt. Expected checkbox: 12pt + 2pt padding = 16pt Expected radio: 14pt + 1pt padding = 16pt
,
Sep 12 2017
The change would not have made it into yesterday's canary I think - can you have a look with today's canary, bettes?
,
Sep 13 2017
What UI actually uses this component? And can you assign me as the owner for anything needing my attention? It's hard for me to see the bug otherwise.
,
Sep 14 2017
They actually aren't used terribly much. The easiest way is probably to: 1) Launch canary with --enable-features=DisplayPersistenceToggleInPermissionPrompts and --secondary-ui-md 2) Navigate to https://permission.site 3) Hit the "Location" button the prompt should show a checkbox, like the attached screenshot.
,
Sep 14 2017
Just checked it out on my machine. LGTM! |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
/Secondary%20UI%20Previews%20and%20specs%20(exports)/Spec#%2FSPEC-secondary-UI-04-radio-checkboxes.png%3Fz=width){kind=link}
Comment 1 by bettes@chromium.org
, Aug 22 2017