Doorhanger component: Understand

[aminalhazwani]

Collect and compare doorhangers variations. Create a visual inventory and find possible edge cases.

[aminalhazwani]

As a first iteration I looked at doorhangers per se, without taking into consideration the content and the internal structure. I inspected doorhangers on both macOS and Windows with the Browser Toolbox.

There are a couple of differences between macOS and Windows. The biggest are corner radius and shadows. macOS has rounded corners and a stronger shadow, Windows has sharp corners and a softer shadow. Other small differences are the background and the border colors.

[aminalhazwani]

With mozscreenshots we can print all the different configuration for the identity popup which is another doorhanger being used https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=c1185e615e55949151f20c66d55b0e7e62034adb&newProject=mozilla-central&newRev=40a14ca1cf04499f398e4cb8ba359b39eae4e216&filter=controlCenter

I talked with the mozscreenshots engineers and it would also be possible to print all the doorhanger available in Firefox but a configuration would be needed.

[aminalhazwani]

Here another very valuable document that explain the rational behind doorhangers, their structure, their content and more https://bug1064257.bmoattachments.org/attachment.cgi?id=8504734

[aminalhazwani]

Interesting bug on bugzilla that might come useful for the second iteration on doorhangers https://bugzilla.mozilla.org/show_bug.cgi?id=1374339 and https://bugzilla.mozilla.org/show_bug.cgi?id=1409301