Permalink
Browse files

added waterfall page for network requests

  • Loading branch information...
1 parent af12c6f commit 3faed45d99548a8029455f5347e66f779bf97aed @moscartong moscartong committed Feb 20, 2012
@@ -0,0 +1,2 @@
+[Paths]
+Plugins = PlugIns
View
@@ -0,0 +1 @@
+RythemTimes
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+ <component name="NewModuleRootManager">
+ <content url="file://$MODULE_DIR$" />
+ <orderEntry type="inheritedJdk" />
+ <orderEntry type="sourceFolder" forTests="false" />
+ </component>
+</module>
+
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="Encoding" useUTFGuessing="true" native2AsciiForPropertiesFiles="false" />
+</project>
+
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectResources">
+ <default-html-doctype>http://www.w3.org/1999/xhtml</default-html-doctype>
+ </component>
+ <component name="ProjectRootManager" version="2" />
+</project>
+
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectModuleManager">
+ <modules>
+ <module fileurl="file://$PROJECT_DIR$/.idea/RythemTimes.iml" filepath="$PROJECT_DIR$/.idea/RythemTimes.iml" />
+ </modules>
+ </component>
+</project>
+
@@ -0,0 +1,5 @@
+<component name="DependencyValidationManager">
+ <state>
+ <option name="SKIP_IMPORT_STATEMENTS" value="false" />
+ </state>
+</component>
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="VcsDirectoryMappings">
+ <mapping directory="" vcs="" />
+ </component>
+</project>
+

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,54 @@
+*{
+ padding: 0;
+ margin: 0;
+ font-size: 10px;
+}
+.hgroup{
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+}
+.vgroup{
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+}
+.cgroup{
+ display: -webkit-box;
+ -webkit-box-align: center;
+ -webkit-box-pack: center;
+}
+.spacer{
+ -webkit-box-flex: 1;
+}
+
+#socketGroups{
+
+}
+.socket{
+ border-bottom: dashed 1px #CCC;
+}
+.socket:last-child{
+ border-bottom: none;
+}
+.socket > header{
+ padding: 10px;
+ border-right: dashed 1px #CCC;
+}
+.conns{
+ padding: 10px;
+}
+.conn{
+ padding: 6px;
+ margin: 0 6px;
+ border: 1px solid #CCC;
+ -webkit-border-radius: 6px;
+}
+.conn > .name{
+ font-size: 12px;
+ font-weight: bold;
+}
+.conn > .host{
+ color: #999;
+}
+.conn > .detail{
+ color: #999;
+}
View
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Rythem Times</title>
+ <link rel="stylesheet" type="text/css" href="css/times.css">
+</head>
+<body>
+ <div id="socketGroups" class="vgroup">
+ <!--
+ <article class="socket hgroup" id="socket-xx">
+ <header>Socket ID</header>
+ <div class="conns hgroup">
+ <div class="conn" id="conn-xx">
+ <div class="name">conn name</div>
+ <div class="host">www.xxx.com</div>
+ <div class="detail">GET 200</div>
+ </div>
+ </div>
+ </article>
+ -->
+ </div>
+ <script src="js/times.js"></script>
+</body>
+</html>
View
@@ -0,0 +1,216 @@
+(function(){
+
+ /**
+ * Connection
+ * @param {uint} id
+ * @param {String} socketID
+ */
+ var Connection = function(id, socketID){
+ this.id = id;
+ this.socketID = socketID;
+ };
+ Connection.prototype = {
+ /**
+ * set request header
+ * @param {String} header
+ */
+ setRequestHeader: function(header){
+ this.requestHeader = header;
+ //TODO parse the request header
+ return this;
+ },
+ /**
+ * set response header
+ * @param {String} header
+ */
+ setResponseHeader: function(header){
+ this.responseHeader = header;
+ return this;
+ },
+ /**
+ * set request start time
+ * @param {int} time
+ */
+ setStartTime: function(time){
+ this.startTime = time;
+ if(time > this.responseStartTime){
+ this.setResponseStartTime(time);
+ this.setResponseFinishTime(time);
+ }
+ return this;
+ },
+ /**
+ * set response start time(when you receive the first byte of the response)
+ * @param {int} time
+ */
+ setResponseStartTime: function(time){
+ //init startTime if it's not yet set
+ if(!this.startTime){
+ this.setStartTime(time);
+ }
+ //responseStartTime must not smaller than startTime,
+ //and must not bigger than responseEndTime
+ if(time < this.startTime){
+ time = this.startTime;
+ }
+ if(time > this.responseFinishTime){
+ this.setResponseFinishTime(time);
+ }
+ this.responseStartTime = time;
+ return this;
+ },
+ /**
+ * set response finish time(when you received the complete response)
+ * @param {int} time
+ */
+ setResponseFinishTime: function(time){
+ //init starTime and responseStartTime if they are not yet set
+ if(!this.responseStartTime){
+ this.setResponseStartTime(time);
+ }
+ //responseEndTime must not smaller than responseStartTime
+ if(this.responseStartTime > time) time = this.responseStartTime;
+ this.responseFinishTime = time;
+ return this;
+ },
+ getFullUrl: function(){
+ return 'www.???.com';
+ },
+ getRequestName: function(){
+ return this.id.toString();
+ },
+ getRequestHost: function(){
+ return 'www.???.com';
+ },
+ getRequestMethod: function(){
+ return 'GET';
+ },
+ getResponseStatus: function(){
+ return '0';
+ },
+ getStartTime: function(){
+ return this.startTime
+ },
+ getResponseStartTime: function(){
+ return this.responseStartTime
+ },
+ getResponseFinishTime: function(){
+ return this.responseFinishTime
+ },
+ getWaitTime: function(){
+ return this.responseStartTime - this.startTime;
+ },
+ getResponseTime: function(){
+ return this.responseFinishTime - this.responseStartTime;
+ },
+ getSessionTime: function(){
+ return this.responseFinishTime - this.startTime;
+ },
+ toString: function(){
+ return JSON.stringify({
+ "id": this.id,
+ "socketID": this.socketID,
+ "startTime": this.getStartTime(),
+ "responseStartTime": this.getResponseStartTime(),
+ "responseFinishTime": this.getResponseFinishTime(),
+ "waitTime": this.getWaitTime(),
+ "responseTime": this.getResponseTime(),
+ "sessionTime": this.getSessionTime()
+ });
+ }
+ };
+ Connection.sockets = {};
+ Connection.conns = {};
+ /**
+ * create a new connection instance, or return an existing one
+ * @param {uint} id
+ * @param {String} [socketID=undefined]
+ */
+ Connection.get = function(id, socketID){
+ var conn;
+ if(Connection.conns[id]){
+ conn = Connection.conns[id];
+ }
+ else{
+ conn = new Connection(id, socketID);
+ if(!Connection.sockets[socketID]){
+ Connection.sockets[socketID] = [];
+ }
+ Connection.sockets[socketID].push(conn);
+ Connection.conns[id] = conn;
+ }
+ return conn;
+ };
+ Connection.setRequestHeader = function(id, header){
+ return Connection.get(id).setRequestHeader(header);
+ };
+ Connection.setResponseHeader = function(id, header){
+ return Connection.get(id).setResponseHeader(header);
+ };
+ Connection.setStartTime = function(id, time){
+ return Connection.get(id).setStartTime(time);
+ };
+ Connection.setResponseStartTime = function(id, time){
+ return Connection.get(id).setResponseStartTime(time);
+ };
+ Connection.setResponseFinishTime = function(id, time){
+ return Connection.get(id).setResponseFinishTime(time);
+ };
+
+
+ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ var socketGroupsEl = document.getElementById('socketGroups');
+
+ function getSocketUI(socketID){
+ var el = document.getElementById('socket-' + socketID);
+ if(el){
+ return el;
+ }
+ else{
+ var group = document.createElement('article');
+ group.id = 'socket-' + socketID;
+ group.className = 'socket hgroup';
+ group.innerHTML = '<header>' + socketID + '</header><div class="conns hgroup"></div>';
+ socketGroupsEl.appendChild(group);
+ return group;
+ }
+ }
+
+ function updateConnUI(conn){
+ var el = document.getElementById('conn-' + conn.id);
+ if(el){
+ el.querySelector('.name').textContent = conn.getRequestName();
+ el.querySelector('.host').textContent = conn.getRequestHost();
+ el.querySelector('.detail').textContent = conn.getRequestMethod() + ' ' + conn.getResponseStatus();
+ return el;
+ }
+ else{
+ var item = document.createElement('div');
+ item.id = 'conn-' + conn.id;
+ item.className = 'conn';
+ item.innerHTML = '\
+ <div class="name">' + conn.getRequestName() + '</div>\
+ <div class="host">' + conn.getRequestHost() + '</div>\
+ <div class="detail">' + conn.getRequestMethod() + ' ' + conn.getResponseStatus() + '</div> ';
+ var socket = getSocketUI(conn.socketID);
+ socket.querySelector('.conns').appendChild(item);
+ return item;
+ }
+ }
+
+ function main(){
+ var c1 = Connection.get(1, 'socket a');
+ var c2 = Connection.get(2, 'socket a');
+ var c3 = Connection.get(3, 'socket b');
+ var c4 = Connection.get(4, 'socket a');
+ updateConnUI(c1);
+ updateConnUI(c2);
+ updateConnUI(c3);
+ updateConnUI(c4);
+ }
+
+ window.Connection = Connection;
+ document.addEventListener('DOMContentLoaded', main);
+
+})();
Oops, something went wrong.

0 comments on commit 3faed45

Please sign in to comment.