1703012 - Control Center panel is missing a number of Proton styles

Status: VERIFIED FIXED

(Firefox :: Site Identity, task, P1)

Description

[Mike Conley (:mconley) (:⚙️)]

Quoting UX:

At the current state, the control center  panel is so far off from the visual refresh proposed that it doesn’t allow us to start the review.

The following bullets should be interpreted as P1. 

* Text styes
* Remove vertical divider to the right of the right chevron
* Icon location / padding incorrect
* Spacing, margins…
* Divider line incorrect in header
* Confirm text colour
* Sentence case buttons

tduzan, UX considers the above work P1 and should block MR1. Do you concur?

Comment 1

[Oana Botisan, Desktop QA]

We looked over this panel and found two more issues that are not mentioned here:

• The text is not the one from specs: "Connection Security for... " instead of "Site information for... "
• There is a separator between "You are securely connected to this site" and "Verifiedby:..."

These things are not according to the specs. Should we log a bug for each or they are taking in sight in this bug?

Comment 3

[Tyler Duzan]

Bumping this to P1 per conversation this morning in MR1 triage call.

Comment 4

[Emma Malysz]

Attachment: Bug 1703012: fix control center and identity panel proton styling

Migrates two strings to fluent and uses sentence casing.
Places identity security block into a toolbar button.
Fixes margin spacing.
Removes green color from secure connection.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/43bb3216b816
fix control center and identity panel proton styling r=desktop-theme-reviewers,fluent-reviewers,mconley,flod,pbz,Itiel

Comment 6

[Cristian Brindusan [:cbrindusan]]

Backed out 2 changesets (bug 1704827, bug 1703012) for causing bc failures in browser_parsable_css.js.
https://hg.mozilla.org/integration/autoland/rev/2f899f5fc08de18cb8b5ddab0e5b26c4a52dcad5

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5e8a1732b021
fix control center and identity panel proton styling r=desktop-theme-reviewers,fluent-reviewers,mconley,flod,pbz,Itiel

Comment 8

[Bogdan Tara[:bogdan_tara | bogdant]]

Backed out 2 changesets (bug 1704827, bug 1703012) for screenshots mochitest timeouts.

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&fromchange=30f92429e81b48118a57dc238da98286a3676a04&searchStr=screenshots&selectedTaskRun=O34327TNTBSx1_a6CppMbQ.0&tochange=77b569d0233661e86c3db1b631482fec178e8618

Backout link: https://hg.mozilla.org/integration/autoland/rev/77b569d0233661e86c3db1b631482fec178e8618

Failure log: https://treeherder.mozilla.org/logviewer?job_id=336820413&repo=autoland&lineNumber=2322

[task 2021-04-16T18:36:33.755Z] 18:36:33     INFO - TEST-START | browser/tools/mozscreenshots/controlCenter/browser_controlCenter.js
[task 2021-04-16T18:36:33.771Z] 18:36:33     INFO - installing extension temporarily
[task 2021-04-16T18:36:33.807Z] 18:36:33     INFO - Checking for mozscreenshots extension
[task 2021-04-16T18:36:33.811Z] 18:36:33     INFO - TEST-PASS | browser/tools/mozscreenshots/controlCenter/browser_controlCenter.js | The mozscreenshots extension should be installed - 
[task 2021-04-16T18:36:33.811Z] 18:36:33     INFO - Leaving test bound setup
[task 2021-04-16T18:36:33.811Z] 18:36:33     INFO - Entering test bound capture
[task 2021-04-16T18:36:33.811Z] 18:36:33     INFO - Saving screenshots to: /tmp/mozscreenshots/2021-04-16T18-36-33.807Z_Linux
[task 2021-04-16T18:36:33.827Z] 18:36:33     INFO - 2 sets: LightweightThemes,ControlCenter
[task 2021-04-16T18:36:33.827Z] 18:36:33     INFO - 84 combinations
[task 2021-04-16T18:36:33.944Z] 18:36:33     INFO - Combination 01/84: noLWT_about
[task 2021-04-16T18:36:33.944Z] 18:36:33     INFO - promising noLWT
[task 2021-04-16T18:36:33.944Z] 18:36:33     INFO - calling noLWT
[task 2021-04-16T18:36:33.944Z] 18:36:33     INFO - called noLWT
[task 2021-04-16T18:36:34.643Z] 18:36:34     INFO - promising about
[task 2021-04-16T18:36:34.643Z] 18:36:34     INFO - calling about
[task 2021-04-16T18:36:34.643Z] 18:36:34     INFO - called about
[task 2021-04-16T18:36:34.685Z] 18:36:34     INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "about:rights" line: 0}]
[task 2021-04-16T18:36:34.685Z] 18:36:34     INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "about:rights" line: 0}]
[task 2021-04-16T18:36:34.705Z] 18:36:34     INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "chrome://global/content/aboutRights.js" line: 32}]
[task 2021-04-16T18:36:35.514Z] 18:36:35     INFO - fulfilled all applyConfig so setting lastCombo.
[task 2021-04-16T18:36:35.514Z] 18:36:35     INFO - Configured UI for [ noLWT, about ] successfully
[task 2021-04-16T18:36:35.514Z] 18:36:35     INFO - TEST-PASS | browser/tools/mozscreenshots/controlCenter/browser_controlCenter.js | A valid bounding box was found - 
[task 2021-04-16T18:36:36.699Z] 18:36:36     INFO - _onConfigurationReady
[task 2021-04-16T18:36:36.700Z] 18:36:36     INFO - Combination 02/84: noLWT_localFile
[task 2021-04-16T18:36:36.700Z] 18:36:36     INFO - promising localFile
[task 2021-04-16T18:36:36.700Z] 18:36:36     INFO - calling localFile
[task 2021-04-16T18:36:36.700Z] 18:36:36     INFO - called localFile
[task 2021-04-16T18:36:37.673Z] 18:36:37     INFO - fulfilled all applyConfig so setting lastCombo.
[task 2021-04-16T18:36:37.673Z] 18:36:37     INFO - Configured UI for [ noLWT, localFile ] successfully
[task 2021-04-16T18:36:37.681Z] 18:36:37     INFO - TEST-PASS | browser/tools/mozscreenshots/controlCenter/browser_controlCenter.js | A valid bounding box was found - 
[task 2021-04-16T18:36:38.861Z] 18:36:38     INFO - GECKO(1543) | JavaScript error: resource://mozscreenshots/TestRunner.jsm, line 568: TypeError: FileReader.readAsArrayBuffer: Argument 1 is not an object.
[task 2021-04-16T18:36:38.861Z] 18:36:38     INFO - Console message: [JavaScript Error: "TypeError: FileReader.readAsArrayBuffer: Argument 1 is not an object." {file: "resource://mozscreenshots/TestRunner.jsm" line: 568}]
[task 2021-04-16T18:36:38.861Z] 18:36:38     INFO - _cropImage/promise</img.onload/<@resource://mozscreenshots/TestRunner.jsm:568:14
[task 2021-04-16T18:36:38.862Z] 18:36:38     INFO - 
[task 2021-04-16T18:37:18.769Z] 18:37:18     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 99
[task 2021-04-16T18:38:03.768Z] 18:38:03     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 98
[task 2021-04-16T18:38:48.770Z] 18:38:48     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 97
[task 2021-04-16T18:39:33.771Z] 18:39:33     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 96
[task 2021-04-16T18:40:18.769Z] 18:40:18     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 95
[task 2021-04-16T18:41:03.772Z] 18:41:03     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 94
[task 2021-04-16T18:41:48.776Z] 18:41:48     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 93
[task 2021-04-16T18:42:33.778Z] 18:42:33     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 92
[task 2021-04-16T18:43:18.778Z] 18:43:18     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 91
[task 2021-04-16T18:44:03.778Z] 18:44:03     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 90
[task 2021-04-16T18:44:48.776Z] 18:44:48     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 89
[task 2021-04-16T18:45:00.264Z] 18:45:00     INFO - GECKO(1543) | 1618598700261	addons.xpi	ERROR	System addon update list error Error: got node name: html, expected: updates
[task 2021-04-16T18:45:00.265Z] 18:45:00     INFO - Console message: [JavaScript Error: "1618598700261	addons.xpi	ERROR	System addon update list error Error: got node name: html, expected: updates" {file: "resource://gre/modules/Log.jsm" line: 723}]
[task 2021-04-16T18:45:00.265Z] 18:45:00     INFO - append@resource://gre/modules/Log.jsm:723:12
[task 2021-04-16T18:45:00.265Z] 18:45:00     INFO - log@resource://gre/modules/Log.jsm:379:16
[task 2021-04-16T18:45:00.265Z] 18:45:00     INFO - error@resource://gre/modules/Log.jsm:387:10
[task 2021-04-16T18:45:00.265Z] 18:45:00     INFO - updateSystemAddons/res<@resource://gre/modules/addons/XPIInstall.jsm:4024:25
[task 2021-04-16T18:45:00.265Z] 18:45:00     INFO - 
[task 2021-04-16T18:45:33.780Z] 18:45:33     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 88
...
...
...
[task 2021-04-16T19:34:18.799Z] 19:34:18     INFO - Longer timeout required, waiting longer...  Remaining timeouts: 23
[taskcluster:error] Task timeout after 3600 seconds. Force killing container.
[taskcluster 2021-04-16 19:34:29.986Z] === Task Finished ===
[taskcluster 2021-04-16 19:34:29.986Z] Unsuccessful task run with exit code: -1 completed in 3601.412 seconds

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e9b16fe7aaaf
fix control center and identity panel proton styling r=desktop-theme-reviewers,fluent-reviewers,mconley,flod,pbz,Itiel

Comment 10

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/e9b16fe7aaaf

Comment 11

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 9214584 [details]
Bug 1703012: fix control center and identity panel proton styling

Beta/Release Uplift Approval Request

• User impact if declined: Required for MR1 / Proton
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Medium
• Why is the change risky/not risky? (and alternatives if risky): Re-theme work for MR1 that didn't make the uplift.
• String changes made/needed: None

Comment 12

[Francesco Lodolo [:flod]]

(In reply to Mike Conley (:mconley) (:⚙️) (Catching up on needinfos) from comment #11)

• String changes made/needed: None

Note: there are string changes, but that's OK (as they are migrated).

Comment 13

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9214584 [details]
Bug 1703012: fix control center and identity panel proton styling

Approved for beta, thanks

Comment 14

[Ciprian Georgiu, Desktop QA]

Hi emalysz, while verifying this panel we've noticed some minor inconstancies between latest Nightly 90.a1 and UX specs.

1. "Your are securely connected to this site." phrase ends with a dot, per specs the . is not displayed.
2. The color contrast of the "Connection not secure" string seems a bit different. The red color looks darker compared to the specs, this is noticeable with the Light theme applied. Please observe the screenshot here https://drive.google.com/file/d/17qrEzMJLc2I8bv1x0wy0eBYMnnbjfpYG/view?usp=sharing

Can you help us clarifying the above, please?

Comment 15

[Emma Malysz]

Hi Ciprian,

Thanks for checking.

1. This panel was only meant to be restyled with no content changes. We can ignore this inconsistency
2. That looks to be a regression from Bug 1704827

Comment 16

[Pascal Chevrel:pascalc (PTO until April 26)]

https://hg.mozilla.org/releases/mozilla-beta/rev/1c2f3a12c4a0

Comment 17

[Ciprian Georgiu, Desktop QA]

Thanks Emma! I've filed bug https://bugzilla.mozilla.org/show_bug.cgi?id=1706641 for the color problem mentioned in the above comment.

We're going to close this bug as verified fixed since we did not see any other issues on Nightly 90.0a1 and Beta 89.0b2, under macOS 10.15, Windows 10 x64 and Ubuntu 18.04 x64.