Saw this appear in Nightly — it's looking great! Some polish items: (I know this is a lot 😅 some of these things weren't in the mockup for this UI) - Background for the whole section should be white - Font size should be 12px (this is a change we're making for all of the Network panel) - Let's make the method clickable for expanding so that it's not just the arrow - As discussed in chat, we can change the Referrer to Referrer Policy (and make that first column a bit larger) - Ah, I forgot to add this to all the mockups, but Harald and I were talking about moving Address into the Query section. Could we put it at the end? (see [this mockup](https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-table-redesign-V?node-id=695%3A30)) - Sometimes when clicking in the expanded URL section, the dotted focus ring appears - would be great to remove that. - The Status code should be using the non-monospace font, and doesn't need the extra spacing between 200 and OK Alignment: (These CSS suggestions are just what I quickly did in browser toolbox to get the the look I wanted, so it might be better done in a different way :)) - Could we remove the 1px padding from `.network-monitor .tabpanel-summary-container`? - Spacing for element `.network-monitor .headers-overview .summary` works better: `padding: 6px 16px 2px;` - To line up the top part, we can change `.treeTable .treeRow .treeIcon` to have `margin-inline: 0 1px;` and change `.url-preview` to `padding: 6px 3px;` - Change `.url-preview .horizontal-splitter` to have `margin: 6px 0px 6px 16px` - The key-value pairs need 3px more vertical spacing between them, and there should also be 3px more space below the method when in expanded mode [This mockup](https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-table-redesign-V?node-id=540%3A210) should reflect all the latest changes. Let me know if you have any questions!
Bug 1639751 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
Saw this appear in Nightly — it's looking great! Some polish items: (I know this is a lot 😅 some of these things weren't in the mockup for this UI) - Background for the whole section should be white - Font size should be 12px (this is a change we're making for all of the Network panel) - Let's make the method clickable for expanding so that it's not just the arrow - As discussed in chat, we can change the Referrer to Referrer Policy (and make that first column a bit larger) - Ah, I forgot to add this to all the mockups, but Harald and I were talking about moving Address into the Query section. Could we put it at the end? (see [this mockup](https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-table-redesign-V?node-id=695%3A30)) - Sometimes when clicking in the expanded URL section, the dotted focus ring appears - would be great to remove that. - The Status code should be using the non-monospace font, and doesn't need the extra spacing between 200 and OK Alignment: (These CSS suggestions are just what I quickly did in browser toolbox to get the the look I wanted, so the exact CSS might be better done differently :)) - Could we remove the 1px padding from `.network-monitor .tabpanel-summary-container`? - Spacing for element `.network-monitor .headers-overview .summary` works better: `padding: 6px 16px 2px;` - To line up the top part, we can change `.treeTable .treeRow .treeIcon` to have `margin-inline: 0 1px;` and change `.url-preview` to `padding: 6px 3px;` - Change `.url-preview .horizontal-splitter` to have `margin: 6px 0px 6px 16px` - The key-value pairs need 3px more vertical spacing between them, and there should also be 3px more space below the method when in expanded mode [This mockup](https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-table-redesign-V?node-id=540%3A210) should reflect all the latest changes. Let me know if you have any questions!