1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/profiler/cleopatra/js/ui.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,1992 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +var EIDETICKER_BASE_URL = "http://eideticker.wrla.ch/";
1.11 +
1.12 +var gDebugLog = false;
1.13 +var gDebugTrace = false;
1.14 +var gLocation = window.location + "";
1.15 +if (gLocation.indexOf("file:") == 0) {
1.16 + gDebugLog = true;
1.17 + gDebugTrace = true;
1.18 + PROFILERLOG("Turning on logging+tracing since cleopatra is served from the file protocol");
1.19 +}
1.20 +// Use for verbose tracing, otherwise use log
1.21 +function PROFILERTRACE(msg) {
1.22 + if (gDebugTrace)
1.23 + PROFILERLOG(msg);
1.24 +}
1.25 +function PROFILERLOG(msg) {
1.26 + if (gDebugLog) {
1.27 + msg = "Cleo: " + msg;
1.28 + console.log(msg);
1.29 + if (window.dump)
1.30 + window.dump(msg + "\n");
1.31 + }
1.32 +}
1.33 +function PROFILERERROR(msg) {
1.34 + msg = "Cleo: " + msg;
1.35 + console.log(msg);
1.36 + if (window.dump)
1.37 + window.dump(msg + "\n");
1.38 +}
1.39 +function enableProfilerTracing() {
1.40 + gDebugLog = true;
1.41 + gDebugTrace = true;
1.42 + Parser.updateLogSetting();
1.43 +}
1.44 +function enableProfilerLogging() {
1.45 + gDebugLog = true;
1.46 + Parser.updateLogSetting();
1.47 +}
1.48 +
1.49 +function removeAllChildren(element) {
1.50 + while (element.firstChild) {
1.51 + element.removeChild(element.firstChild);
1.52 + }
1.53 +}
1.54 +
1.55 +function FileList() {
1.56 + this._container = document.createElement("ul");
1.57 + this._container.id = "fileList";
1.58 + this._selectedFileItem = null;
1.59 + this._fileItemList = [];
1.60 +}
1.61 +
1.62 +FileList.prototype = {
1.63 + getContainer: function FileList_getContainer() {
1.64 + return this._container;
1.65 + },
1.66 +
1.67 + clearFiles: function FileList_clearFiles() {
1.68 + this.fileItemList = [];
1.69 + this._selectedFileItem = null;
1.70 + this._container.innerHTML = "";
1.71 + },
1.72 +
1.73 + loadProfileListFromLocalStorage: function FileList_loadProfileListFromLocalStorage() {
1.74 + var self = this;
1.75 + gLocalStorage.getProfileList(function(profileList) {
1.76 + for (var i = profileList.length - 1; i >= 0; i--) {
1.77 + (function closure() {
1.78 + // This only carries info about the profile and the access key to retrieve it.
1.79 + var profileInfo = profileList[i];
1.80 + //PROFILERTRACE("Profile list from local storage: " + JSON.stringify(profileInfo));
1.81 + var dateObj = new Date(profileInfo.date);
1.82 + var fileEntry = self.addFile(profileInfo, dateObj.toLocaleString(), function fileEntryClick() {
1.83 + PROFILERLOG("open: " + profileInfo.profileKey + "\n");
1.84 + loadLocalStorageProfile(profileInfo.profileKey);
1.85 + });
1.86 + })();
1.87 + }
1.88 + });
1.89 + gLocalStorage.onProfileListChange(function(profileList) {
1.90 + self.clearFiles();
1.91 + self.loadProfileListFromLocalStorage();
1.92 + });
1.93 + },
1.94 +
1.95 + addFile: function FileList_addFile(profileInfo, description, onselect) {
1.96 + var li = document.createElement("li");
1.97 +
1.98 + var fileName;
1.99 + if (profileInfo.profileKey && profileInfo.profileKey.indexOf("http://profile-store.commondatastorage.googleapis.com/") >= 0) {
1.100 + fileName = profileInfo.profileKey.substring(54);
1.101 + fileName = fileName.substring(0, 8) + "..." + fileName.substring(28);
1.102 + } else {
1.103 + fileName = profileInfo.name;
1.104 + }
1.105 + li.fileName = fileName || "(New Profile)";
1.106 + li.description = description || "(empty)";
1.107 +
1.108 + li.className = "fileListItem";
1.109 + if (!this._selectedFileItem) {
1.110 + li.classList.add("selected");
1.111 + this._selectedFileItem = li;
1.112 + }
1.113 +
1.114 + var self = this;
1.115 + li.onclick = function() {
1.116 + self.setSelection(li);
1.117 + if (onselect)
1.118 + onselect();
1.119 + }
1.120 +
1.121 + var fileListItemTitleSpan = document.createElement("span");
1.122 + fileListItemTitleSpan.className = "fileListItemTitle";
1.123 + fileListItemTitleSpan.textContent = li.fileName;
1.124 + li.appendChild(fileListItemTitleSpan);
1.125 +
1.126 + var fileListItemDescriptionSpan = document.createElement("span");
1.127 + fileListItemDescriptionSpan.className = "fileListItemDescription";
1.128 + fileListItemDescriptionSpan.textContent = li.description;
1.129 + li.appendChild(fileListItemDescriptionSpan);
1.130 +
1.131 + this._container.appendChild(li);
1.132 +
1.133 + this._fileItemList.push(li);
1.134 +
1.135 + return li;
1.136 + },
1.137 +
1.138 + setSelection: function FileList_setSelection(fileEntry) {
1.139 + if (this._selectedFileItem) {
1.140 + this._selectedFileItem.classList.remove("selected");
1.141 + }
1.142 + this._selectedFileItem = fileEntry;
1.143 + fileEntry.classList.add("selected");
1.144 + if (this._selectedFileItem.onselect)
1.145 + this._selectedFileItem.onselect();
1.146 + },
1.147 +
1.148 + profileParsingFinished: function FileList_profileParsingFinished() {
1.149 + //this._container.querySelector(".fileListItemTitle").textContent = "Current Profile";
1.150 + //this._container.querySelector(".fileListItemDescription").textContent = gNumSamples + " Samples";
1.151 + }
1.152 +}
1.153 +
1.154 +function treeObjSort(a, b) {
1.155 + return b.counter - a.counter;
1.156 +}
1.157 +
1.158 +function ProfileTreeManager() {
1.159 + this.treeView = new TreeView();
1.160 + this.treeView.setColumns([
1.161 + { name: "sampleCount", title: gStrings["Running Time"] },
1.162 + { name: "selfSampleCount", title: gStrings["Self"] },
1.163 + { name: "resource", title: "" },
1.164 + { name: "symbolName", title: gStrings["Symbol Name"] }
1.165 + ]);
1.166 + var self = this;
1.167 + this.treeView.addEventListener("select", function (frameData) {
1.168 + self.highlightFrame(frameData);
1.169 + if (window.comparator_setSelection) {
1.170 + window.comparator_setSelection(gTreeManager.serializeCurrentSelectionSnapshot(), frameData);
1.171 + }
1.172 + });
1.173 + this.treeView.addEventListener("contextMenuClick", function (e) {
1.174 + self._onContextMenuClick(e);
1.175 + });
1.176 + this.treeView.addEventListener("focusCallstackButtonClicked", function (frameData) {
1.177 + // NOTE: Not in the original Cleopatra source code.
1.178 + notifyParent("displaysource", {
1.179 + line: frameData.scriptLocation.lineInformation,
1.180 + uri: frameData.scriptLocation.scriptURI,
1.181 + isChrome: /^otherhost_*/.test(frameData.library)
1.182 + });
1.183 + });
1.184 + this._container = document.createElement("div");
1.185 + this._container.className = "tree";
1.186 + this._container.appendChild(this.treeView.getContainer());
1.187 +
1.188 + // If this is set when the tree changes the snapshot is immediately restored.
1.189 + this._savedSnapshot = null;
1.190 + this._allowNonContiguous = false;
1.191 +}
1.192 +ProfileTreeManager.prototype = {
1.193 + getContainer: function ProfileTreeManager_getContainer() {
1.194 + return this._container;
1.195 + },
1.196 + highlightFrame: function Treedisplay_highlightFrame(frameData) {
1.197 + setHighlightedCallstack(this._getCallstackUpTo(frameData), this._getHeaviestCallstack(frameData));
1.198 + },
1.199 + dataIsOutdated: function ProfileTreeManager_dataIsOutdated() {
1.200 + this.treeView.dataIsOutdated();
1.201 + },
1.202 + saveSelectionSnapshot: function ProfileTreeManager_saveSelectionSnapshot(isJavascriptOnly) {
1.203 + this._savedSnapshot = this.treeView.getSelectionSnapshot(isJavascriptOnly);
1.204 + },
1.205 + saveReverseSelectionSnapshot: function ProfileTreeManager_saveReverseSelectionSnapshot(isJavascriptOnly) {
1.206 + this._savedSnapshot = this.treeView.getReverseSelectionSnapshot(isJavascriptOnly);
1.207 + },
1.208 + hasNonTrivialSelection: function ProfileTreeManager_hasNonTrivialSelection() {
1.209 + return this.treeView.getSelectionSnapshot().length > 1;
1.210 + },
1.211 + serializeCurrentSelectionSnapshot: function ProfileTreeManager_serializeCurrentSelectionSnapshot() {
1.212 + return JSON.stringify(this.treeView.getSelectionSnapshot());
1.213 + },
1.214 + restoreSerializedSelectionSnapshot: function ProfileTreeManager_restoreSerializedSelectionSnapshot(selection) {
1.215 + this._savedSnapshot = JSON.parse(selection);
1.216 + },
1.217 + _restoreSelectionSnapshot: function ProfileTreeManager__restoreSelectionSnapshot(snapshot, allowNonContiguous) {
1.218 + return this.treeView.restoreSelectionSnapshot(snapshot, allowNonContiguous);
1.219 + },
1.220 + setSelection: function ProfileTreeManager_setSelection(frames) {
1.221 + return this.treeView.setSelection(frames);
1.222 + },
1.223 + _getCallstackUpTo: function ProfileTreeManager__getCallstackUpTo(frame) {
1.224 + var callstack = [];
1.225 + var curr = frame;
1.226 + while (curr != null) {
1.227 + if (curr.name != null) {
1.228 + var subCallstack = curr.fullFrameNamesAsInSample.clone();
1.229 + subCallstack.reverse();
1.230 + callstack = callstack.concat(subCallstack);
1.231 + }
1.232 + curr = curr.parent;
1.233 + }
1.234 + callstack.reverse();
1.235 + if (gInvertCallstack)
1.236 + callstack.shift(); // remove (total)
1.237 + return callstack;
1.238 + },
1.239 + _getHeaviestCallstack: function ProfileTreeManager__getHeaviestCallstack(frame) {
1.240 + // FIXME: This gets the first leaf which is not the heaviest leaf.
1.241 + while(frame.children && frame.children.length > 0) {
1.242 + var nextFrame = frame.children[0].getData();
1.243 + if (!nextFrame)
1.244 + break;
1.245 + frame = nextFrame;
1.246 + }
1.247 + return this._getCallstackUpTo(frame);
1.248 + },
1.249 + _onContextMenuClick: function ProfileTreeManager__onContextMenuClick(e) {
1.250 + var node = e.node;
1.251 + var menuItem = e.menuItem;
1.252 +
1.253 + if (menuItem == "View Source") {
1.254 + // Remove anything after ( since MXR doesn't handle search with the arguments.
1.255 + var symbol = node.name.split("(")[0];
1.256 + window.open("http://mxr.mozilla.org/mozilla-central/search?string=" + symbol, "View Source");
1.257 + } else if (menuItem == "View JS Source") {
1.258 + viewJSSource(node);
1.259 + } else if (menuItem == "Plugin View: Pie") {
1.260 + focusOnPluginView("protovis", {type:"pie"});
1.261 + } else if (menuItem == "Plugin View: Tree") {
1.262 + focusOnPluginView("protovis", {type:"tree"});
1.263 + } else if (menuItem == "Google Search") {
1.264 + var symbol = node.name;
1.265 + window.open("https://www.google.ca/search?q=" + symbol, "View Source");
1.266 + } else if (menuItem == "Focus Frame") {
1.267 + var symbol = node.fullFrameNamesAsInSample[0]; // TODO: we only function one symbol when callpath merging is on, fix that
1.268 + focusOnSymbol(symbol, node.name);
1.269 + } else if (menuItem == "Focus Callstack") {
1.270 + var focusedCallstack = this._getCallstackUpTo(node);
1.271 + focusOnCallstack(focusedCallstack, node.name);
1.272 + }
1.273 + },
1.274 + setAllowNonContiguous: function ProfileTreeManager_setAllowNonContiguous() {
1.275 + this._allowNonContiguous = true;
1.276 + },
1.277 + display: function ProfileTreeManager_display(tree, symbols, functions, resources, useFunctions, filterByName) {
1.278 + this.treeView.display(this.convertToJSTreeData(tree, symbols, functions, useFunctions), resources, filterByName);
1.279 + if (this._savedSnapshot) {
1.280 + var old = this._savedSnapshot.clone();
1.281 + this._restoreSelectionSnapshot(this._savedSnapshot, this._allowNonContiguous);
1.282 + this._savedSnapshot = old;
1.283 + this._allowNonContiguous = false;
1.284 + }
1.285 + },
1.286 + convertToJSTreeData: function ProfileTreeManager__convertToJSTreeData(rootNode, symbols, functions, useFunctions) {
1.287 + var totalSamples = rootNode.counter;
1.288 + function createTreeViewNode(node, parent) {
1.289 + var curObj = {};
1.290 + curObj.parent = parent;
1.291 + curObj.counter = node.counter;
1.292 + var selfCounter = node.counter;
1.293 + for (var i = 0; i < node.children.length; ++i) {
1.294 + selfCounter -= node.children[i].counter;
1.295 + }
1.296 + curObj.selfCounter = selfCounter;
1.297 + curObj.ratio = node.counter / totalSamples;
1.298 + curObj.fullFrameNamesAsInSample = node.mergedNames ? node.mergedNames : [node.name];
1.299 + if (!(node.name in (useFunctions ? functions : symbols))) {
1.300 + curObj.name = node.name;
1.301 + curObj.library = "";
1.302 + } else {
1.303 + var functionObj = useFunctions ? functions[node.name] : functions[symbols[node.name].functionIndex];
1.304 + var info = {
1.305 + functionName: functionObj.functionName,
1.306 + libraryName: functionObj.libraryName,
1.307 + lineInformation: useFunctions ? "" : symbols[node.name].lineInformation
1.308 + };
1.309 + curObj.name = (info.functionName + " " + info.lineInformation).trim();
1.310 + curObj.library = info.libraryName;
1.311 + curObj.isJSFrame = functionObj.isJSFrame;
1.312 + if (functionObj.scriptLocation) {
1.313 + curObj.scriptLocation = functionObj.scriptLocation;
1.314 + }
1.315 + }
1.316 + if (node.children.length) {
1.317 + curObj.children = getChildrenObjects(node.children, curObj);
1.318 + }
1.319 + return curObj;
1.320 + }
1.321 + function getChildrenObjects(children, parent) {
1.322 + var sortedChildren = children.slice(0).sort(treeObjSort);
1.323 + return sortedChildren.map(function (child) {
1.324 + var createdNode = null;
1.325 + return {
1.326 + getData: function () {
1.327 + if (!createdNode) {
1.328 + createdNode = createTreeViewNode(child, parent);
1.329 + }
1.330 + return createdNode;
1.331 + }
1.332 + };
1.333 + });
1.334 + }
1.335 + return getChildrenObjects([rootNode], null);
1.336 + },
1.337 +};
1.338 +
1.339 +function SampleBar() {
1.340 + this._container = document.createElement("div");
1.341 + this._container.id = "sampleBar";
1.342 + this._container.className = "sideBar";
1.343 +
1.344 + this._header = document.createElement("h2");
1.345 + this._header.innerHTML = "Selection - Most time spent in:";
1.346 + this._header.alt = "This shows the heaviest leaf of the selected sample. Use this to get a quick glimpse of where the selection is spending most of its time.";
1.347 + this._container.appendChild(this._header);
1.348 +
1.349 + this._text = document.createElement("ul");
1.350 + this._text.style.whiteSpace = "pre";
1.351 + this._text.innerHTML = "Sample text";
1.352 + this._container.appendChild(this._text);
1.353 +}
1.354 +
1.355 +SampleBar.prototype = {
1.356 + getContainer: function SampleBar_getContainer() {
1.357 + return this._container;
1.358 + },
1.359 + setSample: function SampleBar_setSample(sample) {
1.360 + var str = "";
1.361 + var list = [];
1.362 +
1.363 + this._text.innerHTML = "";
1.364 +
1.365 + for (var i = 0; i < sample.length; i++) {
1.366 + var functionObj = gMergeFunctions ? gFunctions[sample[i]] : gFunctions[symbols[sample[i]].functionIndex];
1.367 + if (!functionObj)
1.368 + continue;
1.369 + var functionItem = document.createElement("li");
1.370 + var functionLink = document.createElement("a");
1.371 + functionLink.textContent = functionLink.title = functionObj.functionName;
1.372 + functionLink.href = "#";
1.373 + functionItem.appendChild(functionLink);
1.374 + this._text.appendChild(functionItem);
1.375 + list.push(functionObj.functionName);
1.376 + functionLink.selectIndex = i;
1.377 + functionLink.onclick = function() {
1.378 + var selectedFrames = [];
1.379 + if (gInvertCallstack) {
1.380 + for (var i = 0; i <= this.selectIndex; i++) {
1.381 + var functionObj = gMergeFunctions ? gFunctions[sample[i]] : gFunctions[symbols[sample[i]].functionIndex];
1.382 + selectedFrames.push(functionObj.functionName);
1.383 + }
1.384 + } else {
1.385 + for (var i = sample.length - 1; i >= this.selectIndex; i--) {
1.386 + var functionObj = gMergeFunctions ? gFunctions[sample[i]] : gFunctions[symbols[sample[i]].functionIndex];
1.387 + selectedFrames.push(functionObj.functionName);
1.388 + }
1.389 + }
1.390 + gTreeManager.setSelection(selectedFrames);
1.391 + return false;
1.392 + }
1.393 + }
1.394 + return list;
1.395 + },
1.396 +}
1.397 +
1.398 +
1.399 +function PluginView() {
1.400 + this._container = document.createElement("div");
1.401 + this._container.className = "pluginview";
1.402 + this._container.style.visibility = 'hidden';
1.403 + this._iframe = document.createElement("iframe");
1.404 + this._iframe.className = "pluginviewIFrame";
1.405 + this._container.appendChild(this._iframe);
1.406 + this._container.style.top = "";
1.407 +}
1.408 +PluginView.prototype = {
1.409 + getContainer: function PluginView_getContainer() {
1.410 + return this._container;
1.411 + },
1.412 + hide: function() {
1.413 + // get rid of the scrollbars
1.414 + this._container.style.top = "";
1.415 + this._container.style.visibility = 'hidden';
1.416 + },
1.417 + show: function() {
1.418 + // This creates extra scrollbar so only do it when needed
1.419 + this._container.style.top = "0px";
1.420 + this._container.style.visibility = '';
1.421 + },
1.422 + display: function(pluginName, param, data) {
1.423 + this._iframe.src = "js/plugins/" + pluginName + "/index.html";
1.424 + var self = this;
1.425 + this._iframe.onload = function() {
1.426 + self._iframe.contentWindow.initCleopatraPlugin(data, param, gSymbols);
1.427 + }
1.428 + this.show();
1.429 + },
1.430 +}
1.431 +
1.432 +function HistogramView() {
1.433 + this._container = document.createElement("div");
1.434 + this._container.className = "histogram";
1.435 +
1.436 + this._canvas = this._createCanvas();
1.437 + this._container.appendChild(this._canvas);
1.438 +
1.439 + this._rangeSelector = new RangeSelector(this._canvas, this);
1.440 + this._rangeSelector.enableRangeSelectionOnHistogram();
1.441 + this._container.appendChild(this._rangeSelector.getContainer());
1.442 +
1.443 + this._busyCover = document.createElement("div");
1.444 + this._busyCover.className = "busyCover";
1.445 + this._container.appendChild(this._busyCover);
1.446 +
1.447 + this._histogramData = [];
1.448 +}
1.449 +HistogramView.prototype = {
1.450 + dataIsOutdated: function HistogramView_dataIsOutdated() {
1.451 + this._busyCover.classList.add("busy");
1.452 + },
1.453 + _createCanvas: function HistogramView__createCanvas() {
1.454 + var canvas = document.createElement("canvas");
1.455 + canvas.height = 60;
1.456 + canvas.style.width = "100%";
1.457 + canvas.style.height = "100%";
1.458 + return canvas;
1.459 + },
1.460 + getContainer: function HistogramView_getContainer() {
1.461 + return this._container;
1.462 + },
1.463 + selectRange: function HistogramView_selectRange(start, end) {
1.464 + this._rangeSelector._finishSelection(start, end);
1.465 + },
1.466 + showVideoFramePosition: function HistogramView_showVideoFramePosition(frame) {
1.467 + if (!this._frameStart || !this._frameStart[frame])
1.468 + return;
1.469 + var frameStart = this._frameStart[frame];
1.470 + // Now we look for the frame end. Because we can swap frame we don't present we have to look ahead
1.471 + // in the stream if frame+1 doesn't exist.
1.472 + var frameEnd = this._frameStart[frame+1];
1.473 + for (var i = 0; i < 10 && !frameEnd; i++) {
1.474 + frameEnd = this._frameStart[frame+1+i];
1.475 + }
1.476 + this._rangeSelector.showVideoRange(frameStart, frameEnd);
1.477 + },
1.478 + showVideoPosition: function HistogramView_showVideoPosition(position) {
1.479 + // position in 0..1
1.480 + this._rangeSelector.showVideoPosition(position);
1.481 + },
1.482 + _gatherMarkersList: function HistogramView__gatherMarkersList(histogramData) {
1.483 + var markers = [];
1.484 + for (var i = 0; i < histogramData.length; ++i) {
1.485 + var step = histogramData[i];
1.486 + if ("marker" in step) {
1.487 + markers.push({
1.488 + index: i,
1.489 + name: step.marker
1.490 + });
1.491 + }
1.492 + }
1.493 + return markers;
1.494 + },
1.495 + _calculateWidthMultiplier: function () {
1.496 + var minWidth = 2000;
1.497 + return Math.ceil(minWidth / this._widthSum);
1.498 + },
1.499 + histogramClick: function HistogramView_histogramClick(index) {
1.500 + var sample = this._histogramData[index];
1.501 + var frames = sample.frames;
1.502 + var list = gSampleBar.setSample(frames[0]);
1.503 + gTreeManager.setSelection(list);
1.504 + setHighlightedCallstack(frames[0], frames[0]);
1.505 + },
1.506 + display: function HistogramView_display(histogramData, frameStart, widthSum, highlightedCallstack) {
1.507 + this._histogramData = histogramData;
1.508 + this._frameStart = frameStart;
1.509 + this._widthSum = widthSum;
1.510 + this._widthMultiplier = this._calculateWidthMultiplier();
1.511 + this._canvas.width = this._widthMultiplier * this._widthSum;
1.512 + this._render(highlightedCallstack);
1.513 + this._busyCover.classList.remove("busy");
1.514 + },
1.515 + _scheduleRender: function HistogramView__scheduleRender(highlightedCallstack) {
1.516 + var self = this;
1.517 + if (self._pendingAnimationFrame != null) {
1.518 + return;
1.519 + }
1.520 + self._pendingAnimationFrame = requestAnimationFrame(function anim_frame() {
1.521 + cancelAnimationFrame(self._pendingAnimationFrame);
1.522 + self._pendingAnimationFrame = null;
1.523 + self._render(highlightedCallstack);
1.524 + self._busyCover.classList.remove("busy");
1.525 + });
1.526 + },
1.527 + _render: function HistogramView__render(highlightedCallstack) {
1.528 + var ctx = this._canvas.getContext("2d");
1.529 + var height = this._canvas.height;
1.530 + ctx.setTransform(this._widthMultiplier, 0, 0, 1, 0, 0);
1.531 + ctx.font = "20px Georgia";
1.532 + ctx.clearRect(0, 0, this._widthSum, height);
1.533 +
1.534 + var self = this;
1.535 + var markerCount = 0;
1.536 + for (var i = 0; i < this._histogramData.length; i++) {
1.537 + var step = this._histogramData[i];
1.538 + var isSelected = self._isStepSelected(step, highlightedCallstack);
1.539 + var isInRangeSelector = self._isInRangeSelector(i);
1.540 + if (isSelected) {
1.541 + ctx.fillStyle = "green";
1.542 + } else if (isInRangeSelector) {
1.543 + ctx.fillStyle = "blue";
1.544 + } else {
1.545 + ctx.fillStyle = step.color;
1.546 + }
1.547 + var roundedHeight = Math.round(step.value * height);
1.548 + ctx.fillRect(step.x, height - roundedHeight, step.width, roundedHeight);
1.549 + }
1.550 +
1.551 + this._finishedRendering = true;
1.552 + },
1.553 + highlightedCallstackChanged: function HistogramView_highlightedCallstackChanged(highlightedCallstack) {
1.554 + this._scheduleRender(highlightedCallstack);
1.555 + },
1.556 + _isInRangeSelector: function HistogramView_isInRangeSelector(index) {
1.557 + return false;
1.558 + },
1.559 + _isStepSelected: function HistogramView__isStepSelected(step, highlightedCallstack) {
1.560 + if ("marker" in step)
1.561 + return false;
1.562 +
1.563 + search_frames: for (var i = 0; i < step.frames.length; i++) {
1.564 + var frames = step.frames[i];
1.565 +
1.566 + if (frames.length < highlightedCallstack.length ||
1.567 + highlightedCallstack.length <= (gInvertCallstack ? 0 : 1))
1.568 + continue;
1.569 +
1.570 + var compareFrames = frames;
1.571 + if (gInvertCallstack) {
1.572 + for (var j = 0; j < highlightedCallstack.length; j++) {
1.573 + var compareFrameIndex = compareFrames.length - 1 - j;
1.574 + if (highlightedCallstack[j] != compareFrames[compareFrameIndex]) {
1.575 + continue search_frames;
1.576 + }
1.577 + }
1.578 + } else {
1.579 + for (var j = 0; j < highlightedCallstack.length; j++) {
1.580 + var compareFrameIndex = j;
1.581 + if (highlightedCallstack[j] != compareFrames[compareFrameIndex]) {
1.582 + continue search_frames;
1.583 + }
1.584 + }
1.585 + }
1.586 + return true;
1.587 + };
1.588 + return false;
1.589 + },
1.590 + getHistogramData: function HistogramView__getHistogramData() {
1.591 + return this._histogramData;
1.592 + },
1.593 + _getStepColor: function HistogramView__getStepColor(step) {
1.594 + if ("responsiveness" in step.extraInfo) {
1.595 + var res = step.extraInfo.responsiveness;
1.596 + var redComponent = Math.round(255 * Math.min(1, res / kDelayUntilWorstResponsiveness));
1.597 + return "rgb(" + redComponent + ",0,0)";
1.598 + }
1.599 +
1.600 + return "rgb(0,0,0)";
1.601 + },
1.602 +};
1.603 +
1.604 +function RangeSelector(graph, histogram) {
1.605 + this._histogram = histogram;
1.606 + this.container = document.createElement("div");
1.607 + this.container.className = "rangeSelectorContainer";
1.608 + this._graph = graph;
1.609 + this._selectedRange = { startX: 0, endX: 0 };
1.610 + this._selectedSampleRange = { start: 0, end: 0 };
1.611 +
1.612 + this._highlighter = document.createElement("div");
1.613 + this._highlighter.className = "histogramHilite collapsed";
1.614 + this.container.appendChild(this._highlighter);
1.615 +
1.616 + this._mouseMarker = document.createElement("div");
1.617 + this._mouseMarker.className = "histogramMouseMarker";
1.618 + this.container.appendChild(this._mouseMarker);
1.619 +}
1.620 +RangeSelector.prototype = {
1.621 + getContainer: function RangeSelector_getContainer() {
1.622 + return this.container;
1.623 + },
1.624 + // echo the location off the mouse on the histogram
1.625 + drawMouseMarker: function RangeSelector_drawMouseMarker(x) {
1.626 + var mouseMarker = this._mouseMarker;
1.627 + mouseMarker.style.left = x + "px";
1.628 + },
1.629 + showVideoPosition: function RangeSelector_showVideoPosition(position) {
1.630 + this.drawMouseMarker(position * (this._graph.parentNode.clientWidth-1));
1.631 + PROFILERLOG("Show video position: " + position);
1.632 + },
1.633 + drawHiliteRectangle: function RangeSelector_drawHiliteRectangle(x, y, width, height) {
1.634 + var hilite = this._highlighter;
1.635 + hilite.style.left = x + "px";
1.636 + hilite.style.top = "0";
1.637 + hilite.style.width = width + "px";
1.638 + hilite.style.height = height + "px";
1.639 + },
1.640 + clearCurrentRangeSelection: function RangeSelector_clearCurrentRangeSelection() {
1.641 + try {
1.642 + this.changeEventSuppressed = true;
1.643 + var children = this.selector.childNodes;
1.644 + for (var i = 0; i < children.length; ++i) {
1.645 + children[i].selected = false;
1.646 + }
1.647 + } finally {
1.648 + this.changeEventSuppressed = false;
1.649 + }
1.650 + },
1.651 + showVideoRange: function RangeSelector_showVideoRange(startIndex, endIndex) {
1.652 + if (!endIndex || endIndex < 0)
1.653 + endIndex = gCurrentlyShownSampleData.length;
1.654 +
1.655 + var len = this._graph.parentNode.getBoundingClientRect().right - this._graph.parentNode.getBoundingClientRect().left;
1.656 + this._selectedRange.startX = startIndex * len / this._histogram._histogramData.length;
1.657 + this._selectedRange.endX = endIndex * len / this._histogram._histogramData.length;
1.658 + var width = this._selectedRange.endX - this._selectedRange.startX;
1.659 + var height = this._graph.parentNode.clientHeight;
1.660 + this._highlighter.classList.remove("collapsed");
1.661 + this.drawHiliteRectangle(this._selectedRange.startX, 0, width, height);
1.662 + //this._finishSelection(startIndex, endIndex);
1.663 + },
1.664 + enableRangeSelectionOnHistogram: function RangeSelector_enableRangeSelectionOnHistogram() {
1.665 + var graph = this._graph;
1.666 + var isDrawingRectangle = false;
1.667 + var origX, origY;
1.668 + var self = this;
1.669 + // Compute this on the mouse down rather then forcing a sync reflow
1.670 + // every frame.
1.671 + var boundingRect = null;
1.672 + function histogramClick(clickX, clickY) {
1.673 + clickX = Math.min(clickX, graph.parentNode.getBoundingClientRect().right);
1.674 + clickX = clickX - graph.parentNode.getBoundingClientRect().left;
1.675 + var index = self._histogramIndexFromPoint(clickX);
1.676 + self._histogram.histogramClick(index);
1.677 + }
1.678 + function updateHiliteRectangle(newX, newY) {
1.679 + newX = Math.min(newX, boundingRect.right);
1.680 + var startX = Math.min(newX, origX) - boundingRect.left;
1.681 + var startY = 0;
1.682 + var width = Math.abs(newX - origX);
1.683 + var height = graph.parentNode.clientHeight;
1.684 + if (startX < 0) {
1.685 + width += startX;
1.686 + startX = 0;
1.687 + }
1.688 + self._selectedRange.startX = startX;
1.689 + self._selectedRange.endX = startX + width;
1.690 + self.drawHiliteRectangle(startX, startY, width, height);
1.691 + }
1.692 + function updateMouseMarker(newX) {
1.693 + self.drawMouseMarker(newX - graph.parentNode.getBoundingClientRect().left);
1.694 + }
1.695 + graph.addEventListener("mousedown", function(e) {
1.696 + if (e.button != 0)
1.697 + return;
1.698 + graph.style.cursor = "col-resize";
1.699 + isDrawingRectangle = true;
1.700 + self.beginHistogramSelection();
1.701 + origX = e.pageX;
1.702 + origY = e.pageY;
1.703 + boundingRect = graph.parentNode.getBoundingClientRect();
1.704 + if (this.setCapture)
1.705 + this.setCapture();
1.706 + // Reset the highlight rectangle
1.707 + updateHiliteRectangle(e.pageX, e.pageY);
1.708 + e.preventDefault();
1.709 + this._movedDuringClick = false;
1.710 + }, false);
1.711 + graph.addEventListener("mouseup", function(e) {
1.712 + graph.style.cursor = "default";
1.713 + if (!this._movedDuringClick) {
1.714 + isDrawingRectangle = false;
1.715 + // Handle as a click on the histogram. Select the sample:
1.716 + histogramClick(e.pageX, e.pageY);
1.717 + } else if (isDrawingRectangle) {
1.718 + isDrawingRectangle = false;
1.719 + updateHiliteRectangle(e.pageX, e.pageY);
1.720 + self.finishHistogramSelection(e.pageX != origX);
1.721 + if (e.pageX == origX) {
1.722 + // Simple click in the histogram
1.723 + var index = self._sampleIndexFromPoint(e.pageX - graph.parentNode.getBoundingClientRect().left);
1.724 + // TODO Select this sample in the tree view
1.725 + var sample = gCurrentlyShownSampleData[index];
1.726 + }
1.727 + }
1.728 + }, false);
1.729 + graph.addEventListener("mousemove", function(e) {
1.730 + this._movedDuringClick = true;
1.731 + if (isDrawingRectangle) {
1.732 + updateMouseMarker(-1); // Clear
1.733 + updateHiliteRectangle(e.pageX, e.pageY);
1.734 + } else {
1.735 + updateMouseMarker(e.pageX);
1.736 + }
1.737 + }, false);
1.738 + graph.addEventListener("mouseout", function(e) {
1.739 + updateMouseMarker(-1); // Clear
1.740 + }, false);
1.741 + },
1.742 + beginHistogramSelection: function RangeSelector_beginHistgramSelection() {
1.743 + var hilite = this._highlighter;
1.744 + hilite.classList.remove("finished");
1.745 + hilite.classList.add("selecting");
1.746 + hilite.classList.remove("collapsed");
1.747 + if (this._transientRestrictionEnteringAffordance) {
1.748 + this._transientRestrictionEnteringAffordance.discard();
1.749 + }
1.750 + },
1.751 + _finishSelection: function RangeSelector__finishSelection(start, end) {
1.752 + var newFilterChain = gSampleFilters.concat({ type: "RangeSampleFilter", start: start, end: end });
1.753 + var self = this;
1.754 + self._transientRestrictionEnteringAffordance = gBreadcrumbTrail.add({
1.755 + title: gStrings["Sample Range"] + " [" + start + ", " + (end + 1) + "]",
1.756 + enterCallback: function () {
1.757 + gSampleFilters = newFilterChain;
1.758 + self.collapseHistogramSelection();
1.759 + filtersChanged();
1.760 + }
1.761 + });
1.762 + },
1.763 + finishHistogramSelection: function RangeSelector_finishHistgramSelection(isSomethingSelected) {
1.764 + var self = this;
1.765 + var hilite = this._highlighter;
1.766 + hilite.classList.remove("selecting");
1.767 + if (isSomethingSelected) {
1.768 + hilite.classList.add("finished");
1.769 + var start = this._sampleIndexFromPoint(this._selectedRange.startX);
1.770 + var end = this._sampleIndexFromPoint(this._selectedRange.endX);
1.771 + self._finishSelection(start, end);
1.772 + } else {
1.773 + hilite.classList.add("collapsed");
1.774 + }
1.775 + },
1.776 + collapseHistogramSelection: function RangeSelector_collapseHistogramSelection() {
1.777 + var hilite = this._highlighter;
1.778 + hilite.classList.add("collapsed");
1.779 + },
1.780 + _sampleIndexFromPoint: function RangeSelector__sampleIndexFromPoint(x) {
1.781 + // XXX this is completely wrong, fix please
1.782 + var totalSamples = parseFloat(gCurrentlyShownSampleData.length);
1.783 + var width = parseFloat(this._graph.parentNode.clientWidth);
1.784 + var factor = totalSamples / width;
1.785 + return parseInt(parseFloat(x) * factor);
1.786 + },
1.787 + _histogramIndexFromPoint: function RangeSelector__histogramIndexFromPoint(x) {
1.788 + // XXX this is completely wrong, fix please
1.789 + var totalSamples = parseFloat(this._histogram._histogramData.length);
1.790 + var width = parseFloat(this._graph.parentNode.clientWidth);
1.791 + var factor = totalSamples / width;
1.792 + return parseInt(parseFloat(x) * factor);
1.793 + },
1.794 +};
1.795 +
1.796 +function videoPaneTimeChange(video) {
1.797 + if (!gMeta || !gMeta.frameStart)
1.798 + return;
1.799 +
1.800 + var frame = gVideoPane.getCurrentFrameNumber();
1.801 + //var frameStart = gMeta.frameStart[frame];
1.802 + //var frameEnd = gMeta.frameStart[frame+1]; // If we don't have a frameEnd assume the end of the profile
1.803 +
1.804 + gHistogramView.showVideoFramePosition(frame);
1.805 +}
1.806 +
1.807 +
1.808 +window.onpopstate = function(ev) {
1.809 + return; // Conflicts with document url
1.810 + if (!gBreadcrumbTrail)
1.811 + return;
1.812 +
1.813 + gBreadcrumbTrail.pop();
1.814 + if (ev.state) {
1.815 + if (ev.state.action === "popbreadcrumb") {
1.816 + //gBreadcrumbTrail.pop();
1.817 + }
1.818 + }
1.819 +}
1.820 +
1.821 +function BreadcrumbTrail() {
1.822 + this._breadcrumbs = [];
1.823 + this._selectedBreadcrumbIndex = -1;
1.824 +
1.825 + this._containerElement = document.createElement("div");
1.826 + this._containerElement.className = "breadcrumbTrail";
1.827 + var self = this;
1.828 + this._containerElement.addEventListener("click", function (e) {
1.829 + if (!e.target.classList.contains("breadcrumbTrailItem"))
1.830 + return;
1.831 + self._enter(e.target.breadcrumbIndex);
1.832 + });
1.833 +}
1.834 +BreadcrumbTrail.prototype = {
1.835 + getContainer: function BreadcrumbTrail_getContainer() {
1.836 + return this._containerElement;
1.837 + },
1.838 + /**
1.839 + * Add a breadcrumb. The breadcrumb parameter is an object with the following
1.840 + * properties:
1.841 + * - title: The text that will be shown in the breadcrumb's button.
1.842 + * - enterCallback: A function that will be called when entering this
1.843 + * breadcrumb.
1.844 + */
1.845 + add: function BreadcrumbTrail_add(breadcrumb) {
1.846 + for (var i = this._breadcrumbs.length - 1; i > this._selectedBreadcrumbIndex; i--) {
1.847 + var rearLi = this._breadcrumbs[i];
1.848 + if (!rearLi.breadcrumbIsTransient)
1.849 + throw "Can only add new breadcrumbs if after the current one there are only transient ones.";
1.850 + rearLi.breadcrumbDiscarder.discard();
1.851 + }
1.852 + var div = document.createElement("div");
1.853 + div.className = "breadcrumbTrailItem";
1.854 + div.textContent = breadcrumb.title;
1.855 + var index = this._breadcrumbs.length;
1.856 + div.breadcrumbIndex = index;
1.857 + div.breadcrumbEnterCallback = breadcrumb.enterCallback;
1.858 + div.breadcrumbIsTransient = true;
1.859 + div.style.zIndex = 1000 - index;
1.860 + this._containerElement.appendChild(div);
1.861 + this._breadcrumbs.push(div);
1.862 + if (index == 0)
1.863 + this._enter(index);
1.864 + var self = this;
1.865 + div.breadcrumbDiscarder = {
1.866 + discard: function () {
1.867 + if (div.breadcrumbIsTransient) {
1.868 + self._deleteBeyond(index - 1);
1.869 + delete div.breadcrumbIsTransient;
1.870 + delete div.breadcrumbDiscarder;
1.871 + }
1.872 + }
1.873 + };
1.874 + return div.breadcrumbDiscarder;
1.875 + },
1.876 + addAndEnter: function BreadcrumbTrail_addAndEnter(breadcrumb) {
1.877 + var removalHandle = this.add(breadcrumb);
1.878 + this._enter(this._breadcrumbs.length - 1);
1.879 + },
1.880 + pop : function BreadcrumbTrail_pop() {
1.881 + if (this._breadcrumbs.length-2 >= 0)
1.882 + this._enter(this._breadcrumbs.length-2);
1.883 + },
1.884 + enterLastItem: function BreadcrumbTrail_enterLastItem(forceSelection) {
1.885 + this._enter(this._breadcrumbs.length-1, forceSelection);
1.886 + },
1.887 + _enter: function BreadcrumbTrail__select(index, forceSelection) {
1.888 + if (index == this._selectedBreadcrumbIndex)
1.889 + return;
1.890 + if (forceSelection) {
1.891 + gTreeManager.restoreSerializedSelectionSnapshot(forceSelection);
1.892 + } else {
1.893 + gTreeManager.saveSelectionSnapshot();
1.894 + }
1.895 + var prevSelected = this._breadcrumbs[this._selectedBreadcrumbIndex];
1.896 + if (prevSelected)
1.897 + prevSelected.classList.remove("selected");
1.898 + var li = this._breadcrumbs[index];
1.899 + if (this === gBreadcrumbTrail && index != 0) {
1.900 + // Support for back button, disabled until the forward button is implemented.
1.901 + //var state = {action: "popbreadcrumb",};
1.902 + //window.history.pushState(state, "Cleopatra");
1.903 + }
1.904 +
1.905 + delete li.breadcrumbIsTransient;
1.906 + li.classList.add("selected");
1.907 + this._deleteBeyond(index);
1.908 + this._selectedBreadcrumbIndex = index;
1.909 + li.breadcrumbEnterCallback();
1.910 + // Add history state
1.911 + },
1.912 + _deleteBeyond: function BreadcrumbTrail__deleteBeyond(index) {
1.913 + while (this._breadcrumbs.length > index + 1) {
1.914 + this._hide(this._breadcrumbs[index + 1]);
1.915 + this._breadcrumbs.splice(index + 1, 1);
1.916 + }
1.917 + },
1.918 + _hide: function BreadcrumbTrail__hide(breadcrumb) {
1.919 + delete breadcrumb.breadcrumbIsTransient;
1.920 + breadcrumb.classList.add("deleted");
1.921 + setTimeout(function () {
1.922 + breadcrumb.parentNode.removeChild(breadcrumb);
1.923 + }, 1000);
1.924 + },
1.925 +};
1.926 +
1.927 +function maxResponsiveness() {
1.928 + var data = gCurrentlyShownSampleData;
1.929 + var maxRes = 0.0;
1.930 + for (var i = 0; i < data.length; ++i) {
1.931 + if (!data[i] || !data[i].extraInfo || !data[i].extraInfo["responsiveness"])
1.932 + continue;
1.933 + if (maxRes < data[i].extraInfo["responsiveness"])
1.934 + maxRes = data[i].extraInfo["responsiveness"];
1.935 + }
1.936 + return maxRes;
1.937 +}
1.938 +
1.939 +function effectiveInterval() {
1.940 + var data = gCurrentlyShownSampleData;
1.941 + var interval = 0.0;
1.942 + var sampleCount = 0;
1.943 + var timeCount = 0;
1.944 + var lastTime = null;
1.945 + for (var i = 0; i < data.length; ++i) {
1.946 + if (!data[i] || !data[i].extraInfo || !data[i].extraInfo["time"]) {
1.947 + lastTime = null;
1.948 + continue;
1.949 + }
1.950 + if (lastTime) {
1.951 + sampleCount++;
1.952 + timeCount += data[i].extraInfo["time"] - lastTime;
1.953 + }
1.954 + lastTime = data[i].extraInfo["time"];
1.955 + }
1.956 + var effectiveInterval = timeCount/sampleCount;
1.957 + // Biggest diff
1.958 + var biggestDiff = 0;
1.959 + lastTime = null;
1.960 + for (var i = 0; i < data.length; ++i) {
1.961 + if (!data[i] || !data[i].extraInfo || !data[i].extraInfo["time"]) {
1.962 + lastTime = null;
1.963 + continue;
1.964 + }
1.965 + if (lastTime) {
1.966 + if (biggestDiff < Math.abs(effectiveInterval - (data[i].extraInfo["time"] - lastTime)))
1.967 + biggestDiff = Math.abs(effectiveInterval - (data[i].extraInfo["time"] - lastTime));
1.968 + }
1.969 + lastTime = data[i].extraInfo["time"];
1.970 + }
1.971 +
1.972 + if (effectiveInterval != effectiveInterval)
1.973 + return "Time info not collected";
1.974 +
1.975 + return (effectiveInterval).toFixed(2) + " ms ±" + biggestDiff.toFixed(2);
1.976 +}
1.977 +
1.978 +function numberOfCurrentlyShownSamples() {
1.979 + var data = gCurrentlyShownSampleData;
1.980 + var num = 0;
1.981 + for (var i = 0; i < data.length; ++i) {
1.982 + if (data[i])
1.983 + num++;
1.984 + }
1.985 + return num;
1.986 +}
1.987 +
1.988 +function avgResponsiveness() {
1.989 + var data = gCurrentlyShownSampleData;
1.990 + var totalRes = 0.0;
1.991 + for (var i = 0; i < data.length; ++i) {
1.992 + if (!data[i] || !data[i].extraInfo || !data[i].extraInfo["responsiveness"])
1.993 + continue;
1.994 + totalRes += data[i].extraInfo["responsiveness"];
1.995 + }
1.996 + return totalRes / numberOfCurrentlyShownSamples();
1.997 +}
1.998 +
1.999 +function copyProfile() {
1.1000 + window.prompt ("Copy to clipboard: Ctrl+C, Enter", document.getElementById("data").value);
1.1001 +}
1.1002 +
1.1003 +function saveProfileToLocalStorage() {
1.1004 + Parser.getSerializedProfile(true, function (serializedProfile) {
1.1005 + gLocalStorage.storeLocalProfile(serializedProfile, gMeta.profileId, function profileSaved() {
1.1006 +
1.1007 + });
1.1008 + });
1.1009 +}
1.1010 +function downloadProfile() {
1.1011 + Parser.getSerializedProfile(true, function (serializedProfile) {
1.1012 + var blob = new Blob([serializedProfile], { "type": "application/octet-stream" });
1.1013 + location.href = window.URL.createObjectURL(blob);
1.1014 + });
1.1015 +}
1.1016 +
1.1017 +function promptUploadProfile(selected) {
1.1018 + var overlay = document.createElement("div");
1.1019 + overlay.style.position = "absolute";
1.1020 + overlay.style.top = 0;
1.1021 + overlay.style.left = 0;
1.1022 + overlay.style.width = "100%";
1.1023 + overlay.style.height = "100%";
1.1024 + overlay.style.backgroundColor = "transparent";
1.1025 +
1.1026 + var bg = document.createElement("div");
1.1027 + bg.style.position = "absolute";
1.1028 + bg.style.top = 0;
1.1029 + bg.style.left = 0;
1.1030 + bg.style.width = "100%";
1.1031 + bg.style.height = "100%";
1.1032 + bg.style.opacity = "0.6";
1.1033 + bg.style.backgroundColor = "#aaaaaa";
1.1034 + overlay.appendChild(bg);
1.1035 +
1.1036 + var contentDiv = document.createElement("div");
1.1037 + contentDiv.className = "sideBar";
1.1038 + contentDiv.style.position = "absolute";
1.1039 + contentDiv.style.top = "50%";
1.1040 + contentDiv.style.left = "50%";
1.1041 + contentDiv.style.width = "40em";
1.1042 + contentDiv.style.height = "20em";
1.1043 + contentDiv.style.marginLeft = "-20em";
1.1044 + contentDiv.style.marginTop = "-10em";
1.1045 + contentDiv.style.padding = "10px";
1.1046 + contentDiv.style.border = "2px solid black";
1.1047 + contentDiv.style.backgroundColor = "rgb(219, 223, 231)";
1.1048 + overlay.appendChild(contentDiv);
1.1049 +
1.1050 + var noticeHTML = "";
1.1051 + noticeHTML += "<center><h2 style='font-size: 2em'>Upload Profile - Privacy Notice</h2></center>";
1.1052 + noticeHTML += "You're about to upload your profile publicly where anyone will be able to access it. ";
1.1053 + noticeHTML += "To better diagnose performance problems profiles include the following information:";
1.1054 + noticeHTML += "<ul>";
1.1055 + noticeHTML += " <li>The <b>URLs</b> and scripts of the tabs that were executing.</li>";
1.1056 + noticeHTML += " <li>The <b>metadata of all your Add-ons</b> to identify slow Add-ons.</li>";
1.1057 + noticeHTML += " <li>Firefox build and runtime configuration.</li>";
1.1058 + noticeHTML += "</ul><br>";
1.1059 + noticeHTML += "To view all the information you can download the full profile to a file and open the json structure with a text editor.<br><br>";
1.1060 + contentDiv.innerHTML = noticeHTML;
1.1061 +
1.1062 + var cancelButton = document.createElement("input");
1.1063 + cancelButton.style.position = "absolute";
1.1064 + cancelButton.style.bottom = "10px";
1.1065 + cancelButton.type = "button";
1.1066 + cancelButton.value = "Cancel";
1.1067 + cancelButton.onclick = function() {
1.1068 + document.body.removeChild(overlay);
1.1069 + }
1.1070 + contentDiv.appendChild(cancelButton);
1.1071 +
1.1072 + var uploadButton = document.createElement("input");
1.1073 + uploadButton.style.position = "absolute";
1.1074 + uploadButton.style.right = "10px";
1.1075 + uploadButton.style.bottom = "10px";
1.1076 + uploadButton.type = "button";
1.1077 + uploadButton.value = "Upload";
1.1078 + uploadButton.onclick = function() {
1.1079 + document.body.removeChild(overlay);
1.1080 + uploadProfile(selected);
1.1081 + }
1.1082 + contentDiv.appendChild(uploadButton);
1.1083 +
1.1084 + document.body.appendChild(overlay);
1.1085 +}
1.1086 +
1.1087 +function uploadProfile(selected) {
1.1088 + Parser.getSerializedProfile(!selected, function (dataToUpload) {
1.1089 + var oXHR = new XMLHttpRequest();
1.1090 + oXHR.onload = function (oEvent) {
1.1091 + if (oXHR.status == 200) {
1.1092 + gReportID = oXHR.responseText;
1.1093 + updateDocumentURL();
1.1094 + document.getElementById("upload_status").innerHTML = "Success! Use this <a id='linkElem'>link</a>";
1.1095 + document.getElementById("linkElem").href = document.URL;
1.1096 + } else {
1.1097 + document.getElementById("upload_status").innerHTML = "Error " + oXHR.status + " occurred uploading your file.";
1.1098 + }
1.1099 + };
1.1100 + oXHR.onerror = function (oEvent) {
1.1101 + document.getElementById("upload_status").innerHTML = "Error " + oXHR.status + " occurred uploading your file.";
1.1102 + }
1.1103 + oXHR.upload.onprogress = function(oEvent) {
1.1104 + if (oEvent.lengthComputable) {
1.1105 + var progress = Math.round((oEvent.loaded / oEvent.total)*100);
1.1106 + if (progress == 100) {
1.1107 + document.getElementById("upload_status").innerHTML = "Uploading: Waiting for server side compression";
1.1108 + } else {
1.1109 + document.getElementById("upload_status").innerHTML = "Uploading: " + Math.round((oEvent.loaded / oEvent.total)*100) + "%";
1.1110 + }
1.1111 + }
1.1112 + };
1.1113 +
1.1114 + var dataSize;
1.1115 + if (dataToUpload.length > 1024*1024) {
1.1116 + dataSize = (dataToUpload.length/1024/1024).toFixed(1) + " MB(s)";
1.1117 + } else {
1.1118 + dataSize = (dataToUpload.length/1024).toFixed(1) + " KB(s)";
1.1119 + }
1.1120 +
1.1121 + var formData = new FormData();
1.1122 + formData.append("file", dataToUpload);
1.1123 + document.getElementById("upload_status").innerHTML = "Uploading Profile (" + dataSize + ")";
1.1124 + oXHR.open("POST", "http://profile-store.appspot.com/store", true);
1.1125 + oXHR.send(formData);
1.1126 + });
1.1127 +}
1.1128 +
1.1129 +function populate_skip_symbol() {
1.1130 + var skipSymbolCtrl = document.getElementById('skipsymbol')
1.1131 + //skipSymbolCtrl.options = gSkipSymbols;
1.1132 + for (var i = 0; i < gSkipSymbols.length; i++) {
1.1133 + var elOptNew = document.createElement('option');
1.1134 + elOptNew.text = gSkipSymbols[i];
1.1135 + elOptNew.value = gSkipSymbols[i];
1.1136 + elSel.add(elOptNew);
1.1137 + }
1.1138 +
1.1139 +}
1.1140 +
1.1141 +function delete_skip_symbol() {
1.1142 + var skipSymbol = document.getElementById('skipsymbol').value
1.1143 +}
1.1144 +
1.1145 +function add_skip_symbol() {
1.1146 +
1.1147 +}
1.1148 +
1.1149 +var gFilterChangeCallback = null;
1.1150 +var gFilterChangeDelay = 1200;
1.1151 +function filterOnChange() {
1.1152 + if (gFilterChangeCallback != null) {
1.1153 + clearTimeout(gFilterChangeCallback);
1.1154 + gFilterChangeCallback = null;
1.1155 + }
1.1156 +
1.1157 + gFilterChangeCallback = setTimeout(filterUpdate, gFilterChangeDelay);
1.1158 +}
1.1159 +function filterUpdate() {
1.1160 + gFilterChangeCallback = null;
1.1161 +
1.1162 + filtersChanged();
1.1163 +
1.1164 + var filterNameInput = document.getElementById("filterName");
1.1165 + if (filterNameInput != null) {
1.1166 + changeFocus(filterNameInput);
1.1167 + }
1.1168 +}
1.1169 +
1.1170 +// Maps document id to a tooltip description
1.1171 +var tooltip = {
1.1172 + "mergeFunctions" : "Ignore line information and merge samples based on function names.",
1.1173 + "showJank" : "Show only samples with >50ms responsiveness.",
1.1174 + "showJS" : "Show only samples which involve running chrome or content Javascript code.",
1.1175 + "mergeUnbranched" : "Collapse unbranched call paths in the call tree into a single node.",
1.1176 + "filterName" : "Show only samples with a frame containing the filter as a substring.",
1.1177 + "invertCallstack" : "Invert the callstack (Heavy view) to find the most expensive leaf functions.",
1.1178 + "upload" : "Upload the full profile to public cloud storage to share with others.",
1.1179 + "upload_select" : "Upload only the selected view.",
1.1180 + "download" : "Initiate a download of the full profile.",
1.1181 +}
1.1182 +
1.1183 +function addTooltips() {
1.1184 + for (var elemId in tooltip) {
1.1185 + var elem = document.getElementById(elemId);
1.1186 + if (!elem)
1.1187 + continue;
1.1188 + if (elem.parentNode.nodeName.toLowerCase() == "label")
1.1189 + elem = elem.parentNode;
1.1190 + elem.title = tooltip[elemId];
1.1191 + }
1.1192 +}
1.1193 +
1.1194 +function InfoBar() {
1.1195 + this._container = document.createElement("div");
1.1196 + this._container.id = "infoBar";
1.1197 + this._container.className = "sideBar";
1.1198 +}
1.1199 +
1.1200 +InfoBar.prototype = {
1.1201 + getContainer: function InfoBar_getContainer() {
1.1202 + return this._container;
1.1203 + },
1.1204 + display: function InfoBar_display() {
1.1205 + function getMetaFeatureString() {
1.1206 + features = "<dt>Stackwalk:</dt><dd>" + (gMeta.stackwalk ? "True" : "False") + "</dd>";
1.1207 + features += "<dt>Jank:</dt><dd>" + (gMeta.stackwalk ? "True" : "False") + "</dd>";
1.1208 + return features;
1.1209 + }
1.1210 + function getPlatformInfo() {
1.1211 + return gMeta.oscpu + " (" + gMeta.toolkit + ")";
1.1212 + }
1.1213 + var infobar = this._container;
1.1214 + var infoText = "";
1.1215 +
1.1216 + if (gMeta) {
1.1217 + infoText += "<h2>Profile Info</h2>\n<dl>\n";
1.1218 + infoText += "<dt>Product:</dt><dd>" + gMeta.product + "</dd>";
1.1219 + infoText += "<dt>Platform:</dt><dd>" + getPlatformInfo() + "</dd>";
1.1220 + infoText += getMetaFeatureString();
1.1221 + infoText += "<dt>Interval:</dt><dd>" + gMeta.interval + "Â ms</dd></dl>";
1.1222 + }
1.1223 + infoText += "<h2>Selection Info</h2>\n<dl>\n";
1.1224 + infoText += " <dt>Avg. Responsiveness:</dt><dd>" + avgResponsiveness().toFixed(2) + "Â ms</dd>\n";
1.1225 + infoText += " <dt>Max Responsiveness:</dt><dd>" + maxResponsiveness().toFixed(2) + "Â ms</dd>\n";
1.1226 + infoText += " <dt>Real Interval:</dt><dd>" + effectiveInterval() + "</dd>";
1.1227 + infoText += "</dl>\n";
1.1228 + infoText += "<h2>Pre Filtering</h2>\n";
1.1229 + // Disable for now since it's buggy and not useful
1.1230 + //infoText += "<label><input type='checkbox' id='mergeFunctions' " + (gMergeFunctions ?" checked='true' ":" ") + " onchange='toggleMergeFunctions()'/>Functions, not lines</label><br>\n";
1.1231 +
1.1232 + var filterNameInputOld = document.getElementById("filterName");
1.1233 + infoText += "<a>Filter:\n";
1.1234 + infoText += "<input type='search' id='filterName' oninput='filterOnChange()'/></a>\n";
1.1235 +
1.1236 + infoText += "<h2>Post Filtering</h2>\n";
1.1237 + infoText += "<label><input type='checkbox' id='showJank' " + (gJankOnly ?" checked='true' ":" ") + " onchange='toggleJank()'/>Show Jank only</label>\n";
1.1238 + infoText += "<h2>View Options</h2>\n";
1.1239 + infoText += "<label><input type='checkbox' id='showJS' " + (gJavascriptOnly ?" checked='true' ":" ") + " onchange='toggleJavascriptOnly()'/>Javascript only</label><br>\n";
1.1240 + infoText += "<label><input type='checkbox' id='mergeUnbranched' " + (gMergeUnbranched ?" checked='true' ":" ") + " onchange='toggleMergeUnbranched()'/>Merge unbranched call paths</label><br>\n";
1.1241 + infoText += "<label><input type='checkbox' id='invertCallstack' " + (gInvertCallstack ?" checked='true' ":" ") + " onchange='toggleInvertCallStack()'/>Invert callstack</label><br>\n";
1.1242 +
1.1243 + infoText += "<h2>Share</h2>\n";
1.1244 + infoText += "<div id='upload_status' aria-live='polite'>No upload in progress</div><br>\n";
1.1245 + infoText += "<input type='button' id='upload' value='Upload full profile'>\n";
1.1246 + infoText += "<input type='button' id='upload_select' value='Upload view'><br>\n";
1.1247 + infoText += "<input type='button' id='download' value='Download full profile'>\n";
1.1248 +
1.1249 + infoText += "<h2>Compare</h2>\n";
1.1250 + infoText += "<input type='button' id='compare' value='Compare'>\n";
1.1251 +
1.1252 + //infoText += "<br>\n";
1.1253 + //infoText += "Skip functions:<br>\n";
1.1254 + //infoText += "<select size=8 id='skipsymbol'></select><br />"
1.1255 + //infoText += "<input type='button' id='delete_skipsymbol' value='Delete'/><br />\n";
1.1256 + //infoText += "<input type='button' id='add_skipsymbol' value='Add'/><br />\n";
1.1257 +
1.1258 + infobar.innerHTML = infoText;
1.1259 + addTooltips();
1.1260 +
1.1261 + var filterNameInputNew = document.getElementById("filterName");
1.1262 + if (filterNameInputOld != null && filterNameInputNew != null) {
1.1263 + filterNameInputNew.parentNode.replaceChild(filterNameInputOld, filterNameInputNew);
1.1264 + //filterNameInputNew.value = filterNameInputOld.value;
1.1265 + } else if (gQueryParamFilterName != null) {
1.1266 + filterNameInputNew.value = gQueryParamFilterName;
1.1267 + gQueryParamFilterName = null;
1.1268 + }
1.1269 + document.getElementById('compare').onclick = function() {
1.1270 + openProfileCompare();
1.1271 + }
1.1272 + document.getElementById('upload').onclick = function() {
1.1273 + promptUploadProfile(false);
1.1274 + };
1.1275 + document.getElementById('download').onclick = downloadProfile;
1.1276 + document.getElementById('upload_select').onclick = function() {
1.1277 + promptUploadProfile(true);
1.1278 + };
1.1279 + //document.getElementById('delete_skipsymbol').onclick = delete_skip_symbol;
1.1280 + //document.getElementById('add_skipsymbol').onclick = add_skip_symbol;
1.1281 +
1.1282 + //populate_skip_symbol();
1.1283 + }
1.1284 +}
1.1285 +
1.1286 +var gNumSamples = 0;
1.1287 +var gMeta = null;
1.1288 +var gSymbols = {};
1.1289 +var gFunctions = {};
1.1290 +var gResources = {};
1.1291 +var gHighlightedCallstack = [];
1.1292 +var gFrameView = null;
1.1293 +var gTreeManager = null;
1.1294 +var gSampleBar = null;
1.1295 +var gBreadcrumbTrail = null;
1.1296 +var gHistogramView = null;
1.1297 +var gDiagnosticBar = null;
1.1298 +var gVideoPane = null;
1.1299 +var gPluginView = null;
1.1300 +var gFileList = null;
1.1301 +var gInfoBar = null;
1.1302 +var gMainArea = null;
1.1303 +var gCurrentlyShownSampleData = null;
1.1304 +var gSkipSymbols = ["test2", "test1"];
1.1305 +var gAppendVideoCapture = null;
1.1306 +var gQueryParamFilterName = null;
1.1307 +var gRestoreSelection = null;
1.1308 +var gReportID = null;
1.1309 +
1.1310 +function getTextData() {
1.1311 + var data = [];
1.1312 + var samples = gCurrentlyShownSampleData;
1.1313 + for (var i = 0; i < samples.length; i++) {
1.1314 + data.push(samples[i].lines.join("\n"));
1.1315 + }
1.1316 + return data.join("\n");
1.1317 +}
1.1318 +
1.1319 +function loadProfileFile(fileList) {
1.1320 + if (fileList.length == 0)
1.1321 + return;
1.1322 + var file = fileList[0];
1.1323 + var reporter = enterProgressUI();
1.1324 + var subreporters = reporter.addSubreporters({
1.1325 + fileLoading: 1000,
1.1326 + parsing: 1000
1.1327 + });
1.1328 +
1.1329 + var reader = new FileReader();
1.1330 + reader.onloadend = function () {
1.1331 + subreporters.fileLoading.finish();
1.1332 + loadRawProfile(subreporters.parsing, reader.result);
1.1333 + };
1.1334 + reader.onprogress = function (e) {
1.1335 + subreporters.fileLoading.setProgress(e.loaded / e.total);
1.1336 + };
1.1337 + reader.readAsText(file, "utf-8");
1.1338 + subreporters.fileLoading.begin("Reading local file...");
1.1339 +}
1.1340 +
1.1341 +function loadLocalStorageProfile(profileKey) {
1.1342 + var reporter = enterProgressUI();
1.1343 + var subreporters = reporter.addSubreporters({
1.1344 + fileLoading: 1000,
1.1345 + parsing: 1000
1.1346 + });
1.1347 +
1.1348 + gLocalStorage.getProfile(profileKey, function(profile) {
1.1349 + subreporters.fileLoading.finish();
1.1350 + loadRawProfile(subreporters.parsing, profile, profileKey);
1.1351 + });
1.1352 + subreporters.fileLoading.begin("Reading local storage...");
1.1353 +}
1.1354 +
1.1355 +function appendVideoCapture(videoCapture) {
1.1356 + if (videoCapture.indexOf("://") == -1) {
1.1357 + videoCapture = EIDETICKER_BASE_URL + videoCapture;
1.1358 + }
1.1359 + gAppendVideoCapture = videoCapture;
1.1360 +}
1.1361 +
1.1362 +function loadZippedProfileURL(url) {
1.1363 + var reporter = enterProgressUI();
1.1364 + var subreporters = reporter.addSubreporters({
1.1365 + fileLoading: 1000,
1.1366 + parsing: 1000
1.1367 + });
1.1368 +
1.1369 + // Crude way to detect if we're using a relative URL or not :(
1.1370 + if (url.indexOf("://") == -1) {
1.1371 + url = EIDETICKER_BASE_URL + url;
1.1372 + }
1.1373 + reporter.begin("Fetching " + url);
1.1374 + PROFILERTRACE("Fetch url: " + url);
1.1375 +
1.1376 + function onerror(e) {
1.1377 + PROFILERERROR("zip.js error");
1.1378 + PROFILERERROR(JSON.stringify(e));
1.1379 + }
1.1380 +
1.1381 + zip.workerScriptsPath = "js/zip.js/";
1.1382 + zip.createReader(new zip.HttpReader(url), function(zipReader) {
1.1383 + subreporters.fileLoading.setProgress(0.4);
1.1384 + zipReader.getEntries(function(entries) {
1.1385 + for (var i = 0; i < entries.length; i++) {
1.1386 + var entry = entries[i];
1.1387 + PROFILERTRACE("Zip file: " + entry.filename);
1.1388 + if (entry.filename === "symbolicated_profile.txt") {
1.1389 + reporter.begin("Decompressing " + url);
1.1390 + subreporters.fileLoading.setProgress(0.8);
1.1391 + entry.getData(new zip.TextWriter(), function(profileText) {
1.1392 + subreporters.fileLoading.finish();
1.1393 + loadRawProfile(subreporters.parsing, profileText);
1.1394 + });
1.1395 + return;
1.1396 + }
1.1397 + onerror("symbolicated_profile.txt not found in zip file.");
1.1398 + }
1.1399 + });
1.1400 + }, onerror);
1.1401 +}
1.1402 +
1.1403 +function loadProfileURL(url) {
1.1404 + var reporter = enterProgressUI();
1.1405 + var subreporters = reporter.addSubreporters({
1.1406 + fileLoading: 1000,
1.1407 + parsing: 1000
1.1408 + });
1.1409 +
1.1410 + var xhr = new XMLHttpRequest();
1.1411 + xhr.open("GET", url, true);
1.1412 + xhr.responseType = "text";
1.1413 + xhr.onreadystatechange = function (e) {
1.1414 + if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
1.1415 + subreporters.fileLoading.finish();
1.1416 + PROFILERLOG("Got profile from '" + url + "'.");
1.1417 + if (xhr.responseText == null || xhr.responseText === "") {
1.1418 + subreporters.fileLoading.begin("Profile '" + url + "' is empty. Did you set the CORS headers?");
1.1419 + return;
1.1420 + }
1.1421 + loadRawProfile(subreporters.parsing, xhr.responseText, url);
1.1422 + }
1.1423 + };
1.1424 + xhr.onerror = function (e) {
1.1425 + subreporters.fileLoading.begin("Error fetching profile :(. URL: '" + url + "'. Did you set the CORS headers?");
1.1426 + }
1.1427 + xhr.onprogress = function (e) {
1.1428 + if (e.lengthComputable && (e.loaded <= e.total)) {
1.1429 + subreporters.fileLoading.setProgress(e.loaded / e.total);
1.1430 + } else {
1.1431 + subreporters.fileLoading.setProgress(NaN);
1.1432 + }
1.1433 + };
1.1434 + xhr.send(null);
1.1435 + subreporters.fileLoading.begin("Loading remote file...");
1.1436 +}
1.1437 +
1.1438 +function loadProfile(rawProfile) {
1.1439 + if (!rawProfile)
1.1440 + return;
1.1441 + var reporter = enterProgressUI();
1.1442 + loadRawProfile(reporter, rawProfile);
1.1443 +}
1.1444 +
1.1445 +function loadRawProfile(reporter, rawProfile, profileId) {
1.1446 + PROFILERLOG("Parse raw profile: ~" + rawProfile.length + " bytes");
1.1447 + reporter.begin("Parsing...");
1.1448 + if (rawProfile == null || rawProfile.length === 0) {
1.1449 + reporter.begin("Profile is null or empty");
1.1450 + return;
1.1451 + }
1.1452 + var startTime = Date.now();
1.1453 + var parseRequest = Parser.parse(rawProfile, {
1.1454 + appendVideoCapture : gAppendVideoCapture,
1.1455 + profileId: profileId,
1.1456 + });
1.1457 + parseRequest.addEventListener("progress", function (progress, action) {
1.1458 + if (action)
1.1459 + reporter.setAction(action);
1.1460 + reporter.setProgress(progress);
1.1461 + });
1.1462 + parseRequest.addEventListener("finished", function (result) {
1.1463 + reporter.finish();
1.1464 + gMeta = result.meta;
1.1465 + gNumSamples = result.numSamples;
1.1466 + gSymbols = result.symbols;
1.1467 + gFunctions = result.functions;
1.1468 + gResources = result.resources;
1.1469 + enterFinishedProfileUI();
1.1470 + gFileList.profileParsingFinished();
1.1471 + });
1.1472 +}
1.1473 +
1.1474 +var gImportFromAddonSubreporters = null;
1.1475 +
1.1476 +window.addEventListener("message", function messageFromAddon(msg) {
1.1477 + // This is triggered by the profiler add-on.
1.1478 + var o = JSON.parse(msg.data);
1.1479 + switch (o.task) {
1.1480 + case "importFromAddonStart":
1.1481 + var totalReporter = enterProgressUI();
1.1482 + gImportFromAddonSubreporters = totalReporter.addSubreporters({
1.1483 + import: 10000,
1.1484 + parsing: 1000
1.1485 + });
1.1486 + gImportFromAddonSubreporters.import.begin("Symbolicating...");
1.1487 + break;
1.1488 + case "importFromAddonProgress":
1.1489 + gImportFromAddonSubreporters.import.setProgress(o.progress);
1.1490 + if (o.action != null) {
1.1491 + gImportFromAddonSubreporters.import.setAction(o.action);
1.1492 + }
1.1493 + break;
1.1494 + case "importFromAddonFinish":
1.1495 + importFromAddonFinish(o.rawProfile);
1.1496 + break;
1.1497 + }
1.1498 +});
1.1499 +
1.1500 +function importFromAddonFinish(rawProfile) {
1.1501 + gImportFromAddonSubreporters.import.finish();
1.1502 + loadRawProfile(gImportFromAddonSubreporters.parsing, rawProfile);
1.1503 +}
1.1504 +
1.1505 +var gInvertCallstack = false;
1.1506 +function toggleInvertCallStack() {
1.1507 + gTreeManager.saveReverseSelectionSnapshot(gJavascriptOnly);
1.1508 + gInvertCallstack = !gInvertCallstack;
1.1509 + var startTime = Date.now();
1.1510 + viewOptionsChanged();
1.1511 +}
1.1512 +
1.1513 +var gMergeUnbranched = false;
1.1514 +function toggleMergeUnbranched() {
1.1515 + gMergeUnbranched = !gMergeUnbranched;
1.1516 + viewOptionsChanged();
1.1517 +}
1.1518 +
1.1519 +var gMergeFunctions = true;
1.1520 +function toggleMergeFunctions() {
1.1521 + gMergeFunctions = !gMergeFunctions;
1.1522 + filtersChanged();
1.1523 +}
1.1524 +
1.1525 +var gJankOnly = false;
1.1526 +var gJankThreshold = 50 /* ms */;
1.1527 +function toggleJank(/* optional */ threshold) {
1.1528 + // Currently we have no way to change the threshold in the UI
1.1529 + // once we add this we will need to change the tooltip.
1.1530 + gJankOnly = !gJankOnly;
1.1531 + if (threshold != null ) {
1.1532 + gJankThreshold = threshold;
1.1533 + }
1.1534 + filtersChanged();
1.1535 +}
1.1536 +
1.1537 +var gJavascriptOnly = false;
1.1538 +function toggleJavascriptOnly() {
1.1539 + if (gJavascriptOnly) {
1.1540 + // When going from JS only to non js there's going to be new C++
1.1541 + // frames in the selection so we need to restore the selection
1.1542 + // while allowing non contigous symbols to be in the stack (the c++ ones)
1.1543 + gTreeManager.setAllowNonContiguous();
1.1544 + }
1.1545 + gJavascriptOnly = !gJavascriptOnly;
1.1546 + gTreeManager.saveSelectionSnapshot(gJavascriptOnly);
1.1547 + filtersChanged();
1.1548 +}
1.1549 +
1.1550 +var gSampleFilters = [];
1.1551 +function focusOnSymbol(focusSymbol, name) {
1.1552 + var newFilterChain = gSampleFilters.concat([{type: "FocusedFrameSampleFilter", name: name, focusedSymbol: focusSymbol}]);
1.1553 + gBreadcrumbTrail.addAndEnter({
1.1554 + title: name,
1.1555 + enterCallback: function () {
1.1556 + gSampleFilters = newFilterChain;
1.1557 + filtersChanged();
1.1558 + }
1.1559 + });
1.1560 +}
1.1561 +
1.1562 +function focusOnCallstack(focusedCallstack, name, overwriteCallstack) {
1.1563 + var invertCallstack = gInvertCallstack;
1.1564 +
1.1565 + if (overwriteCallstack != null) {
1.1566 + invertCallstack = overwriteCallstack;
1.1567 + }
1.1568 + var filter = {
1.1569 + type: !invertCallstack ? "FocusedCallstackPostfixSampleFilter" : "FocusedCallstackPrefixSampleFilter",
1.1570 + name: name,
1.1571 + focusedCallstack: focusedCallstack,
1.1572 + appliesToJS: gJavascriptOnly
1.1573 + };
1.1574 + var newFilterChain = gSampleFilters.concat([filter]);
1.1575 + gBreadcrumbTrail.addAndEnter({
1.1576 + title: name,
1.1577 + enterCallback: function () {
1.1578 + gSampleFilters = newFilterChain;
1.1579 + filtersChanged();
1.1580 + }
1.1581 + })
1.1582 +}
1.1583 +
1.1584 +function focusOnPluginView(pluginName, param) {
1.1585 + var filter = {
1.1586 + type: "PluginView",
1.1587 + pluginName: pluginName,
1.1588 + param: param,
1.1589 + };
1.1590 + var newFilterChain = gSampleFilters.concat([filter]);
1.1591 + gBreadcrumbTrail.addAndEnter({
1.1592 + title: "Plugin View: " + pluginName,
1.1593 + enterCallback: function () {
1.1594 + gSampleFilters = newFilterChain;
1.1595 + filtersChanged();
1.1596 + }
1.1597 + })
1.1598 +}
1.1599 +
1.1600 +function viewJSSource(sample) {
1.1601 + var sourceView = new SourceView();
1.1602 + sourceView.setScriptLocation(sample.scriptLocation);
1.1603 + sourceView.setSource(gMeta.js.source[sample.scriptLocation.scriptURI]);
1.1604 + gMainArea.appendChild(sourceView.getContainer());
1.1605 +
1.1606 +}
1.1607 +
1.1608 +function setHighlightedCallstack(samples, heaviestSample) {
1.1609 + PROFILERTRACE("highlight: " + samples);
1.1610 + gHighlightedCallstack = samples;
1.1611 + gHistogramView.highlightedCallstackChanged(gHighlightedCallstack);
1.1612 + if (!gInvertCallstack) {
1.1613 + // Always show heavy
1.1614 + heaviestSample = heaviestSample.clone().reverse();
1.1615 + }
1.1616 +
1.1617 + if (gSampleBar) {
1.1618 + gSampleBar.setSample(heaviestSample);
1.1619 + }
1.1620 +}
1.1621 +
1.1622 +function enterMainUI() {
1.1623 + var uiContainer = document.createElement("div");
1.1624 + uiContainer.id = "ui";
1.1625 +
1.1626 + gFileList = new FileList();
1.1627 + uiContainer.appendChild(gFileList.getContainer());
1.1628 +
1.1629 + //gFileList.addFile();
1.1630 + gFileList.loadProfileListFromLocalStorage();
1.1631 +
1.1632 + gInfoBar = new InfoBar();
1.1633 + uiContainer.appendChild(gInfoBar.getContainer());
1.1634 +
1.1635 + gMainArea = document.createElement("div");
1.1636 + gMainArea.id = "mainarea";
1.1637 + uiContainer.appendChild(gMainArea);
1.1638 + document.body.appendChild(uiContainer);
1.1639 +
1.1640 + var profileEntryPane = document.createElement("div");
1.1641 + profileEntryPane.className = "profileEntryPane";
1.1642 + profileEntryPane.innerHTML = '' +
1.1643 + '<h1>Upload your profile here:</h1>' +
1.1644 + '<input type="file" id="datafile" onchange="loadProfileFile(this.files);">' +
1.1645 + '<h1>Or, alternatively, enter your profile data here:</h1>' +
1.1646 + '<textarea rows=20 cols=80 id=data autofocus spellcheck=false></textarea>' +
1.1647 + '<p><button onclick="loadProfile(document.getElementById(\'data\').value);">Parse</button></p>' +
1.1648 + '';
1.1649 +
1.1650 + gMainArea.appendChild(profileEntryPane);
1.1651 +}
1.1652 +
1.1653 +function enterProgressUI() {
1.1654 + var profileProgressPane = document.createElement("div");
1.1655 + profileProgressPane.className = "profileProgressPane";
1.1656 +
1.1657 + var progressLabel = document.createElement("a");
1.1658 + profileProgressPane.appendChild(progressLabel);
1.1659 +
1.1660 + var progressBar = document.createElement("progress");
1.1661 + profileProgressPane.appendChild(progressBar);
1.1662 +
1.1663 + var totalProgressReporter = new ProgressReporter();
1.1664 + totalProgressReporter.addListener(function (r) {
1.1665 + var progress = r.getProgress();
1.1666 + progressLabel.innerHTML = r.getAction();
1.1667 + if (isNaN(progress))
1.1668 + progressBar.removeAttribute("value");
1.1669 + else
1.1670 + progressBar.value = progress;
1.1671 + });
1.1672 +
1.1673 + gMainArea.appendChild(profileProgressPane);
1.1674 +
1.1675 + Parser.updateLogSetting();
1.1676 +
1.1677 + return totalProgressReporter;
1.1678 +}
1.1679 +
1.1680 +function enterFinishedProfileUI() {
1.1681 + saveProfileToLocalStorage();
1.1682 +
1.1683 + var finishedProfilePaneBackgroundCover = document.createElement("div");
1.1684 + finishedProfilePaneBackgroundCover.className = "finishedProfilePaneBackgroundCover";
1.1685 +
1.1686 + var finishedProfilePane = document.createElement("table");
1.1687 + var rowIndex = 0;
1.1688 + var currRow;
1.1689 + finishedProfilePane.style.width = "100%";
1.1690 + finishedProfilePane.style.height = "100%";
1.1691 + finishedProfilePane.border = "0";
1.1692 + finishedProfilePane.cellPadding = "0";
1.1693 + finishedProfilePane.cellSpacing = "0";
1.1694 + finishedProfilePane.borderCollapse = "collapse";
1.1695 + finishedProfilePane.className = "finishedProfilePane";
1.1696 + setTimeout(function() {
1.1697 + // Work around a webkit bug. For some reason the table doesn't show up
1.1698 + // until some actions happen such as focusing this box
1.1699 + var filterNameInput = document.getElementById("filterName");
1.1700 + if (filterNameInput != null) {
1.1701 + changeFocus(filterNameInput);
1.1702 + }
1.1703 + }, 100);
1.1704 +
1.1705 + gBreadcrumbTrail = new BreadcrumbTrail();
1.1706 + currRow = finishedProfilePane.insertRow(rowIndex++);
1.1707 + currRow.insertCell(0).appendChild(gBreadcrumbTrail.getContainer());
1.1708 +
1.1709 + gHistogramView = new HistogramView();
1.1710 + currRow = finishedProfilePane.insertRow(rowIndex++);
1.1711 + currRow.insertCell(0).appendChild(gHistogramView.getContainer());
1.1712 +
1.1713 + if (false && gLocation.indexOf("file:") == 0) {
1.1714 + // Local testing for frameView
1.1715 + gFrameView = new FrameView();
1.1716 + currRow = finishedProfilePane.insertRow(rowIndex++);
1.1717 + currRow.insertCell(0).appendChild(gFrameView.getContainer());
1.1718 + }
1.1719 +
1.1720 + gDiagnosticBar = new DiagnosticBar();
1.1721 + gDiagnosticBar.setDetailsListener(function(details) {
1.1722 + if (details.indexOf("bug ") == 0) {
1.1723 + window.open('https://bugzilla.mozilla.org/show_bug.cgi?id=' + details.substring(4));
1.1724 + } else {
1.1725 + var sourceView = new SourceView();
1.1726 + sourceView.setText("Diagnostic", js_beautify(details));
1.1727 + gMainArea.appendChild(sourceView.getContainer());
1.1728 + }
1.1729 + });
1.1730 + currRow = finishedProfilePane.insertRow(rowIndex++);
1.1731 + currRow.insertCell(0).appendChild(gDiagnosticBar.getContainer());
1.1732 +
1.1733 + // For testing:
1.1734 + //gMeta.videoCapture = {
1.1735 + // src: "http://videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.webm",
1.1736 + //};
1.1737 +
1.1738 + if (gMeta && gMeta.videoCapture) {
1.1739 + gVideoPane = new VideoPane(gMeta.videoCapture);
1.1740 + gVideoPane.onTimeChange(videoPaneTimeChange);
1.1741 + currRow = finishedProfilePane.insertRow(rowIndex++);
1.1742 + currRow.insertCell(0).appendChild(gVideoPane.getContainer());
1.1743 + }
1.1744 +
1.1745 + var treeContainerDiv = document.createElement("div");
1.1746 + treeContainerDiv.className = "treeContainer";
1.1747 + treeContainerDiv.style.width = "100%";
1.1748 + treeContainerDiv.style.height = "100%";
1.1749 +
1.1750 + gTreeManager = new ProfileTreeManager();
1.1751 + currRow = finishedProfilePane.insertRow(rowIndex++);
1.1752 + currRow.style.height = "100%";
1.1753 + var cell = currRow.insertCell(0);
1.1754 + cell.appendChild(treeContainerDiv);
1.1755 + treeContainerDiv.appendChild(gTreeManager.getContainer());
1.1756 +
1.1757 + gSampleBar = new SampleBar();
1.1758 + treeContainerDiv.appendChild(gSampleBar.getContainer());
1.1759 +
1.1760 + // sampleBar
1.1761 +
1.1762 + gPluginView = new PluginView();
1.1763 + //currRow = finishedProfilePane.insertRow(4);
1.1764 + treeContainerDiv.appendChild(gPluginView.getContainer());
1.1765 +
1.1766 + gMainArea.appendChild(finishedProfilePaneBackgroundCover);
1.1767 + gMainArea.appendChild(finishedProfilePane);
1.1768 +
1.1769 + var currentBreadcrumb = gSampleFilters;
1.1770 + gBreadcrumbTrail.add({
1.1771 + title: gStrings["Complete Profile"],
1.1772 + enterCallback: function () {
1.1773 + gSampleFilters = [];
1.1774 + filtersChanged();
1.1775 + }
1.1776 + });
1.1777 + if (currentBreadcrumb == null || currentBreadcrumb.length == 0) {
1.1778 + gTreeManager.restoreSerializedSelectionSnapshot(gRestoreSelection);
1.1779 + viewOptionsChanged();
1.1780 + }
1.1781 + for (var i = 0; i < currentBreadcrumb.length; i++) {
1.1782 + var filter = currentBreadcrumb[i];
1.1783 + var forceSelection = null;
1.1784 + if (gRestoreSelection != null && i == currentBreadcrumb.length - 1) {
1.1785 + forceSelection = gRestoreSelection;
1.1786 + }
1.1787 + switch (filter.type) {
1.1788 + case "FocusedFrameSampleFilter":
1.1789 + focusOnSymbol(filter.name, filter.symbolName);
1.1790 + gBreadcrumbTrail.enterLastItem(forceSelection);
1.1791 + case "FocusedCallstackPrefixSampleFilter":
1.1792 + focusOnCallstack(filter.focusedCallstack, filter.name, false);
1.1793 + gBreadcrumbTrail.enterLastItem(forceSelection);
1.1794 + case "FocusedCallstackPostfixSampleFilter":
1.1795 + focusOnCallstack(filter.focusedCallstack, filter.name, true);
1.1796 + gBreadcrumbTrail.enterLastItem(forceSelection);
1.1797 + case "RangeSampleFilter":
1.1798 + gHistogramView.selectRange(filter.start, filter.end);
1.1799 + gBreadcrumbTrail.enterLastItem(forceSelection);
1.1800 + }
1.1801 + }
1.1802 +}
1.1803 +
1.1804 +// Make all focus change events go through this function.
1.1805 +// This function will mediate the focus changes in case
1.1806 +// that we're in a compare view. In a compare view an inactive
1.1807 +// instance of cleopatra should not steal focus from the active
1.1808 +// cleopatra instance.
1.1809 +function changeFocus(elem) {
1.1810 + if (window.comparator_changeFocus) {
1.1811 + window.comparator_changeFocus(elem);
1.1812 + } else {
1.1813 + PROFILERLOG("FOCUS\n\n\n\n\n\n\n\n\n");
1.1814 + elem.focus();
1.1815 + }
1.1816 +}
1.1817 +
1.1818 +function comparator_receiveSelection(snapshot, frameData) {
1.1819 + gTreeManager.restoreSerializedSelectionSnapshot(snapshot);
1.1820 + if (frameData)
1.1821 + gTreeManager.highlightFrame(frameData);
1.1822 + viewOptionsChanged();
1.1823 +}
1.1824 +
1.1825 +function filtersChanged() {
1.1826 + if (window.comparator_setSelection) {
1.1827 + // window.comparator_setSelection(gTreeManager.serializeCurrentSelectionSnapshot(), null);
1.1828 + }
1.1829 + updateDocumentURL();
1.1830 + var data = { symbols: {}, functions: {}, samples: [] };
1.1831 +
1.1832 + gHistogramView.dataIsOutdated();
1.1833 + var filterNameInput = document.getElementById("filterName");
1.1834 + var updateRequest = Parser.updateFilters({
1.1835 + mergeFunctions: gMergeFunctions,
1.1836 + nameFilter: (filterNameInput && filterNameInput.value) || gQueryParamFilterName || "",
1.1837 + sampleFilters: gSampleFilters,
1.1838 + jankOnly: gJankOnly,
1.1839 + javascriptOnly: gJavascriptOnly
1.1840 + });
1.1841 + var start = Date.now();
1.1842 + updateRequest.addEventListener("finished", function (filteredSamples) {
1.1843 + gCurrentlyShownSampleData = filteredSamples;
1.1844 + gInfoBar.display();
1.1845 +
1.1846 + if (gSampleFilters.length > 0 && gSampleFilters[gSampleFilters.length-1].type === "PluginView") {
1.1847 + start = Date.now();
1.1848 + gPluginView.display(gSampleFilters[gSampleFilters.length-1].pluginName, gSampleFilters[gSampleFilters.length-1].param,
1.1849 + gCurrentlyShownSampleData, gHighlightedCallstack);
1.1850 + } else {
1.1851 + gPluginView.hide();
1.1852 + }
1.1853 + });
1.1854 +
1.1855 + var histogramRequest = Parser.calculateHistogramData();
1.1856 + histogramRequest.addEventListener("finished", function (data) {
1.1857 + start = Date.now();
1.1858 + gHistogramView.display(data.histogramData, data.frameStart, data.widthSum, gHighlightedCallstack);
1.1859 + if (gFrameView)
1.1860 + gFrameView.display(data.histogramData, data.frameStart, data.widthSum, gHighlightedCallstack);
1.1861 + });
1.1862 +
1.1863 + if (gDiagnosticBar) {
1.1864 + var diagnosticsRequest = Parser.calculateDiagnosticItems(gMeta);
1.1865 + diagnosticsRequest.addEventListener("finished", function (diagnosticItems) {
1.1866 + start = Date.now();
1.1867 + gDiagnosticBar.display(diagnosticItems);
1.1868 + });
1.1869 + }
1.1870 +
1.1871 + viewOptionsChanged();
1.1872 +}
1.1873 +
1.1874 +function viewOptionsChanged() {
1.1875 + gTreeManager.dataIsOutdated();
1.1876 + var filterNameInput = document.getElementById("filterName");
1.1877 + var updateViewOptionsRequest = Parser.updateViewOptions({
1.1878 + invertCallstack: gInvertCallstack,
1.1879 + mergeUnbranched: gMergeUnbranched
1.1880 + });
1.1881 + updateViewOptionsRequest.addEventListener("finished", function (calltree) {
1.1882 + var start = Date.now();
1.1883 + gTreeManager.display(calltree, gSymbols, gFunctions, gResources, gMergeFunctions, filterNameInput && filterNameInput.value);
1.1884 + });
1.1885 +}
1.1886 +
1.1887 +function loadQueryData(queryDataOriginal) {
1.1888 + var isFiltersChanged = false;
1.1889 + var queryData = {};
1.1890 + for (var i in queryDataOriginal) {
1.1891 + queryData[i] = unQueryEscape(queryDataOriginal[i]);
1.1892 + }
1.1893 + if (queryData.search) {
1.1894 + gQueryParamFilterName = queryData.search;
1.1895 + isFiltersChanged = true;
1.1896 + }
1.1897 + if (queryData.jankOnly) {
1.1898 + gJankOnly = queryData.jankOnly;
1.1899 + isFiltersChanged = true;
1.1900 + }
1.1901 + if (queryData.javascriptOnly) {
1.1902 + gJavascriptOnly = queryData.javascriptOnly;
1.1903 + isFiltersChanged = true;
1.1904 + }
1.1905 + if (queryData.mergeUnbranched) {
1.1906 + gMergeUnbranched = queryData.mergeUnbranched;
1.1907 + isFiltersChanged = true;
1.1908 + }
1.1909 + if (queryData.invertCallback) {
1.1910 + gInvertCallstack = queryData.invertCallback;
1.1911 + isFiltersChanged = true;
1.1912 + }
1.1913 + if (queryData.report) {
1.1914 + gReportID = queryData.report;
1.1915 + }
1.1916 + if (queryData.filter) {
1.1917 + var filterChain = JSON.parse(queryData.filter);
1.1918 + gSampleFilters = filterChain;
1.1919 + }
1.1920 + if (queryData.selection) {
1.1921 + var selection = queryData.selection;
1.1922 + gRestoreSelection = selection;
1.1923 + }
1.1924 +
1.1925 + if (isFiltersChanged) {
1.1926 + //filtersChanged();
1.1927 + }
1.1928 +}
1.1929 +
1.1930 +function unQueryEscape(str) {
1.1931 + return decodeURIComponent(str);
1.1932 +}
1.1933 +
1.1934 +function queryEscape(str) {
1.1935 + return encodeURIComponent(encodeURIComponent(str));
1.1936 +}
1.1937 +
1.1938 +function updateDocumentURL() {
1.1939 + location.hash = getDocumentHashString();
1.1940 + return document.location;
1.1941 +}
1.1942 +
1.1943 +function getDocumentHashString() {
1.1944 + var query = "";
1.1945 + if (gReportID) {
1.1946 + if (query != "")
1.1947 + query += "&";
1.1948 + query += "report=" + queryEscape(gReportID);
1.1949 + }
1.1950 + if (document.getElementById("filterName") != null &&
1.1951 + document.getElementById("filterName").value != null &&
1.1952 + document.getElementById("filterName").value != "") {
1.1953 + if (query != "")
1.1954 + query += "&";
1.1955 + query += "search=" + queryEscape(document.getElementById("filterName").value);
1.1956 + }
1.1957 + // For now don't restore the view rest
1.1958 + return query;
1.1959 + if (gJankOnly) {
1.1960 + if (query != "")
1.1961 + query += "&";
1.1962 + query += "jankOnly=" + queryEscape(gJankOnly);
1.1963 + }
1.1964 + if (gJavascriptOnly) {
1.1965 + if (query != "")
1.1966 + query += "&";
1.1967 + query += "javascriptOnly=" + queryEscape(gJavascriptOnly);
1.1968 + }
1.1969 + if (gMergeUnbranched) {
1.1970 + if (query != "")
1.1971 + query += "&";
1.1972 + query += "mergeUnbranched=" + queryEscape(gMergeUnbranched);
1.1973 + }
1.1974 + if (gInvertCallstack) {
1.1975 + if (query != "")
1.1976 + query += "&";
1.1977 + query += "invertCallback=" + queryEscape(gInvertCallstack);
1.1978 + }
1.1979 + if (gSampleFilters && gSampleFilters.length != 0) {
1.1980 + if (query != "")
1.1981 + query += "&";
1.1982 + query += "filter=" + queryEscape(JSON.stringify(gSampleFilters));
1.1983 + }
1.1984 + if (gTreeManager.hasNonTrivialSelection()) {
1.1985 + if (query != "")
1.1986 + query += "&";
1.1987 + query += "selection=" + queryEscape(gTreeManager.serializeCurrentSelectionSnapshot());
1.1988 + }
1.1989 + if (!gReportID) {
1.1990 + query = "uploadProfileFirst!";
1.1991 + }
1.1992 +
1.1993 + return query;
1.1994 +}
1.1995 +
