NEW 175968
Web Inspector: Consider using unbordered buttons for Import/Export in Resources 
https://bugs.webkit.org/show_bug.cgi?id=175968
Summary Web Inspector: Consider using unbordered buttons for Import/Export in Resources
Alan Sien Wei Hshieh
Reported 2017-08-24 17:31:05 PDT
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.
Attachments
comp (29.37 KB, image/png)
2017-08-24 17:31 PDT, Alan Sien Wei Hshieh 		no flags
Details
Potential input glyph. We can't really use a vertical arrow since that is for download or sharing (776.84 KB, application/pdf)
2017-08-24 17:31 PDT, Alan Sien Wei Hshieh 		no flags
Details
Potential export glyph (776.83 KB, application/pdf)
2017-08-24 17:31 PDT, Alan Sien Wei Hshieh 		no flags
Details
Alternatively, we could use text that is unbordered :/ Which is very clear and looks pretty okay (29.92 KB, image/png)
2017-08-24 17:40 PDT, Alan Sien Wei Hshieh 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alan Sien Wei Hshieh
Comment 1 2017-08-24 17:31:38 PDT
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
Comment 2 2017-08-24 17:31:52 PDT
Created attachment 319047 [details] Potential export glyph
Alan Sien Wei Hshieh
Comment 3 2017-08-24 17:40:22 PDT
Created attachment 319048 [details] Alternatively, we could use text that is unbordered :/ Which is very clear and looks pretty okay
Matt Baker
Comment 4 2017-08-24 17:49:25 PDT
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
Comment 5 2017-08-24 17:54:13 PDT
In that case we should probably go unbordered!
Devin Rousso
Comment 6 2017-08-24 22:45:22 PDT
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
Comment 7 2017-08-25 10:36:07 PDT
My ultimate preference would be a dropdown and an NSMenu item for the inspector window. The latter is impractical given current architecture.
Note You need to log in before you can comment on or make changes to this bug.