20f8df1291
data tables are going to need some work yet, but the other stuff seems to be working 100%
331 lines
16 KiB
HTML
331 lines
16 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
<title>ProfileViewer: Making Use of the ProfilerViewer API while Profiling the Menu Control</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/profilerviewer/assets/skins/sam/profilerviewer.css">
|
|
|
|
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
|
<script type="text/javascript" src="../../build/container/container-min.js"></script>
|
|
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
|
<script type="text/javascript" src="../../build/profiler/profiler-min.js"></script>
|
|
<script type="text/javascript" src="../../build/profilerviewer/profilerviewer-beta-min.js"></script>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
margin:1em;
|
|
}
|
|
|
|
.yui-pv-null {
|
|
margin:2.1em;
|
|
}
|
|
|
|
div#profiler {
|
|
width:300px;
|
|
position:absolute;
|
|
left:450px;
|
|
top:10px;
|
|
}
|
|
|
|
div#profiler .hd {
|
|
cursor:move;
|
|
}
|
|
|
|
div.yuimenu {
|
|
position: relative;
|
|
visibility: hidden;
|
|
top:300px;
|
|
z-index:10001;
|
|
}
|
|
|
|
|
|
div.yuimenu .bd {
|
|
zoom: normal;
|
|
}
|
|
|
|
#menutoggle {
|
|
position:absolute;
|
|
top:10px;
|
|
left:10px;
|
|
}
|
|
|
|
#container {
|
|
position:relative;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
<h1>Using the ProfilerViewer API while Profiling the Menu Control</h1>
|
|
|
|
<p>In this example, we explore the ues of the <a href="http://developer.yahoo.com/yui/profilerviewer/">ProfilerViewer</a> API to customize the console slightly while taking a thorough look at the performance profile of the <a href="http://developer.yahoo.com/yui/menu/">YUI Menu Control</a>. Customizations include:</p>
|
|
<ol>
|
|
<li>The console launcher is reduced in size; </li>
|
|
<li>The console is draggable via the header;</li>
|
|
<li>The height of the table and the number of functions profiled in the chart are increased;</li>
|
|
<li>A filter is used to show only functions that have been called at least once.</li>
|
|
</ol>
|
|
<p>Use the button below to show the Menu system, then launch ProfilerViewer to explore the detailed performance profile of Menu and its subcomponents. <strong>Note:</strong> Because ProfilerViewer uses the same dependencies as Menu, only the first "view" in ProfilerViewer will be isolated to Menu performance data. After the first view, "Refresh Data" actions will begin showing performance information (on the Dom Collection, for example) reflecting both Menu's usage and ProfilerViewer's usage of that component.</p>
|
|
|
|
<div id="container">
|
|
<div id="profiler"></div>
|
|
<button id="menutoggle" type="button">Show Menu</button>
|
|
</div>
|
|
|
|
<!--BEGIN MARKUP FOR PROGRESSIVELY ENHANCED MENU CONTROL-->
|
|
|
|
|
|
<div id="productsandservices" class="yuimenu">
|
|
<div class="bd">
|
|
<ul class="first-of-type">
|
|
<li class="yuimenuitem">
|
|
|
|
<a class="yuimenuitemlabel" href="#communication">Communication</a>
|
|
|
|
<div id="communication" class="yuimenu">
|
|
<div class="bd">
|
|
<ul>
|
|
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">360°</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://alerts.yahoo.com">Alerts</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://avatars.yahoo.com">Avatars</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.com">Groups</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
|
<li class="yuimenuitem">
|
|
|
|
|
|
<a class="yuimenuitemlabel" href="#pim">PIM</a>
|
|
|
|
<div id="pim" class="yuimenu">
|
|
<div class="bd">
|
|
<ul class="first-of-type">
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
|
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://members.yahoo.com">Member Directory</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.com">Messenger</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mobile.yahoo.com">Mobile</a></li>
|
|
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="yuimenuitem">
|
|
|
|
<a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Shopping</a>
|
|
|
|
<div id="shopping" class="yuimenu">
|
|
|
|
<div class="bd">
|
|
<ul>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://autos.yahoo.com">Autos</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://classifieds.yahoo.com">Classifieds</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
|
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://realestate.yahoo.com">Real Estate</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://wallet.yahoo.com">Wallet</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://yp.yahoo.com">Yellow Pages</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="yuimenuitem">
|
|
|
|
<a class="yuimenuitemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
|
|
|
|
<div id="entertainment" class="yuimenu">
|
|
<div class="bd">
|
|
<ul>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://games.yahoo.com">Games</a></li>
|
|
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.yahooligans.com">Kids</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com">Music</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://movies.yahoo.com">Movies</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com/launchcast">Radio</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://tv.yahoo.com">TV</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="yuimenuitem">
|
|
|
|
<a class="yuimenuitemlabel" href="#information">Information</a>
|
|
|
|
<div id="information" class="yuimenu">
|
|
<div class="bd">
|
|
<ul>
|
|
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://downloads.yahoo.com">Downloads</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://finance.yahoo.com">Finance</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://health.yahoo.com">Health</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.com">Local</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.com">Maps & Directions</a></li>
|
|
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://my.yahoo.com">My Yahoo!</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://news.yahoo.com">News</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://search.yahoo.com">Search</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
|
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://weather.yahoo.com">Weather</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!--END MARKUP FOR PROGRESSIVELY ENHANCED MENU CONTROL-->
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
// Instantiate and render the menu when it is available in the DOM
|
|
YAHOO.util.Event.onContentReady("productsandservices", function () {
|
|
|
|
// To fully profile the Menu, we want to register all the Menu
|
|
// and MenuItem constructors involved in Menu creation; for the
|
|
// purposes of this example, we'll also profile Menu's use
|
|
// of core YUI components like the Dom Collection and the
|
|
// Event Utility:
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Menu");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuItem");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuManager");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.util.Config");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Module");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Overlay");
|
|
YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom", true);
|
|
YAHOO.tool.Profiler.registerObject("YAHOO.util.Event", true);
|
|
|
|
// Instantiate ProfilerViewer, using its API to customize it a bit:
|
|
var pv = new YAHOO.widget.ProfilerViewer("profiler", {
|
|
base: "../../build/",
|
|
visible: false, //default is false; this means only the
|
|
//ProfilerViewer launchbar will be displayed
|
|
//on initial render, and the rest of the console
|
|
//(including the DataTable and Chart) won't
|
|
//be loaded and rendered until they're requested.
|
|
//here, we're going to filter the displayed functions
|
|
//and only show those that have been called at least once:
|
|
filter: function(o) {
|
|
return (o.calls > 0);
|
|
},
|
|
showChart: true, //default is true
|
|
//the chart can be hidden entirely by setting showChart to
|
|
//false; you can also control the number of functions
|
|
//measured in the chart to expand or reduce the real estate
|
|
//it takes up on the page:
|
|
maxChartFunctions:8,
|
|
tableHeight:"25em", //default: 15em
|
|
swfUrl:"../../build/charts/assets/charts.swf"
|
|
});
|
|
|
|
//Just to make the instance publicly accessible via the console:
|
|
YAHOO.example.pv = pv;
|
|
|
|
//You can subscribe to "interesting moments" in the ProfilerViewer
|
|
//just as you can with any other YUI component. Here, we'll use
|
|
//the visibleChange event that accompanies any change to the PV
|
|
//console's "visible" attribute. When made visible, we'll expand
|
|
//the console to full width; when it's minimized, we'll reduce the
|
|
//width of the launcher so that it takes up less screen real
|
|
//estate:
|
|
pv.subscribe("beforeVisibleChange", function(o) {
|
|
|
|
//"this" is the ProfilerViewer instance;
|
|
//this.get("element") is the top-level node containing
|
|
//the ProfilerViewer console.
|
|
var el = this.get("element");
|
|
|
|
//In this handler, the "visible" config property is
|
|
//changing. If the new value is "true", the console
|
|
//is becoming visible, so we'll make it wide. If the
|
|
//new value is false, we'll make the launch bar skinny.
|
|
var width = (o.newValue) ? "950px" : "300px";
|
|
YAHOO.util.Dom.setStyle(el, "width", width);
|
|
});
|
|
|
|
//In our testing, Opera sometimes fails to repaint the screen
|
|
//on this example, leaving part of Flash chart showing. This
|
|
//style jog forces a repaint. It is not needed in every
|
|
//instance and could probably be targeted just at Opera
|
|
//using the YAHOO.env information:
|
|
pv.subscribe("visibleChange", function(o) {
|
|
setTimeout(function() {
|
|
YAHOO.util.Dom.addClass(document.body, "yui-pv-null");
|
|
YAHOO.util.Dom.removeClass(document.body, "yui-pv-null");
|
|
}, 1000);
|
|
});
|
|
|
|
//Here, we'll use Drag and Drop to make the ProfilerViewer
|
|
//console draggable.
|
|
var DD = new YAHOO.util.DD("profiler");
|
|
|
|
//ProfilerViewer's API gives you access to the key container
|
|
//elements in the console. Here we'll use access to the
|
|
//header element to make it a drag handle.
|
|
pv.getHeadEl().id = "profilerHead";
|
|
DD.setHandleElId("profilerHead");
|
|
|
|
//The Buttons in the head should not be valid drag handles;
|
|
//they are comprised of anchor elements, which DD allows us
|
|
//to disclude as handles.
|
|
DD.addInvalidHandleType("a");
|
|
|
|
//Drag and Drop performs better when you use the dragOnly
|
|
//setting for elements that can be moved but that don't
|
|
//have any DD interactions with other page elements:
|
|
DD.dragOnly = true;
|
|
|
|
|
|
// Instantiate the menu and corresponding submenus. The first argument passed
|
|
// to the constructor is the id of the element in the DOM that represents
|
|
// the menu; the second is an object literal representing a set of
|
|
// configuration properties for the menu.
|
|
var oMenu = new YAHOO.widget.Menu("productsandservices", {
|
|
context: ["menutoggle", "tl", "tr"]
|
|
});
|
|
|
|
// Call the "render" method with no arguments since the
|
|
// markup for this Menu instance is already exists in the page.
|
|
oMenu.render();
|
|
|
|
// Set focus to the Menu when it is made visible
|
|
oMenu.subscribe("show", oMenu.focus);
|
|
|
|
//Wire up the button to show the menu when clicked;
|
|
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|