-
Notifications
You must be signed in to change notification settings - Fork 48
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Transparent icon for some extensions that supply a DevTools Panel #237
Comments
Extension icons have been a bit of a challenge to get right lately. So thank you for filing this issue and investigating already. |
Thanks @captainbrosset! It would also be nice if we could just turn them off completely. I'm not sure how useful they are, especially when each has its own size and look. Unlike the built-in panels which look & feel uniform. |
It would be nice if each and every panel had its own icon. This would help make things look consistent, and some people like to use icons to quickly identify tools. But I agree with the risk of them having their own different look. |
I agree in principle, but you can't force the hand of extension developers, especially when most of them think of Edge specially (which is the only browser that has this out of the Chromium browsers I looked at). That's why I suggested an option to turn off extension icons - so that the consumer has the control. |
It seems like some extensions are getting a transparent icon in their devtools panel.
![CleanShot 2024-03-20 at 20 17 46@2x](https://private-user-images.githubusercontent.com/260431/314619268-2cd750aa-80d6-453f-b111-a48c814763ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MDMyMDcsIm5iZiI6MTcxOTkwMjkwNywicGF0aCI6Ii8yNjA0MzEvMzE0NjE5MjY4LTJjZDc1MGFhLTgwZDYtNDUzZi1iMTExLWE0OGM4MTQ3NjNlZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzAyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwMlQwNjQ4MjdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03N2VlZGRiZWM3MTdhYWQwODk5NjgzYzRiYTQ1MmFkNGE2NTBmOThkZmRlMWM4ODhlYTI5ZDIwODU5ZjEzNzFkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.vPv-GmXlzHhefp7tNb6IQUUTJ6NTJDpJGCg1hNXyLEs)
E.g. EditThisCookie
Trying to debug this a bit it seems like the
<devtools-icon>
element has the correct value for the icon source as it's[name]
, and in the root<span>
(inside the shadow root) a wrong--icon-url
CSS variable is injected. In this case it's:url(chrome-extension://fngmhnnpilhplaeedifhccceomclgfbg/img/icon_32x32.png.svg)
, which leads to a file that doesn't exist. I'm not sure why the.svg
suffix is automatically appended.Furthermore, if I manually remove the
![CleanShot 2024-03-20 at 20 21 42@2x](https://private-user-images.githubusercontent.com/260431/314620458-59d0ef1d-9b54-4be2-ae5b-065590ed9601.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MDMyMDcsIm5iZiI6MTcxOTkwMjkwNywicGF0aCI6Ii8yNjA0MzEvMzE0NjIwNDU4LTU5ZDBlZjFkLTliNTQtNGJlMi1hZTViLTA2NTU5MGVkOTYwMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzAyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwMlQwNjQ4MjdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04MWM1OTg1YWM3MGFkNzM4MTIxMzFmNzI1NzQ4YmFkOWJkNzUyMDE5ZTM3OGMyOTRiYTcwNzViNGJjMDBiMDY4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ZOKh_IjMVlpU4bvSUAfplydW72PWP-5PizTmneDpA88)
.svg
suffix, a mask in the same shape as the icon is displayed, instead of the icon:I think adding the extension's icon is an Edge-specific feature, as in Chrome this is what I get:
![CleanShot 2024-03-20 at 20 23 02@2x](https://private-user-images.githubusercontent.com/260431/314620872-ac14ef5c-3802-48b5-8b38-0587f29b73c9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MDMyMDcsIm5iZiI6MTcxOTkwMjkwNywicGF0aCI6Ii8yNjA0MzEvMzE0NjIwODcyLWFjMTRlZjVjLTM4MDItNDhiNS04YjM4LTA1ODdmMjliNzNjOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzAyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwMlQwNjQ4MjdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jZGI3YTdlNjg3ODY4YjE5NWQwMTA5OGE0MzkwZTBmYjA4ZjUxNzdkODZmOGZkMmIxZGQ1Y2Y0NjQwNzVjZDI2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.lw9aYhUukVlAvi_2PwvaMq-f1HFbReDkm1fgJ6Uzskc)
OS: macOS 14.4 (23E214)
Edge version: Version 122.0.2365.92
AB#49588478
The text was updated successfully, but these errors were encountered: