Bug 214611

Summary:

Web Inspector: Sources tab empty, sidebar nonfunctional

Product:

WebKit

Reporter:

Jeff Johnson <opendarwin>

Component:

Web Inspector

Assignee:

BJ Burg <bburg>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bburg, greggy, hi, inspector-bugzilla-changes, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 13

Hardware:

All

OS:

macOS 10.15

Attachments:

Description	Flags
Screenshot	none
Minimal test case	none
Proposed fix	none

Description Jeff Johnson 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 Jeff Johnson 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 Jeff Johnson 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 Jeff Johnson 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 Jeff Johnson 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].