See attached screenshot. I think these 2 icons should be either baseline aligned, or vertically centered compared to the text. Having these 2 icons floating about the line of text seems wrong.

Mark, this is closely related to bug 1329942, do you think you can take it?

Yeah, I can take this.

The extension name and icon are not aligned in this popup just like in bug 1329942. That should be fixed while the icons are being aligned.

Here are some mac and windows screenshots. Having trouble getting the build on my linux VM. I'll try again tomorrow morning and verify it looks okay. I just hid the extra description at the top of the popup since it doesn't support HTML and is causing a flash in the permissions popup. I'll update the permissions popup once this one is ready.

It was looking a little cramped on linux so I added some more padding above the bottom paragraph. Try build https://treeherder.mozilla.org/#/jobs?repo=try&revision=325a43214339ed0a1249128cfe31f5d73afdef9f

On these screenshots, the alignment of the addon-toolbar-icon icon looks much better, but the alignment of the addon-addon-icon icon still doesn't look great to me. I would expect the bottom of the puzzle icon to be aligned with the baseline of the text (ie. aligned with the bottom of 'clickin' not with the bottom of 'g').

Comment on attachment 8862197 [details] Bug 1351255 - Align add-on install notification I'm currently quite busy so I'll forward this request to Nihanth.

I went through and made sure the icons were both visually aligned the same way. Should be good now.

Comment on attachment 8862197 [details] Bug 1351255 - Align add-on install notification https://reviewboard.mozilla.org/r/134086/#review142934 ::: browser/themes/linux/browser.css:851 (Diff revision 4) > + > +@media (min-resolution: 1.1dppx) { > + .addon-toolbar-icon { > + list-style-image: url("chrome://browser/skin/Toolbar@2x.png"); > + -moz-image-region: rect(0, 972px, 36px, 936px); > + } You won't need this block anymore, since we switched to SVG icons. You'll have to rebase the patch though. ::: browser/themes/windows/browser.css:2139 (Diff revision 4) > + > +@media (min-resolution: 1.1dppx) { > + .addon-toolbar-icon { > + list-style-image: url("chrome://browser/skin/Toolbar@2x.png"); > + -moz-image-region: rect(0, 972px, 36px, 936px); > + } ditto

Mark, still working on this? We could still take this fix in Nightly. It would be nice to fix this and maybe bug 1358431 for 55.

Yes, I'll look into this and bug 1358431 again this week or next.

Updated with changes on inbound and new screenshots uploaded.

Comment on attachment 8873901 [details] Bug 1351255 - Align icons in webextension install dialog https://reviewboard.mozilla.org/r/145292/#review151792 Thanks! Personally I feel that it looks nicer without the `margin-bottom: 1px;` on the icons; however, it seems that was already discussed previously in this bug so I won't let that block this. ::: browser/themes/windows/browser.css:1638 (Diff revision 1) > height: 14px; > list-style-image: url("chrome://browser/skin/menu.svg"); > -moz-context-properties: fill; > fill: var(--toolbarbutton-icon-fill); > + vertical-align: bottom; > + margin-bottom: 1px; Nit: These two rules bring the total number of rules common to .addon-addon-icon and .addon-toolbar-icon to 4. That makes me want to group those together and save some duplication, but that might not be as readable as I suspect once executed. Please try and deduplicate these rules if you think readability will be preserved. It's also unfortunate that these identical-across-platforms styles are not defined in a shared CSS file, but maybe that can be deduplicated as part of Photon.

Comment on attachment 8873901 [details] Bug 1351255 - Align icons in webextension install dialog https://reviewboard.mozilla.org/r/145292/#review151792 I agree that having them lower looks fine but looking at the address bar it looks like they're somewhere between the bottom of a descender and the baseline. So I think this is about right. > Nit: These two rules bring the total number of rules common to .addon-addon-icon and .addon-toolbar-icon to 4. That makes me want to group those together and save some duplication, but that might not be as readable as I suspect once executed. > > Please try and deduplicate these rules if you think readability will be preserved. > > It's also unfortunate that these identical-across-platforms styles are not defined in a shared CSS file, but maybe that can be deduplicated as part of Photon. Combining them looks good to me. I left them in the platform specific stylesheets for now.

Pushed by ryanvm@gmail.com: https://hg.mozilla.org/integration/autoland/rev/405e89243e0a Align icons in webextension install dialog r=nhnt11

This issue is verified as fixed on Firefox 55.0b1(20170612224034) and 56.0a1(20170614030206) under Wind 7 64-bit, Ubuntu 16.04 32-bit and Mac OS X 10.10.4 The addon-toolbar-icon icon and addon-addon-icon icon are aligned properly with the text in the confirmation pop-up. Windows - https://www.dropbox.com/s/uz1i9obypf3o8wf/Windows55.0b1.png?dl=0 Linux - https://www.dropbox.com/s/75ucvk35gx9sgvq/Linux550b1.png?dl=0 Mac - https://www.dropbox.com/s/mold0hhyb2gnavn/Mac55.0b1.png?dl=0