Closed Bug 1697910 Opened 7 months ago Closed 6 months ago

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

Categories

(Firefox :: Menus, task, P1)

task
Points:
1

Tracking

()

RESOLVED FIXED
88 Branch
Tracking Status
firefox88 --- fixed

People

(Reporter: jaws, Assigned: mconley)

References

(Blocks 1 open bug)

Details

(Keywords: helpwanted, Whiteboard: [proton-door-hangers])

Attachments

(2 files)

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).

Whiteboard: [proton-doorhangers] → [proton-door-hangers]

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?

Flags: needinfo?(mstange.moz)

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.)

Flags: needinfo?(mstange.moz)
Attached image 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?

Flags: needinfo?(mstange.moz)

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

Flags: needinfo?(mstange.moz)

Got it, thanks!

Assignee: nobody → mconley
Attachment #9208812 - Attachment description: Bug 1697910 - Set border radius to 8px when Proton is enabled. r?emalysz! → Bug 1697910 - Set border radius to 8px when Proton is enabled. r?ntim!
Attachment #9208812 - Attachment description: Bug 1697910 - Set border radius to 8px when Proton is enabled. r?ntim! → Bug 1697910 - Set panel border radius to 8px when Proton is enabled. r?ntim!

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

Priority: P3 → P1
Pushed by mconley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/392cbc9b9b1d
Set panel border radius to 8px when Proton is enabled. r=desktop-theme-reviewers,ntim

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
Flags: needinfo?(mconley)
Pushed by mconley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/299fe7d7c243
Set panel border radius to 8px when Proton is enabled. r=desktop-theme-reviewers,ntim
Flags: needinfo?(mconley)
Status: NEW → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → 88 Branch
Depends on: 1699917
Blocks: 1699917
No longer depends on: 1699917
Regressions: 1701257
You need to log in before you can comment on or make changes to this bug.