Issue 692180 has been merged into this issue.

Mocks: https://docs.google.com/presentation/d/1iSNP_vQ-AeJ5e7qseIlGMgYg21FeYUpHIDzglM7Ff0w/edit

are these mocks ready for implementation?

Yup. Interactive specs are here: https://bbergher.googleplex.com/specs/pr-secure-branding/
I know this is a small project, but I want to avoid the mess from lack of specs from the payment apps project.

And I don't think you need any new assets:

  Chrome logo:
  src/clank/java/res_google_chrome/drawable-*/product_logo_name.png

  Secure badge (needs to be tinted): 
  src/chrome/android/java/res/drawable-*/omnibox_https_valid.png

Please let me know if you have any questions.

Yes, no new assets are needed. One question, what's the exact color value of the green icon and 'https' since I need tint them. 0x0b8043?

Yes, 0x0B8043.

Also hoping you get the HTTPS color for free from UrlFormatter.formatUrlForSecurityDisplay(), but that might not be the case.

Here are the screenshots,

Deleted: Screenshot_2017-02-15-13-15-54.png 191 KB

	Screenshot_2017-02-15-13-15-54.png 191 KB View Download

Deleted: Screenshot_2017-02-15-13-17-03.png 190 KB

	Screenshot_2017-02-15-13-17-03.png 190 KB View Download

The elements are all in the right place, but dimensions and placement are a bit off. Did you have a chance to look at the numbers in the static specs? you can click on elements and get all of that.

What I can quickly eye:
- The Chrome logo is a bit too large (should be 20dp tall)
- The lock icon itself (not the transparent padding) should left align with the title
- The URL should be vertically centered with the lock icon

Ah, sorry, I did not look at the numbers in the static specs, here are the updated screenshots.

The lock icon itself do left aligned with the title though, the problem is the icon has transparent boundary. In the interactive spec, the icon boundary is not left aligned with the title.

Deleted: Screenshot_2017-02-15-13-33-34.png 189 KB

	Screenshot_2017-02-15-13-33-34.png 189 KB View Download

Deleted: Screenshot_2017-02-15-13-33-45.png 188 KB

	Screenshot_2017-02-15-13-33-45.png 188 KB View Download

> The lock icon itself do left aligned with the title though, the problem is the ico
> has transparent boundary. In the interactive spec, the icon boundary is not left
> aligned with the title.

Yes, that's intentional. We need to compensate by shifting the icon and text to the left.

Here are the screenshots after shifting the icon 6dp to the left,

Deleted: Screenshot_2017-02-15-15-37-51.png 190 KB

	Screenshot_2017-02-15-15-37-51.png 190 KB View Download

Deleted: Screenshot_2017-02-15-15-37-55.png 211 KB

	Screenshot_2017-02-15-15-37-55.png 211 KB View Download

Looks great, thanks!

Would you mind including the same screenshots for a small phone? UI Review will ask for them, and I'd like to see what the URL looks like when truncated as well.

What screen size do you want? Above screenshots are from nexus 5.

Folks have used the LG L15G (3.8”) in previous implementation reviews, but Clank folks in general might have other ideas.

I'd also be happy with an emulator screenshot of something around 300x500dp.

This is the screenshot from emulated 320x480 device,

Deleted: Screenshot_20170216-115544.png 33.8 KB

	Screenshot_20170216-115544.png 33.8 KB View Download

Awesome. I'll submit this to implementation review, unless zkoch@ has any concerns.
Thanks Ganggui!

Looks great to me

Requesting a screenshot in Greek.  It's already starting to get a little cramped on my Nexus 5, which has a decently sized screen.

Deleted: screenshot-018e010b20c96fd2-20170216T111319.png 182 KB

	screenshot-018e010b20c96fd2-20170216T111319.png 182 KB View Download

Good catch, Dan
gogerald@, is it possible to remove the logo is there's not enough horizontal space?

Yes, we can, what about minimum width of 320dp to display the logo.

Even at 360dp it can be tight for certain languages, like Russian in the example attached.

Is there any way to make it dynamic? In super rough terms:

  if(sheet.availableWidth - editButton.width - payButton.width - logo.width < 0) {
    logo.hide()
  }

Does this make sense? Is it possible?

Deleted: Artboard Copy 18.png 55.0 KB

	Artboard Copy 18.png 55.0 KB View Download

We could if that's the case, just more effort on eng.

Hours? Days? Weeks?

Not a big deal :).

Here are the screenshots from emulated 240x320 device which is the smallest device I can emulate.

Deleted: Screenshot_20170216-172302.png 21.4 KB

	Screenshot_20170216-172302.png 21.4 KB View Download

Deleted: Screenshot_20170216-171928.png 21.4 KB

	Screenshot_20170216-171928.png 21.4 KB View Download

One idea would be to just fall back to the Chrome icon in these cases.

That's actually a great idea. If possible it would be my vote.

The screenshots look great btw, I'm glad that approach is possible (and not that hard to implement).

product logo without name looks better in this case. Not sure it fits all languages though. Might be good since it saves 52dp without name.

The logo size: 20dpx20dp

Deleted: Screenshot_20170216-184714.png 21.8 KB

	Screenshot_20170216-184714.png 21.8 KB View Download

I think that responsive approach works great.
- Full logo when it fits
- Just icon when it doesn't

Looks great to me. zkoch@, ship it?

Wrap it in a bow and ship it! Thanks guys!

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

commit 41f07f2348e5ccec788938057ff29fea5876ff57
Author: gogerald <gogerald@chromium.org>
Date: Wed Feb 22 01:28:20 2017

Add UI elements to secure branding for payments

BUG= 691104 

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

[modify] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java/res/layout/payment_request.xml
[add] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java/res/layout/payment_request_bottom_bar.xml
[modify] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java/res/layout/payment_request_header.xml
[modify] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java/src/org/chromium/chrome/browser/payments/PaymentRequestImpl.java
[add] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/PaymentRequestBottomBar.java
[add] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/PaymentRequestHeader.java
[modify] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/PaymentRequestUI.java
[modify] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/PaymentRequestUiErrorView.java
[modify] https://crrev.com/41f07f2348e5ccec788938057ff29fea5876ff57/chrome/android/java_sources.gni

Hi Bruno, this UI is in canary now, you can prepare review deck now.

Note that there are two small bugs.
-One is for RTL mode. The CL to fix it is out for review. crbug.com/694983.

-The second one is that elide dots are tinted to green when the url is long. crbug.com/693615 

Cool, thank you. When do you think fixes for those bugs will land? I ask because the purpose of Implementation Review is to make sure the actual user experience is good –exceptions are made when implementation diverges from the mocks for good reasons, but not if there are still open bugs.

The fix for the first one is landed. I prioritized the second one to 3, might fix it next week, will let you know.

Close this one now as I created a new bug to fix the dots,