Bug 179330

Summary: Web Inspector: Canvas Tab initial user interface needs some polish
Product: WebKit Reporter: Blaze Burg <bburg>
Component: Web InspectorAssignee: Matt Baker <mattbaker>
Status: RESOLVED FIXED    
Severity: Normal CC: commit-queue, hi, inspector-bugzilla-changes, joepeck, mattbaker, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 175485    
Attachments:
Description Flags
[Image] New UI - Resource folder title
none
[Image] New UI - Canvas Overview initial message
none
[Image] New UI - Empty database table
none
[Image] Safari message text page
none
Patch
none
Patch
none
Patch for landing none

Blaze Burg
Reported 2017-11-06 10:30:42 PST
Grab bag of complaints: - The "No canvas contexts found" text is vertically misaligned with the similar text in the sidebars. - The "No canvas context found" text is very thin, and doesn't match the sidebar font weights. I prefer the heavier sidebar weights myself. - Empty scroll bar track appears when using "Show scroll bars automatically" in macOS System Preferences. It shouldn't be there. I think we have this issue in some other places but this is especially egregious and ugly. For example, Network Tab doesn't have this problem even though it has a scroll container.
Attachments
[Image] New UI - Resource folder title (286.66 KB, image/png)
2017-12-03 18:51 PST, Matt Baker 		no flags
Details
[Image] New UI - Canvas Overview initial message (220.20 KB, image/png)
2017-12-03 18:51 PST, Matt Baker 		no flags
Details
[Image] New UI - Empty database table (279.94 KB, image/png)
2017-12-03 18:52 PST, Matt Baker 		no flags
Details
[Image] Safari message text page (102.68 KB, image/png)
2017-12-03 18:55 PST, Matt Baker 		no flags
Details
Patch (31.45 KB, patch)
2017-12-03 20:17 PST, Matt Baker 		no flags
DetailsFormatted DiffDiff
Patch (32.44 KB, patch)
2017-12-03 20:33 PST, Matt Baker 		no flags
DetailsFormatted DiffDiff
Patch for landing (33.74 KB, patch)
2017-12-04 12:06 PST, Matt Baker 		no flags
DetailsFormatted DiffDiff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-11-06 10:31:07 PST
<rdar://problem/35367581>
Matt Baker
Comment 2 2017-12-03 18:50:21 PST
This patch will do two things: 1) Add friendlier messages to the empty Canvas Overview screen 2) Consolidate all "message views" throughout the UI to go through WI.createMessageTextView. This will guarantee consistent appearance and reduce code duplication. Screenshots to follow.
Matt Baker
Comment 3 2017-12-03 18:51:06 PST
Created attachment 328318 [details] [Image] New UI - Resource folder title Before and after
Matt Baker
Comment 4 2017-12-03 18:51:49 PST
Created attachment 328319 [details] [Image] New UI - Canvas Overview initial message Before and after
Matt Baker
Comment 5 2017-12-03 18:52:18 PST
Created attachment 328320 [details] [Image] New UI - Empty database table Before and after
Matt Baker
Comment 6 2017-12-03 18:55:42 PST
Created attachment 328322 [details] [Image] Safari message text page Font size and spacing, as well as text/background colors were chosen to match the page shown in Safari when no network connection is available.
Matt Baker
Comment 7 2017-12-03 20:17:39 PST
Created attachment 328324 [details] Patch
Matt Baker
Comment 8 2017-12-03 20:22:04 PST
(In reply to Brian Burg from comment #0) > Grab bag of complaints: > > - The "No canvas contexts found" text is vertically misaligned with the > similar text in the sidebars. > - The "No canvas context found" text is very thin, and doesn't match the > sidebar font weights. I prefer the heavier sidebar weights myself. These points should be addressed by the patch. > - Empty scroll bar track appears when using "Show scroll bars automatically" > in macOS System Preferences. It shouldn't be there. I think we have this > issue in some other places but this is especially egregious and ugly. For > example, Network Tab doesn't have this problem even though it has a scroll > container. I haven't taken a look at this yet.
Matt Baker
Comment 9 2017-12-03 20:33:48 PST
Created attachment 328325 [details] Patch
Matt Baker
Comment 10 2017-12-03 20:34:12 PST
The issue with the vertical scrollbar is resolved.
Joseph Pecoraro
Comment 11 2017-12-04 11:30:55 PST
Comment on attachment 328325 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=328325&action=review r=me > Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js:-39 > - this._emptyFilterResultsElement = document.createElement("div"); > - this._emptyFilterResultsElement.classList.add("no-filter-results"); I see similar elements "no-filter-results" in SpreadsheetRulesStyleDetailsPanel. Am I out of date or do those still exist? I guess there was no CSS for that or its not hooked up (I see Devin has a patch to hook up filtering).
Matt Baker
Comment 12 2017-12-04 12:06:41 PST
Created attachment 328371 [details] Patch for landing
Matt Baker
Comment 13 2017-12-04 12:08:59 PST
(In reply to Joseph Pecoraro from comment #11) > Comment on attachment 328325 [details] > Patch > > View in context: > https://bugs.webkit.org/attachment.cgi?id=328325&action=review > > r=me > > > Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js:-39 > > - this._emptyFilterResultsElement = document.createElement("div"); > > - this._emptyFilterResultsElement.classList.add("no-filter-results"); > > I see similar elements "no-filter-results" in > SpreadsheetRulesStyleDetailsPanel. Am I out of date or do those still exist? > I guess there was no CSS for that or its not hooked up (I see Devin has a > patch to hook up filtering). Changed to use WI.createMessageTextView.
WebKit Commit Bot
Comment 14 2017-12-04 12:40:30 PST
Comment on attachment 328371 [details] Patch for landing Clearing flags on attachment: 328371 Committed r225487: <https://trac.webkit.org/changeset/225487>
WebKit Commit Bot
Comment 15 2017-12-04 12:40:32 PST
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.