Display Transit EDN in Network Panel's request preview

[darwin]

Similar to JSON display.

[gabrielmaldi]

This would be great!

[p-himik]

@darwin I just copied here a reformatted version of what you wrote on Slack to preserve it:

Just briefly looked at the devtools sources, web socket data frames and normal network request previews are handled differently.
Web socket frame can be either text or binary and devtools creates corresponding view for it (in case of text type, it creates JSON view), no detection of mime type or anything like that.
In network requests it tries to look at response headers or request headers and then interpret the mime type.

dirac/resources/unpacked/devtools/front_end/network/ResourceWebSocketFrameView.js

Lines 179 to 197 in cff8e6c

	async _onFrameSelected(event) {
	this._currentSelectedNode = /** @type {!Network.ResourceWebSocketFrameNode} */ (event.data);
	const content = this._currentSelectedNode.dataText();
	const binaryView = this._currentSelectedNode.binaryView();
	if (binaryView) {
	this._splitWidget.setSidebarWidget(binaryView);
	return;
	}
	const jsonView = await SourceFrame.JSONView.createView(content);
	if (jsonView) {
	this._splitWidget.setSidebarWidget(jsonView);
	return;
	}
	this._splitWidget.setSidebarWidget(new SourceFrame.ResourceSourceFrame(
	Common.StaticContentProvider.fromString(this._request.url(), Common.resourceTypes.WebSocket, content)));
	}

Actually if JSON view cannot be provided, it falls back to Common.resourceTypes.WebSocket type, whatever it is.
Here seems to be the logic for normal network requests:

dirac/resources/unpacked/devtools/front_end/network/RequestResponseView.js

Lines 75 to 91 in cff8e6c

	static async sourceViewForRequest(request) {
	let sourceView = request[Network.RequestResponseView._sourceViewSymbol];
	if (sourceView !== undefined) {
	return sourceView;
	}
	const contentData = await request.contentData();
	if (!Network.RequestResponseView._hasTextContent(request, contentData)) {
	request[Network.RequestResponseView._sourceViewSymbol] = null;
	return null;
	}
	const highlighterType = request.resourceType().canonicalMimeType() || request.mimeType;
	sourceView = SourceFrame.ResourceSourceFrame.createSearchableView(request, highlighterType);
	request[Network.RequestResponseView._sourceViewSymbol] = sourceView;
	return sourceView;
	}

We would have to implement a new SourceFrame.ResourceSourceFrame type and detect packed transit there.

[p-himik]

To add a suggestion - maybe it would be worth it to not detect anything but rather to allow users to select what the actual mime type is. Although I'm not sure it that would be possible via the UI, but I'm perfectly fine with having to specify a config option for it. Especially if it would support any custom type (e.g. transit allows extensions - no level of detection could handle that).