search

zazi1991i / harviewer

Automatically exported from code.google.com/p/harviewer
0 stars 0 forks source link

API enhancement: make pies and timeline chart show onload #36

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
Another feature request Honza:

We would find very useful if there was (again) some exposed function/object 
that will allow us to instruct the har viewer to always open the timeline and 
pies charts when the har viewer loads. Also the ability to remove the toggle 
buttons as well or even the whole buttonbar there and perhaps also expose their 
functions calls too (not needed) ?

Thanks

Original issue reported on code.google.com by phobouli...@gmail.com on 23 Feb 2011 at 9:59

GoogleCodeExporter commented 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

GoogleCodeExporter commented 8 years ago 
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

GoogleCodeExporter commented 8 years ago 
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

GoogleCodeExporter commented 8 years ago 
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

GoogleCodeExporter commented 8 years ago 
> 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

GoogleCodeExporter commented 8 years ago 
test, please ignore

Original comment by phobouli...@gmail.com on 24 Feb 2011 at 2:19

GoogleCodeExporter commented 8 years ago 
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

GoogleCodeExporter commented 8 years ago 
> 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

GoogleCodeExporter commented 8 years ago 
> 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

GoogleCodeExporter commented 8 years ago 
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

GoogleCodeExporter commented 8 years ago 
Test committed at R248

Original comment by odva...@gmail.com on 12 Mar 2011 at 8:34

GoogleCodeExporter commented 8 years ago 
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