Consider using Chrome's new styles for Network tab

[cvan]

In a recent version of Chrome, they've redesigned the Developer Tools, including the Network tab:

It'd be neat if chromeHAR could start using those styles. I'd be willing to bet the styles would work better in Firefox too. It may not be a worthwhile enhancement, but it's worth considering.

[ericduran]

I've been thinking about this same thing. I say we should. I would like if we can keep with chrome as the idea behind the project is that is the same har viewer you're already used to.

[ericduran]

I would like to look at the new CSS if it's still as webkit/blink specific maybe it's time to throw it away and completely fix all browsers compatibility issues.

[paulirish]

Using the har viewer today and wishing it had the same UI as modern chrome devtools. :)

To contrast today's UI with @cvan's screenshot from last year:

[cvan]

@ericduran how did you exactly extract out the styles in the first place? did you just copy over the stylesheets from the Chromium source?

[cvan]

also relevant conversation: #63 (comment)

[paulirish]

@cvan thanks for the heads up. 63 has much of this discussion. I'm going to continue it here just ... because.. :)

I wanted to throw out an idea.. It's one potential alternative to updating and reforking the devtools frontend..

so..

• For no good reason DevTools can export HARs but not import them. We'd like to have Network Panel import HARs. (relevant discussion)
  • We already have drag-n-drop for Timeline and could adapt for Network.
  • Only remaining part is turning a HAR into NetworkRequest objects. (relevant: HARWriter.js and HAREntry.js)
• We recently added an ability to view a timeline recording off a URL. (e.g.)
  • We could do the same with HARs. Then viewing the har is a link away.. just send it to anyone.

Regardless, let me echo what i said over in #63 (comment) .. we're def interested in the features you want and figure we should just give them to everyone. I'd love to figure out a way for all the devtools users to benefit from this stuff.

[ericduran]

Yea, I would actually rather chrome just had support for importing a HAR file and viewing a HAR of a URL. It does make more sense to have this in devtools.

My original plan was to do it in devtools but this was easier. Ha.

I'll star those issues, see where I could jump in on.

[cvan]

@paulirish

1. In a hypothetical world, would the DevTools source code ever live in its own GitHub repo (à la devtools-docs and devtools-device-data)? (I found an unofficial mirror here.)
2. I was brainstorming a bit, but can you think of any decent ways to keep in sync the DevTools and chromeHAR (a future version of it, or a standalone "DevTools as a Single-Page App")?
3. Are there any current (or planned) efforts to remove the Chrome-specific dependencies in the DevTools (for example, chrome:// links, Chrome/WebKit-specific CSS)?

[paulirish]

In a hypothetical world, would the DevTools source code ever live in its own GitHub repo (à la devtools-docs and devtools-device-data)?

yeah here's my own manually updated mirror. :)
https://github.com/ChromeDevTools/devtools-frontend

I was brainstorming a bit, but can you think of any decent ways to keep in sync the DevTools and chromeHAR (a future version of it, or a standalone "DevTools as a Single-Page App")?

Yeah it seems quite doable with a touch of work. Stetho and React Native for instance use our frontend live.

Are there any current (or planned) efforts to remove the Chrome-specific dependencies in the DevTools (for example, chrome:// links, Chrome/WebKit-specific CSS)?

we don't have chrome:// URLs on the frontend. At this point i wouldnt expect much chrome-specific CSS.
However loading http://frontend.chrome-dev.tools/serve_rev/@191122/inspector.html in FF it has a hard time. (even after flipping dom.webcomponents.enabled to true).