Bug 169854 – Web Inspector: WebSockets: Time column should have a fixed width

• Component: Web Inspector
• Status: ASSIGNED

[Nikita Vasilyev]

I'd like to move away from using DataGrid for WebSocketContentView.

1. It doesn't allow to set a fixed width for a column. There are only two columns, and they don't need to be resizable.
2. It doesn't allow to select multiple rows.

I envision WebSocketContentView to be more like a console view and less like a DataGrid.

[Radar WebKit Bug Importer]

<rdar://problem/31132888>

[Nikita Vasilyev]

Created attachment 304884 [details]
Patch

[Nikita Vasilyev]

Created attachment 304885 [details]
[Image] With patch applied

[Blaze Burg]

(In reply to comment #0)
> I'd like to move away from using DataGrid for WebSocketContentView.
> 
> 1. It doesn't allow to set a fixed width for a column. There are only two
> columns, and they don't need to be resizable.

DataGrid also supports searching, hiding columns, sorting, reordering, restoring selections on reload/reopen, and lots of other things. I don't think your preference for not resizing is significant enough to make another leaf view class that must address most of the same things. If preventing resizing is critical to the functionality, then you should modify DataGrid to add an option for making columns not resizable. This is also a bad idea because localization can increase column widths by 20-50% depending on the language.

> 2. It doesn't allow to select multiple rows.

This is a longstanding bug and we need someone to fix it for many other reasons.
 
> I envision WebSocketContentView to be more like a console view and less like
> a DataGrid.

[Blaze Burg]

Comment on attachment 304884 [details]
Patch

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

> Source/WebInspectorUI/ChangeLog:9
> +        Replace DataGrid with a WebSocketLogView, which uses an HTML table directly.

The rationale needs to be in the changelog as well as the bug. It could change over time as the patch is worked on.

> Source/WebInspectorUI/UserInterface/Views/WebSocketLogView.cssSource/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js:27
> +    border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.1);

Does this really need to use alpha?

> Source/WebInspectorUI/UserInterface/Views/WebSocketLogView.cssSource/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js:31
> +    background-color: hsl(80, 85%, 92%);

You should really use variables to name colors. I have no idea what color this is.

> Source/WebInspectorUI/UserInterface/Views/WebSocketLogView.cssSource/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js:48
> +    padding: 4px 0 4px 0;

Use shorthand.

> Source/WebInspectorUI/UserInterface/Views/WebSocketLogView.cssSource/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js:53
> +    padding-right: 6px;

Use a variable.

[Nikita Vasilyev]

Created attachment 313013 [details]
[Image] Truncated data in network

I've tried implementing a DataGrid that is either content aware or at least accepts min-width property for specified column.

This way problematic with the current DataGrid resizing logic. Specifically, column width is stored as a percentage value:

    <colgroup>
        <col style="width: 8.098987626546682%;">
        <col style="width: 4.83689538807649%;">
        ...
    </colgroup>

I think, eventually, we want to be able to set min-width for columns. We can't do that if we use <col> elements, min-width is simply doesn't work on <col>.

Being able to set min-width would be very beneficial for Network and Timeline tabs, as currently a lot data there is truncated and unreadable (see the attached image).

It's a broader task, but I think it's worth doing.