STR: 1. Visit some site where you have permissions set. (For example: https://www.google.com/maps/ , click the "dot" in lower right corner, and click the checkbox for "Remember this decision" and then the button to Allow Location Access") 2. Click the Site ID button (the lock icon at left edge of URL bar) 3. Look at the "Permissions Set" area ACTUAL RESULTS: The blue circle icon (to the right of "Permissions Set") is stretched vertically, so it's an awkward oval shape. EXPECTED RESULTS: It should be a circle. This is probably OS-specific -- I'm on Linux. It looks like the icon is a XUL `<image>` that has this styling: ```css list-style-image: url(chrome://browser/skin/badge-blue.svg); width: 16px; height: 16px; ``` ...but it's inside of an `hbox` alongside a label, so it actually gets stretched to the height of the label. There are several possible fixes: * Give its hbox parent `-moz-box-align: start` so that it doesn't stretch its kids in the cross axis. * Wrap the image in a wrapper box which can be the thing that gets stretched (instead of the image) * ...or maybe there's something else that is more elegant & would also work.
Bug 1575088 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
STR: 1. Visit some site where you have permissions set. (For example: https://www.google.com/maps/ , click the "dot" in lower right corner, and click the checkbox for "Remember this decision" and then the button to Allow Location Access") 2. Click the Site ID button (the lock icon at left edge of URL bar) 3. Look at the "Permissions Set" area ACTUAL RESULTS: The blue circle icon (to the right of "Permissions Set") is stretched vertically, so it's an awkward oval shape. EXPECTED RESULTS: It should be a circle. The issue might be OS-specific (by virtue of depending on the size of the "Permissions Set" text). I'm on Linux, if it matters. It looks like the icon is a XUL `<image>` that has this styling: ```css list-style-image: url(chrome://browser/skin/badge-blue.svg); width: 16px; height: 16px; ``` ...but it's inside of an `hbox` alongside a label, so it actually gets stretched to the height of the label. There are several possible fixes: * Give its hbox parent `-moz-box-align: start` so that it doesn't stretch its kids in the cross axis. * Wrap the image in a wrapper box which can be the thing that gets stretched (instead of the image) * ...or maybe there's something else that is more elegant & would also work.