Bug 214611 - Web Inspector: Sources tab empty, sidebar nonfunctional
Summary: Web Inspector: Sources tab empty, sidebar nonfunctional
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: Safari 13
Hardware: All macOS 10.15
: P2 Normal
Assignee: BJ Burg
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-07-21 12:32 PDT by opendarwin
Modified: 2020-07-22 11:59 PDT (History)
5 users (show)

See Also:


Attachments
Screenshot (148.08 KB, image/png)
2020-07-21 12:33 PDT, opendarwin
no flags Details
Minimal test case (249 bytes, text/html)
2020-07-21 18:35 PDT, opendarwin
no flags Details
Proposed fix (2.92 KB, patch)
2020-07-22 10:14 PDT, BJ Burg
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description opendarwin 2020-07-21 12:32:44 PDT
Overview:
Under some circumstances, the Sources tab in broken in the Web Inspector. The tab is empty, and the left sidebar button doesn't do anything.

Steps to Reproduce:
1. Open Safari Preferences and set New windows open with: Empty Page
2. Open new window in Safari
3. Select "Inspect Element" from the contextual menu
4. Open https://www.cnn.com
5. Select "Sources" tab

Versions:
This happens with Safari Version 13.1.2 (14609.3.5.1.5) and Safari Technology Preview Release 108 (Safari 13.2, WebKit 14610.1.16.3) on macOS 10.14.6 (18G6020).

Additional Information:
If I inspect the web inspector itself using WebKitDebugDeveloperExtrasEnabled, I see the following errors in the web inspector console for Safari 13.1.2

[Error] TypeError: null is not an object (evaluating 'this._issueMessage.sourceCodeLocation.displayLineNumber')
	_updateTitles (Main.js:18996)
	IssueTreeElement (Main.js:18992:181)
	_addIssue (Main.js:24293)
	_addIssuesForSourceCode (Main.js:24307)
	_addResource (Main.js:24216:161)
	_addResourcesRecursivelyForFrame (Main.js:24218)
	_handleResourceGroupingModeChanged (Main.js:24416)
	SourcesNavigationSidebarPanel (Main.js:24079:100)
	navigationSidebarPanel (Main.js:11832)
	shown (Main.js:12038)
	prepareToShow (Main.js:2920)
	_showEntry (Main.js:16069)
	showBackForwardEntryForIndex (Main.js:16004)
	showContentView (Main.js:15999)
	_tabBarItemSelected (Main.js:9515)
	dispatch (Main.js:188:149)
	dispatchEventToListeners (Main.js:190)
	selectTabBarItem (Main.js:11050:117)
	_handleMouseDown (Main.js:11108)
	_handleMouseDown
[Error] TypeError: undefined is not an object (evaluating 'this.contentBrowser.currentContentView')
	(anonymous function) (Main.js:24194)

And similar for Safari Tech Preview 108:

[Error] TypeError: null is not an object (evaluating 'this._issueMessage.sourceCodeLocation.displayLineNumber')
	_updateTitles (Main.js:18958)
	IssueTreeElement (Main.js:18954:181)
	_addIssue (Main.js:24333)
	_addIssuesForSourceCode (Main.js:24347)
	_addResource (Main.js:24247:161)
	_addResourcesRecursivelyForFrame (Main.js:24249)
	_handleResourceGroupingModeChanged (Main.js:24455)
	SourcesNavigationSidebarPanel (Main.js:24094:100)
	navigationSidebarPanel (Main.js:11711)
	shown (Main.js:11916)
	prepareToShow (Main.js:2925)
	_showEntry (Main.js:16059)
	showBackForwardEntryForIndex (Main.js:15994)
	showContentView (Main.js:15989)
	_tabBarItemSelected (Main.js:9557)
	dispatch (Main.js:189:149)
	dispatchEventToListeners (Main.js:191)
	selectTabBarItem (Main.js:9355:117)
	_handleTabContainerMouseDown (Main.js:9423)
	_handleTabContainerMouseDown
[Error] TypeError: undefined is not an object (evaluating 'this.contentBrowser.currentContentView')
	(anonymous function) (Main.js:24225)
Comment 1 opendarwin 2020-07-21 12:33:24 PDT
Created attachment 404850 [details]
Screenshot
Comment 2 Radar WebKit Bug Importer 2020-07-21 12:48:05 PDT
<rdar://problem/65898051>
Comment 3 Greg Marriott 2020-07-21 13:03:02 PDT
Can you try with the latest Safari Technical Preview? I couldn't reproduce this in 109.
Comment 4 Greg Marriott 2020-07-21 13:03:52 PDT
*Technology... stupid autocorrect
Comment 5 opendarwin 2020-07-21 13:05:09 PDT
Unfortunately STP 109 is not available for macOS 10.14
Comment 6 Greg Marriott 2020-07-21 17:19:52 PDT
Can you try with the Safari 14 beta?
Comment 7 opendarwin 2020-07-21 18:35:34 PDT
Created attachment 404891 [details]
Minimal test case

This example reproduces the problem in Safari 13.1.2 on macOS 10.15.6
Comment 8 opendarwin 2020-07-21 18:42:28 PDT
I can't install the beta, but I found a reproduction case that works in the latest Safari on Catalina.

I debugged the web inspector and found that this._issueMessage had _text: "Failed to load resource: Could not connect to the server." From there, it was essentially a process of elimination.

The reason I was seeing the problem with cnn.com is that I have Little Snitch installed (on Mojave) and configured to block a bunch of advertising/tracking domains.

My reduced test case simply loads an iframe with a 404 src from example.org
Comment 9 Greg Marriott 2020-07-21 19:00:31 PDT
Nice. Repro achieved.
Comment 10 BJ Burg 2020-07-22 10:14:36 PDT
Created attachment 404936 [details]
Proposed fix

I'm still running a build to test this out myself, but this is the anticipated fix for the issue.
Comment 11 Devin Rousso 2020-07-22 10:23:32 PDT
Comment on attachment 404936 [details]
Proposed fix

View in context: https://bugs.webkit.org/attachment.cgi?id=404936&action=review

r=me, looks reasonable

> Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js:64
> +            var lineNumberLabel;

NIT: this can be `let` too :)

> Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js:70
> +            this.mainTitle = `${lineNumberLabel} ${this._issueMessage.text}`;

NIT: I personally prefer not using a template string for simple combinations like this, as it's harder to notice the space vs when it's explicitly done as `" "` with an addition
Comment 12 EWS 2020-07-22 11:59:50 PDT
Committed r264717: <https://trac.webkit.org/changeset/264717>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 404936 [details].