Consider using Chrome's new styles for Network tab about chromehar HOT 9 OPEN

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.

from chromehar.

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.

from chromehar.

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:

from chromehar.

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

from chromehar.

also relevant conversation: #63 (comment)

from chromehar.

@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.

from chromehar.

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.

from chromehar.

@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)?

from chromehar.

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).

from chromehar.