1704827 - "Site Information for" menu needs visual consistency

Status: VERIFIED FIXED

(Firefox :: Foxfooding, enhancement, P2)

Description

[Jody Heavener]

Attachment: Screen Shot 2021-04-13 at 10.41.26 AM.png

Feel free to wontfix this as it's more of a nitpick issue

steps to reproduce/what did you do?

• Open a the "Site Information for X" menu on a page. Do this for an about page, for an insecure page, and for a secure page, as well as in light and dark themes, for the most variety.

expected behavior/ what did you think will happen?

• UI is consistent and well-contrasted

actual behavior/ what actually happened?

• Low contrast between the background and the "Connection not secure" text when visiting an insecure page
• Inconsistent vertical spacing with the connection information section
• Inconsistent horizontal spacing with left-aligned items (e.g. padlock icon vs text), horizontal rules (some reach the edge, some don't)
• Multiple alignments, "Site Information for X" versus the menu items. This might be mitigated by creating more hierarchy between the title and the menu items

Comment 1

[Romain Testard [:RT]]

Tyler, is this one captured already?

Comment 2

[Emma Malysz]

I spoke to UX, and we are going to change this to match the dark theme error text.

Note some proton style fixes will land in Bug 1703012, but we can the error text color contrast in this bug

Comment 3

[Emma Malysz]

Attachment: Bug 1704827, improve contrast of error text in site identity panel

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e3567ea32072
improve contrast of error text in site identity panel r=desktop-theme-reviewers,harry

Comment 5

[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

Push with failures:
https://treeherder.mozilla.org/jobs?repo=autoland&revision=e3567ea320728f48030aef2534953a8a1e36db88&selectedTaskRun=QSBWup-5QBqQvrrdhcoLxA.0

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

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/95a07d286cd7
improve contrast of error text in site identity panel r=desktop-theme-reviewers,harry

Comment 7

[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 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/14f7b86bc41a
improve contrast of error text in site identity panel r=desktop-theme-reviewers,harry

Comment 9

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/14f7b86bc41a

Comment 10

[Emma Malysz]

Comment on attachment 9215942 [details]
Bug 1704827, improve contrast of error text in site identity panel

Beta/Release Uplift Approval Request

• User impact if declined: Required for MR1 / Proton
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: 1. Enable proton and dark theme

2. Navigate to an insecure connection (such as http://permission.site)
3. Open the site identity panel
4. Notice the red text is bright and easily readable

• List of other uplifts needed: Bug 1703012
• Risk to taking this patch: Low
• 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: n/a

Comment 11

[Pascal Chevrel:pascalc]

Comment on attachment 9215942 [details]
Bug 1704827, improve contrast of error text in site identity panel

Approved for beta, thanks

Comment 12

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/3de580fd7a4d

Comment 13

[Ciprian Georgiu [:ciprian_georgiu], Release Desktop QA]

We can confirm that the red text is correctly displayed in the panel, with Dark theme applied, on Beta 89.0b2 and latest Nightly 90.0a1. Tested with Win 10 x64, macOS 10.15 and Ubuntu 18.04 x64.

As commented in https://bugzilla.mozilla.org/show_bug.cgi?id=1703012#c14, there's still an inconsistency regarding the text color displayed in Light theme. I've filed https://bugzilla.mozilla.org/show_bug.cgi?id=1706641 to track that issue.