Bug 175968 – Web Inspector: Consider using unbordered buttons for Import/Export in Resources

• Component: Web Inspector
• Status: NEW

[Alan Sien Wei Hshieh]

Created attachment 319045 [details]
comp

Consider using icons instead of Import/Export in Resources. This not only cleans up the appearance of the Import/Export bordered buttons that we have currently, but also gives us iconography we can use throughout Web Inspector for other purposes.

Sadly, I have only bad or very bad ideas for how this icon could look. I've attached my experiments to this bug.

[Alan Sien Wei Hshieh]

Created attachment 319046 [details]
Potential input glyph. We can't really use a vertical arrow since that is for download or sharing

[Alan Sien Wei Hshieh]

Created attachment 319047 [details]
Potential export glyph

[Alan Sien Wei Hshieh]

Created attachment 319048 [details]
Alternatively, we could use text that is unbordered :/  Which is very clear and looks pretty okay

[Matt Baker]

My concern is that these glyphs look very similar, and this is compounded by the fact that they are right next to one another.

I like the borderless button look. We use this style in the Inspector for toggles ("Classes" in the Styles sidebar) but not for actions AFAIK.

[Alan Sien Wei Hshieh]

In that case we should probably go unbordered!

[Devin Rousso]

Aren't the Share/Save buttons in iOS vertically oriented?  I feel like that would be much more distinguished than horizontal.

As an aside, the changes in <https://webkit.org/b/175485> might make some of this unnecessary, as the import button would probably be moved to the overview page.  We might want to move the export button somewhere else, or include other actions so it isn't as "alone".

[Blaze Burg]

My ultimate preference would be a dropdown and an NSMenu item for the inspector window. The latter is impractical given current architecture.