1583350 - [Protections Panel] Make the more info image full width with no borders

Status: VERIFIED FIXED

(Firefox :: Site Identity, task, P3)

Description

[Eric Pang [:epang] UX]

Attachment: TP Panel with Message.png

Is it possible to make the image in the more info panel full width with no borders? Also, can we have the gradient background from the header expand and be the background of the image itself?

Will followup with a motion example.

Comment 1

[Eric Pang [:epang] UX]

Attachment: more-info.mp4

When the more info icon is pressed the header gradient's background is expanded and the image and copy are revealed.

Comment 2

[Eric Pang [:epang] UX]

Attachment: more-info-image.svg

SVG of the illustration that only uses white at different gradients and opacity. Should work with the light or dark background gradient.

Comment 3

[(inactive) Nihanth Subramanya [:nhnt11]]

Attachment: Bug 1583350 - Make the more info image full-width with no borders. r=johannh

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/012d008e440a
Make the more info image full-width with no borders. r=johannh

Comment 5

[Cristina Coroiu [:ccoroiu]]

Backed out 4 changesets (bug 1583355, bug 1576600, bug 1576601, bug 1583350) for browser-chrome failures at browser/base/content/test/siteProtections/browser_protections_UI.js

Backout: https://hg.mozilla.org/integration/autoland/rev/283763664a4b94cdfe9124846cdb04114c197440

Failure push: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=d1fe84998565c0a1f22979b467eb4e21862dc5c0

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=269024083&repo=autoland&lineNumber=6488

[task 2019-09-30T11:07:41.359Z] 11:07:41 INFO - TEST-PASS | browser/base/content/test/siteProtections/browser_protections_UI.js | recorded full_report telemetry event -
[task 2019-09-30T11:07:41.360Z] 11:07:41 INFO - Leaving test bound testShowFullReportButton
[task 2019-09-30T11:07:41.360Z] 11:07:41 INFO - Entering test bound testMiniPanel
[task 2019-09-30T11:07:41.361Z] 11:07:41 INFO - Buffered messages finished
[task 2019-09-30T11:07:41.361Z] 11:07:41 INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/siteProtections/browser_protections_UI.js | The section 'protections-popup-mainView-panel-header-section' is hidden in the toast. -
[task 2019-09-30T11:07:41.362Z] 11:07:41 INFO - Stack trace:
[task 2019-09-30T11:07:41.362Z] 11:07:41 INFO - chrome://mochikit/content/browser-test.js:test_ok:1580
[task 2019-09-30T11:07:41.363Z] 11:07:41 INFO - chrome://mochitests/content/browser/browser/base/content/test/siteProtections/browser_protections_UI.js:testMiniPanel:277
[task 2019-09-30T11:07:41.363Z] 11:07:41 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1350
[task 2019-09-30T11:07:41.364Z] 11:07:41 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1385
[task 2019-09-30T11:07:41.364Z] 11:07:41 INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1213
[task 2019-09-30T11:07:41.364Z] 11:07:41 INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:805

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/65068b971683
Make the more info image full-width with no borders. r=johannh

Comment 7

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/65068b971683

Comment 8

[(inactive) Nihanth Subramanya [:nhnt11]]

Comment on attachment 9096912 [details]
Bug 1583350 - Make the more info image full-width with no borders. r=johannh

Beta/Release Uplift Approval Request

• User impact if declined: Inferior Skyline feature onboarding experience
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Open the protections panel and click the "i" icon at the top right.
• List of other uplifts needed: Bug 1583350, Bug 1576601, Bug 1576600, Bug 1583355
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Visual polish.
• String changes made/needed:

Comment 9

[Liz Henry (:lizzard) (relman/hg->git project)]

Comment on attachment 9096912 [details]
Bug 1583350 - Make the more info image full-width with no borders. r=johannh

Polish for Skyline feature, fine for uplift for beta 12.

Comment 10

[Oana Pop-Rus]

https://hg.mozilla.org/releases/mozilla-beta/rev/a3c6b250563d

Comment 11

[Oana Botisan, Desktop QA]

Attachment: imgpsh_fullsize_anim.png

I verified the fix using latest Nightly 71.0a1 and Firefox 70.0b12 on Windows 10 x64, macOS 10.13 and Ubuntu 18.04 x64. The issue is not reproducing anymore.

However, on Ubuntu 18.04 x64 we've noticed that a white line is still present in on the border. Should I log a separate bug for this issue?

Comment 12

[(inactive) Nihanth Subramanya [:nhnt11]]

(In reply to Oana Botisan, Desktop Release QA from comment #11)

Created attachment 9098817 [details]
imgpsh_fullsize_anim.png

I verified the fix using latest Nightly 71.0a1 and Firefox 70.0b12 on Windows 10 x64, macOS 10.13 and Ubuntu 18.04 x64. The issue is not reproducing anymore.

However, on Ubuntu 18.04 x64 we've noticed that a white line is still present in on the border. Should I log a separate bug for this issue?

That looks like the usual panel border to me, nothing abnormal. Thanks!

Comment 13

[Ciprian Georgiu, Desktop QA]

We've verified this fix using latest Beta 70.0b14 and Nigthly 71.0a1 across platforms: Windows 10 x64, macOS 10.14 and Ubuntu 18.04 x64.