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

Issue 646665 link

Starred by 3 users

Issue metadata

Status: Verified
Owner:
Last visit > 30 days ago
Closed: Oct 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: iOS
Pri: 2
Type: Bug
Team-Security-UX



Sign in to add a comment

Security indicators: iOS icons are not sized and placed correctly.

Project Member Reported by maxwalker@chromium.org, Sep 14 2016

Issue description

On iOS the scheme color is slightly too bright for both the secure (green) and non-secure (red) scheme. Also, the icon size/spacing is slightly off. Please see attached images. Thanks!
 
iOS.png
56.1 KB View Download
Spec Secure.png
53.2 KB View Download
Spec Insecure.png
53.8 KB View Download
Cc: justincohen@chromium.org
Labels: -Pri-3 M-55 Pri-2
Owner: justincohen@chromium.org
Status: Assigned (was: Untriaged)
Summary: Security indicators: iOS icons are not sized and placed correctly. (was: Security indicators: iOS icons and scheme color slightly off)
Thanks for filing; this has been bothering me, too!

Gonna split this into two bugs.
Labels: Needs-Feedback
What are the correct color values?

Currently it's:

// The color of the rest of the URL (i.e. after the TLD) in the omnibox.
return [UIColor colorWithWhite:161/255.0 alpha:1.0];

// The color of the https when there is an error.
return [UIColor colorWithRed:221/255.0 green:75/255.0 blue:57/255.0 alpha:1.0];

// The color of the https when there is a warning.
[UIColor colorWithRed:255 / 255.0 green:176 / 255.0 blue:0 / 255.0 alpha:1.0];

// The color of the https when there is not an error.
[UIColor colorWithRed:0/255.0 green:153/255.0 blue:51/255.0 alpha:1.0];

// The color of the https when highlighted in incognito.
[UIColor colorWithWhite:255/255.0 alpha:1.0];

See  Issue 646675  for the color issue.
Labels: -Needs-Feedback
Owner: lgar...@chromium.org
Whoops, meant to assign this to me.
Labels: Hotlist-SecurityIndicators
Max, I can't produce exact images off your mocks at the intended dp.

For example, the lock icon in `Spec Secure.png` has:
- 144px width for the icon, which is 6x the base resolution.
- 40px padding for the lock
- 64px width for the lock

Since 40px and 64px are not divisible by 6, this means that the icons would be blurry if I matched your image and downscaled (see screenshot).

Could you provide the following at 24w, 48w, and 72w with the icons in black?
- omnibox_http.png
- omnibox_https_invalid.png
- omnibox_https_valid.png

See [1] for the images and [2] for the latest change.

[1] https://cs.chromium.org/search/?q=omnibox_http&sq=package:chromium&type=cs
[2] https://codereview.chromium.org/2103693006
Screen Shot 2016-09-29 at 17.10.43.png
253 KB View Download

Comment 7 by rolfe@chromium.org, Sep 30 2016

I believe they are in this folder (Chrome Omnibox & Security > Touch > Assets > Png)
https://drive.google.com/drive/folders/0B6Wxmj9LZL6XWHR0LUJzTVVpelU?usp=sharing

If that doesn't work, maxwalker@ can weigh in on Monday!

The assets in that folder are vertically too low by 0.5dp :-(
Screen Shot 2016-10-04 at 13.04.32.png
252 KB View Download
Screen Shot 2016-10-04 at 13.07.39.png
318 KB View Download
Screen Shot 2016-10-04 at 14.04.53.png
202 KB View Download
Hi Lucas! Actually, this looks very good to me. "Chrome Omnibox & Security > Touch > Assets" is the correct folder for all Touch devices (iOS and Android).
Secure.png
55.3 KB View Download
Not Secure.png
57.7 KB View Download
Thanks!

I've never had a link to the `Chrome Omnibox & Security` folder, only to subfolders.
Is there e.g. a go-link for `Chrome Omnibox & Security`?
Project Member

Comment 11 by bugdroid1@chromium.org, Oct 10 2016

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

commit e8a19cea39a641c9e35ab84bb621c4246883de7b
Author: lgarron <lgarron@chromium.org>
Date: Mon Oct 10 21:39:29 2016

Update new iOS omnibox security indicators to the correct dimensions.

The previous icons were too large, and not base-aligned with the omnibox URL; these updated ones are.

Note that the icons are customized based on scale. Resources are taken from the designer exports[1] and are compressed using a PNG optimizer (ImageOptim).

[1] Googler-only link: https://drive.google.com/corp/drive/folders/0B6Wxmj9LZL6XWHR0LUJzTVVpelU

BUG= 646665 

Review-Url: https://codereview.chromium.org/2407943002
Cr-Commit-Position: refs/heads/master@{#424253}

[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_100_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_100_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_100_percent/omnibox/ios/omnibox_https_valid.png
[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_200_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_200_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_200_percent/omnibox/ios/omnibox_https_valid.png
[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_300_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_300_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/e8a19cea39a641c9e35ab84bb621c4246883de7b/components/resources/default_300_percent/omnibox/ios/omnibox_https_valid.png

Status: Fixed (was: Assigned)
maxwalker@, do these look good to you?

justincohen@: How do I merge this to M55? The resources are all stored in the Chrome repo (not ios_internal). Can I do a normal Chrome merge, or do I need to do an iOS-specific one?
iphone-lock-portrait.png
55.6 KB View Download
iPhone-lock.png
44.1 KB View Download
iPhone-info.png
147 KB View Download
iPhone-triangle.png
81.5 KB View Download
iPad-lock.png
119 KB View Download
iPad-http-info.png
171 KB View Download
iPad-https-info.png
428 KB View Download
iPad-triangle.png
110 KB View Download
iPhone-incognito-lock.png
44.7 KB View Download
iPhone-incognito-info.png
147 KB View Download
iPhone-incognito-triangle.png
80.5 KB View Download
Yes, these LGTM - thank you!
lgarron@ a normal chrome merge to m55 should work.
Labels: Merge-Request-55

Comment 16 by dimu@chromium.org, Oct 13 2016

Labels: -Merge-Request-55 Merge-Approved-55 Hotlist-Merge-Approved
Your change meets the bar and is auto-approved for M55 (branch: 2883)
Project Member

Comment 17 by bugdroid1@chromium.org, Oct 13 2016

Labels: -merge-approved-55 merge-merged-2883
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/3229d85ac0e2e3a78b7819ac2a660664786257bf

commit 3229d85ac0e2e3a78b7819ac2a660664786257bf
Author: Lucas Garron <lgarron@chromium.org>
Date: Thu Oct 13 18:40:33 2016

Update new iOS omnibox security indicators to the correct dimensions.

The previous icons were too large, and not base-aligned with the omnibox URL; these updated ones are.

Note that the icons are customized based on scale. Resources are taken from the designer exports[1] and are compressed using a PNG optimizer (ImageOptim).

[1] Googler-only link: https://drive.google.com/corp/drive/folders/0B6Wxmj9LZL6XWHR0LUJzTVVpelU

BUG= 646665 

Review-Url: https://codereview.chromium.org/2407943002
Cr-Commit-Position: refs/heads/master@{#424253}
(cherry picked from commit e8a19cea39a641c9e35ab84bb621c4246883de7b)

Review URL: https://codereview.chromium.org/2419673004 .

Cr-Commit-Position: refs/branch-heads/2883@{#92}
Cr-Branched-From: 614d31daee2f61b0180df403a8ad43f20b9f6dd7-refs/heads/master@{#423768}

[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_100_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_100_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_100_percent/omnibox/ios/omnibox_https_valid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_200_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_200_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_200_percent/omnibox/ios/omnibox_https_valid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_300_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_300_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_300_percent/omnibox/ios/omnibox_https_valid.png

Components: UI>Browser>Omnibox>SecurityIndicators
Project Member

Comment 19 by bugdroid1@chromium.org, Oct 27 2016

Labels: merge-merged-2840
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/3229d85ac0e2e3a78b7819ac2a660664786257bf

commit 3229d85ac0e2e3a78b7819ac2a660664786257bf
Author: Lucas Garron <lgarron@chromium.org>
Date: Thu Oct 13 18:40:33 2016

Update new iOS omnibox security indicators to the correct dimensions.

The previous icons were too large, and not base-aligned with the omnibox URL; these updated ones are.

Note that the icons are customized based on scale. Resources are taken from the designer exports[1] and are compressed using a PNG optimizer (ImageOptim).

[1] Googler-only link: https://drive.google.com/corp/drive/folders/0B6Wxmj9LZL6XWHR0LUJzTVVpelU

BUG= 646665 

Review-Url: https://codereview.chromium.org/2407943002
Cr-Commit-Position: refs/heads/master@{#424253}
(cherry picked from commit e8a19cea39a641c9e35ab84bb621c4246883de7b)

Review URL: https://codereview.chromium.org/2419673004 .

Cr-Commit-Position: refs/branch-heads/2883@{#92}
Cr-Branched-From: 614d31daee2f61b0180df403a8ad43f20b9f6dd7-refs/heads/master@{#423768}

[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_100_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_100_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_100_percent/omnibox/ios/omnibox_https_valid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_200_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_200_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_200_percent/omnibox/ios/omnibox_https_valid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_300_percent/omnibox/ios/omnibox_http.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_300_percent/omnibox/ios/omnibox_https_invalid.png
[modify] https://crrev.com/3229d85ac0e2e3a78b7819ac2a660664786257bf/components/resources/default_300_percent/omnibox/ios/omnibox_https_valid.png

Comment 20 by dimu@google.com, Nov 4 2016

Labels: -merge-merged-2840
[Automated comment] removing mislabelled merge-merged-2840
Status: Verified (was: Fixed)
Verified in 55.0.2883.54 beta, iPad Air 2 iOS 9.3.5
Components: -Security>UX

Sign in to add a comment