1697910 - [Proton] The app menu and doorhangers should have rounded corners

Status: RESOLVED FIXED

(Firefox :: Menus, task, P1)

Description

[Jared Wein [:jaws] (please needinfo? me)]

The spec for the appmenu and doorhangers show rounded corners, with a border-radius of 8px for the appmenu and permission panels (I didn't check the spec for other types of panels, I assume they are consistent).

Comment 1

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

Hey mstange,

From what I can tell, on macOS, the window corner curve is something that happens in the native widget layer. Is that true, and do we have any power over it? Can we change the curve?

Comment 2

[Markus Stange [:mstange]]

For panels / menupopups we have full control over the border radius. The current border radius comes from this CSS declaration.

Backstory: We use NSWindowStyleMaskBorderless for those panels and we don't declare them as opaque, so we control their entire rendering. The forced system rounded corners are only required for windows with close/min/max buttons. (And yes, we could use NSWindowStyleMaskBorderless for the PiP window if we wanted, and give it square corners.)

Comment 3

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

Attachment: image.png

Hm... so I had found that declaration, except that when I crank it to 500px, I still get some leftover window decorations. Do we have any control of those?

Comment 4

[Markus Stange [:mstange]]

I think those will be gone once you reopen the panel. The shadow shape is only computed upon opening, it doesn't dynamically update.

Comment 5

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

Got it, thanks!

Comment 6

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

Attachment: Bug 1697910 - Set panel border radius to 8px when Proton is enabled. r?ntim!

Comment 7

[Romain Testard [:RT]]

Marking as P1. Per experience review we agreed to mark as P1 bug the ones that will block MR1.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/392cbc9b9b1d
Set panel border radius to 8px when Proton is enabled. r=desktop-theme-reviewers,ntim

Comment 9

[Bogdan Tara[:bogdan_tara | bogdant]]

Backed out 2 changesets (bug 1697624, bug 1697910) for browser_ext_popup_corners.js mochitest failures.

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&fromchange=22545dd0b23282607b786d74e9220b7c8731166e&searchStr=windows%2C7%2Copt%2Cmochitests%2Ctest-windows7-32%2Fopt-mochitest-browser-chrome-e10s%2Cbc7&tochange=7d695a38f1774d222b1f5d8167442555cefd431f&selectedTaskRun=aKmffaXzS7yeDd8tEoiZTw.0

Backout link: https://hg.mozilla.org/integration/autoland/rev/7d695a38f1774d222b1f5d8167442555cefd431f

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

[task 2021-03-19T07:23:24.674Z] 07:23:24     INFO - TEST-START | browser/components/extensions/test/browser/browser_ext_popup_corners.js
[task 2021-03-19T07:23:25.341Z] 07:23:25     INFO - TEST-INFO | started process screenshot
[task 2021-03-19T07:23:25.396Z] 07:23:25     INFO - TEST-INFO | screenshot: exit 0
[task 2021-03-19T07:23:25.397Z] 07:23:25     INFO - Buffered messages logged at 07:23:24
[task 2021-03-19T07:23:25.397Z] 07:23:25     INFO - Entering test bound testPopupBorderRadius
[task 2021-03-19T07:23:25.398Z] 07:23:25     INFO - Extension loaded
[task 2021-03-19T07:23:25.398Z] 07:23:25     INFO - Console message: Warning: attempting to write 22937 bytes to preference extensions.webextensions.uuids. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
[task 2021-03-19T07:23:25.399Z] 07:23:25     INFO - Console message: Warning: attempting to write 5562 bytes to preference browser.pageActions.persistedActions. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
[task 2021-03-19T07:23:25.399Z] 07:23:25     INFO - Console message: [JavaScript Warning: "browser.ui.customized_widgets - Keyed scalars cannot have more than 100 keys."]
[task 2021-03-19T07:23:25.399Z] 07:23:25     INFO - Console message: Warning: attempting to write 12094 bytes to preference browser.uiCustomization.state. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
[task 2021-03-19T07:23:25.400Z] 07:23:25     INFO - Console message: [JavaScript Warning: "browser.ui.customized_widgets - Keyed scalars cannot have more than 100 keys."]
[task 2021-03-19T07:23:25.400Z] 07:23:25     INFO - Test stand-alone browserAction popup
[task 2021-03-19T07:23:25.400Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Expect widget not to be overflowed - true == true - 
[task 2021-03-19T07:23:25.400Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | overflow is not hidden, thus it doesn't clip - 
[task 2021-03-19T07:23:25.401Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and view borderTopLeftRadius should be the same - 
[task 2021-03-19T07:23:25.401Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and body borderTopLeftRadius should be the same - 
[task 2021-03-19T07:23:25.402Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and view borderTopRightRadius should be the same - 
[task 2021-03-19T07:23:25.402Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and body borderTopRightRadius should be the same - 
[task 2021-03-19T07:23:25.402Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and view borderBottomRightRadius should be the same - 
[task 2021-03-19T07:23:25.403Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and body borderBottomRightRadius should be the same - 
[task 2021-03-19T07:23:25.403Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and view borderBottomLeftRadius should be the same - 
[task 2021-03-19T07:23:25.403Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and body borderBottomLeftRadius should be the same - 
[task 2021-03-19T07:23:25.404Z] 07:23:25     INFO - Test menu panel browserAction popup
[task 2021-03-19T07:23:25.404Z] 07:23:25     INFO - Console message: Warning: attempting to write 12038 bytes to preference browser.uiCustomization.state. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
[task 2021-03-19T07:23:25.404Z] 07:23:25     INFO - Console message: Warning: attempting to write 12094 bytes to preference browser.uiCustomization.state. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
[task 2021-03-19T07:23:25.405Z] 07:23:25     INFO - Buffered messages logged at 07:23:25
[task 2021-03-19T07:23:25.405Z] 07:23:25     INFO - Console message: [JavaScript Warning: "browser.ui.interaction.pinned_overflow-menu - Unknown scalar."]
[task 2021-03-19T07:23:25.405Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | overflow is not hidden, thus it doesn't clip - 
[task 2021-03-19T07:23:25.405Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | View node borderTopLeftRadius should be 0px - 
[task 2021-03-19T07:23:25.406Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Body node borderTopLeftRadius should be 0px - 
[task 2021-03-19T07:23:25.406Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | View node borderTopRightRadius should be 0px - 
[task 2021-03-19T07:23:25.406Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Body node borderTopRightRadius should be 0px - 
[task 2021-03-19T07:23:25.406Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | View node borderBottomRightRadius should be 0px - 
[task 2021-03-19T07:23:25.407Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Body node borderBottomRightRadius should be 0px - 
[task 2021-03-19T07:23:25.407Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | View node borderBottomLeftRadius should be 0px - 
[task 2021-03-19T07:23:25.407Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Body node borderBottomLeftRadius should be 0px - 
[task 2021-03-19T07:23:25.408Z] 07:23:25     INFO - Test pageAction popup
[task 2021-03-19T07:23:25.408Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | overflow is not hidden, thus it doesn't clip - 
[task 2021-03-19T07:23:25.408Z] 07:23:25     INFO - Buffered messages finished
[task 2021-03-19T07:23:25.408Z] 07:23:25     INFO - TEST-UNEXPECTED-FAIL | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and view borderTopLeftRadius should be the same - Got "0px", expected "4px"
[task 2021-03-19T07:23:25.408Z] 07:23:25     INFO - Stack trace:
[task 2021-03-19T07:23:25.408Z] 07:23:25     INFO - chrome://mochikit/content/browser-test.js:test_is:1359
[task 2021-03-19T07:23:25.409Z] 07:23:25     INFO - chrome://mochitests/content/browser/browser/components/extensions/test/browser/browser_ext_popup_corners.js:testPanel:68
[task 2021-03-19T07:23:25.409Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and body borderTopLeftRadius should be the same - 
[task 2021-03-19T07:23:25.409Z] 07:23:25     INFO - Not taking screenshot here: see the one that was previously logged
[task 2021-03-19T07:23:25.410Z] 07:23:25     INFO - TEST-UNEXPECTED-FAIL | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and view borderTopRightRadius should be the same - Got "0px", expected "4px"
[task 2021-03-19T07:23:25.410Z] 07:23:25     INFO - Stack trace:
[task 2021-03-19T07:23:25.410Z] 07:23:25     INFO - chrome://mochikit/content/browser-test.js:test_is:1359
[task 2021-03-19T07:23:25.410Z] 07:23:25     INFO - chrome://mochitests/content/browser/browser/components/extensions/test/browser/browser_ext_popup_corners.js:testPanel:68
[task 2021-03-19T07:23:25.410Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and body borderTopRightRadius should be the same - 
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - Not taking screenshot here: see the one that was previously logged
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - TEST-UNEXPECTED-FAIL | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and view borderBottomRightRadius should be the same - Got "0px", expected "4px"
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - Stack trace:
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - chrome://mochikit/content/browser-test.js:test_is:1359
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - chrome://mochitests/content/browser/browser/components/extensions/test/browser/browser_ext_popup_corners.js:testPanel:68
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and body borderBottomRightRadius should be the same - 
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - Not taking screenshot here: see the one that was previously logged
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - TEST-UNEXPECTED-FAIL | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and view borderBottomLeftRadius should be the same - Got "0px", expected "4px"
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - Stack trace:
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - chrome://mochikit/content/browser-test.js:test_is:1359
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - chrome://mochitests/content/browser/browser/components/extensions/test/browser/browser_ext_popup_corners.js:testPanel:68
[task 2021-03-19T07:23:25.411Z] 07:23:25     INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_popup_corners.js | Panel and body borderBottomLeftRadius should be the same - 
[task 2021-03-19T07:23:25.412Z] 07:23:25     INFO - Leaving test bound testPopupBorderRadius
[task 2021-03-19T07:23:25.412Z] 07:23:25     INFO - GECKO(3584) | MEMORY STAT | vsize 1176MB | vsizeMaxContiguous 328MB | residentFast 503MB | heapAllocated 225MB
[task 2021-03-19T07:23:25.412Z] 07:23:25     INFO - TEST-OK | browser/components/extensions/test/browser/browser_ext_popup_corners.js | took 705ms
[task 2021-03-19T07:23:25.412Z] 07:23:25     INFO - checking window state

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/299fe7d7c243
Set panel border radius to 8px when Proton is enabled. r=desktop-theme-reviewers,ntim

Comment 11

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/299fe7d7c243