Closed GoogleCodeExporter closed 8 years ago
In order to implement these APIs properly, can you please describe a bit how
you integrated HAR Viewer with your application?
Inclusion of HAR Viewer on the index.php page looks as follows (simplified):
<div id="content" version="@VERSION@"></div>
<script src="scripts/requireplugins-jquery-1.4.2.js"></script>
<script>require(["harViewer"]);</script>
The last line is important - it loads the main harViewer module with all
dependencies (other modules). The Viewer UI is inserted into the 'content'
element.
When the whole viewer is initialized 'onViewerInit' event is fired on the
'content' element
http://code.google.com/p/harviewer/source/browse/trunk/webapp/scripts/harViewer.
js#128
So, one option is to handle the event and use the passed parameter 'harView' to
call following APIs:
harView.appendTab(tab);
harView.removeTab(tabId);
harView.getTab(tabId);
The toolbar on Preview tab could be customized as follows:
var previewTab = harView.getTab("Preview");
previewTab.toolbar.hide();
previewTab.toolbar.addButton();
previewTab.toolbar.removeButton();
previewTab.showTimeline(true);
previewTab.showStats(true);
Note that visibility of the timeline and stats sections can be also controlled
by cookies.
http://code.google.com/p/harviewer/wiki/Customization
I am yet thinking about another event that could be fired before the viewer is
constructed: onViewerPreInit
In the code it would be something like as follows:
var content = document.getElementById("content");
var harView = new HarView();
Lib.fireEvent(content, "onViewerPreInit", [harView]);
harView.initialize(content); // this is now called in the HarView constructor.
Lib.fireEvent(content, "onViewerInit", [harView]);
This file/module is the one that is loaded from index.php, it is responsible
for entire initialization.
http://code.google.com/p/harviewer/source/browse/trunk/webapp/scripts/harViewer.
js
Do you have any further tips how the API should look like?
Honza
Original comment by odva...@gmail.com
on 23 Feb 2011 at 11:51
Well we used an iframe with an src that points to a very simple page
that loads the har viewer. Also in that url we used the path parameter
to instruct the har viewer where to find the HAR file. Which is fine.
Our page looks very similar yes. I took the code from one of your
example pages (preview.php ?? cant remember)
Yes
Cool, then I can attach some code there. Nice.
Is the harView a global object ? I could not find any exposed objects in
version 2 actually.
The above example is fine btw.
addButton() ? does that work. I think we can use that.
Nice. Completely missed this.
Perhaps this would be better since I would like to instruct the har
viewer what to show and what not to show before it starts rendering.
Cool, this is what I meant by exposed objects/classes. So I can use this
already ?
This is perfect I think.
Original comment by phobouli...@gmail.com
on 24 Feb 2011 at 2:09
Hmm the quoted text is missing from the above comment. Honza can you make heads
or tails out of this ?
Original comment by phobouli...@gmail.com
on 24 Feb 2011 at 2:10
Huh, not sure what did you replied to. Can you please post again?
Honza
Original comment by odva...@gmail.com
on 24 Feb 2011 at 2:16
> Our page looks very similar yes. I took the code from one of your
> example pages (preview.php ?? cant remember)
Can you attach source of the page so, I can see how you use the HAR Viewer?
Honza
Original comment by odva...@gmail.com
on 24 Feb 2011 at 2:16
test, please ignore
Original comment by phobouli...@gmail.com
on 24 Feb 2011 at 2:19
Just to note, I am appending the ">" characters manually to my responses.
Honza
Original comment by odva...@gmail.com
on 24 Feb 2011 at 2:26
> In order to implement these APIs properly, can you please describe a bit how
you integrated HAR Viewer with your application?
>
Well we used an iframe with an src that points to a very simple page
that loads the har viewer. Also in that url we used the path parameter
to instruct the har viewer where to find the HAR file. Which is fine.
Here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Loads.in waterfall</title>
<link rel="stylesheet" href="/assets/har2/harViewer.css" type="text/css"/>
<style type="text/css">
(some extra css here to make the tabs disappear)
</style>
</head>
<body style="margin:0px">
<div class="har-viewer-top-section">
<div style="text-align:right;">Powered by the <a href="http://code.google.com/p/harviewer/" target="_blank" class="blue">HAR Viewer</a></div>
</div>
<div id="content" version="2.0.5"></div>
<script src="/assets/har2/requireplugins-jquery-1.4.2.js" type="text/javascript"</script>
<script>require(["harViewer"]);</script>
</body>
</html>
> Inclusion of HAR Viewer on the index.php page looks as follows (simplified):
>
> <div id="content" version="@VERSION@"></div>
> <script src="scripts/requireplugins-jquery-1.4.2.js"></script>
> <script>require(["harViewer"]);</script>
>
Our page looks very similar yes. I took the code from one of your
example pages (preview.php ?? cant remember) Look above
> The last line is important - it loads the main harViewer module with all
dependencies (other modules). The Viewer UI is inserted into the 'content'
element.
>
Yes
> When the whole viewer is initialized 'onViewerInit' event is fired on the
'content' element
>
http://code.google.com/p/harviewer/source/browse/trunk/webapp/scripts/harViewer.
js#128
>
Cool, then I can attach some code there. Nice.
> So, one option is to handle the event and use the passed parameter 'harView'
to call following APIs:
>
> harView.appendTab(tab);
> harView.removeTab(tabId);
> harView.getTab(tabId);
Is the harView a global object ? I could not find any exposed objects in
version 2 actually.
>
> The toolbar on Preview tab could be customized as follows:
>
> var previewTab = harView.getTab("Preview");
> previewTab.toolbar.hide();
> previewTab.toolbar.addButton();
addButton() ? does that work. I think we can use that.
> previewTab.toolbar.removeButton();
>
> previewTab.showTimeline(true);
> previewTab.showStats(true);
>
> Note that visibility of the timeline and stats sections can be also
controlled by cookies.
> http://code.google.com/p/harviewer/wiki/Customization
>
Nice. Completely missed this.
> I am yet thinking about another event that could be fired before the viewer
is constructed: onViewerPreInit
>
Perhaps this would be better since I would like to instruct the har
viewer what to show and what not to show before it starts rendering.
> In the code it would be something like as follows:
>
> var content = document.getElementById("content");
>
> var harView = new HarView();
> Lib.fireEvent(content, "onViewerPreInit", [harView]);
> harView.initialize(content); // this is now called in the HarView constructor.
> Lib.fireEvent(content, "onViewerInit", [harView]);
>
Cool, this is what I meant by exposed objects/classes. So I can use this
already ?
> This file/module is the one that is loaded from index.php, it is responsible
for entire initialization.
>
http://code.google.com/p/harviewer/source/browse/trunk/webapp/scripts/harViewer.
js
>
> Do you have any further tips how the API should look like?
>
> Honza
This is perfect I think.
Also one more request. The downloaddify icon should also be hidden/shown.
Should I make a new issue for this ?
Original comment by phobouli...@gmail.com
on 24 Feb 2011 at 2:39
> Also one more request. The downloaddify icon should also be hidden/shown.
> Should I make a new issue for this ?
Yes please,
Honza
Original comment by odva...@gmail.com
on 2 Mar 2011 at 4:08
Patch committed at R208
Read documentation here:
http://code.google.com/p/harviewer/wiki/Customization
Please let me know what you think!
Honza
Original comment by odva...@gmail.com
on 6 Mar 2011 at 12:08
Test committed at R248
Original comment by odva...@gmail.com
on 12 Mar 2011 at 8:34
This is one of 7 issues fixed in HAR Viewer 2.0.8
You can check online:
http://www.softwareishard.com/har/viewer/
Or download a distribution package here:
http://code.google.com/p/harviewer/downloads/list
Please verify
Thanks for the report!
Honza
Original comment by odva...@gmail.com
on 13 Mar 2011 at 8:15
Original issue reported on code.google.com by
phobouli...@gmail.com
on 23 Feb 2011 at 9:59