wbamberg

Performance tool

UI Overview

[annotated screenshot]

The performance tool's UI consists of 8 main pieces:

toolbar: start/stop recording, import, clear, switch main view, access settings
recordings pane: save and switch between recordings

Understanding the CSS box model for inline elements

In a web page, every element is rendered as a rectangular box. The box model describes how the element's content, padding, border, and margin determine the space occupied by the element and its relation to other elements in the page.

Depending on the element's display property, its box may be one of two types: a block box or an inline box. The box model is applied differently to these two types. In this article we'll see how the box model is applied to inline boxes, and how a new feature in the Firefox Developer Tools can help you visualize the box model for inline elements.

Inline boxes and line boxes

Inline boxes are laid out horizontally in a box called a line box:

Some general stuff

Snow

Usually there's still snow in the alpine in June. This can mean a couple of things: (1) it's less enjoyable tramping through rotten snow than solid ground, and (2) for some hikes you might need additional safety equipment (ice axe and crampons) in the snow than you would otherwise.

This winter there's been much less snow than usual, so most hikes will probably be snow-free, even in the alpine. But a lot still depends on what happens with the weather in May and June: if it warms up, the snow melts fast, but otherwise it can hang around.

So, check what the snow conditions are like for the hike you're considering.

You can find complete docs for the performance tools on MDN. These include a tour of the UI, reference pages for each of the main tools, and some examples in which we use the tools to diagnose performance problems in CSS animations and JavaScript-heavy pages.

	var content = document.getElementById("content");

	window.addEventListener("message", function(event) {
	var debuggee = event.ports[0];
	volcan.connect(debuggee).
	then(listTabs).
	then(getCurrentStyleSheets).
	then(writeStyleSheetsLength);
	});


	var tabs = require("sdk/tabs");
	var { viewFor } = require("sdk/view/core");

	function onOpen(tab) {
	let xulTab = viewFor(tab);
	let contentWindow = xulTab.ownerDocument.defaultView;
	contentWindow.addEventListener("hashchange", logHashChange, false);
	}


	// do not do this in a real add-on, use contentScriptFile instead.
	var listener = "window.addEventListener('hashchange', function() {" +
	" alert(window.location.hash);" +
	"}, false);"

	var pageMod = require("sdk/page-mod").PageMod({
	include: "*.google.ca",
	contentScript: listener
	});

	var primes = [];
	var n = 100000;

	function isPrime(i) {
	if (i == n) {
	console.log(primes);
	console.timeStamp("done");
	return;
	}

	let {WebRequest} = Cu.import("resource://gre/modules/WebRequest.jsm", {});

	let pattern = /https:\/\/mdn\.mozillademos\.org\/.*/;

	function listen(event) {
	event.addListener(redirect, {urls: [pattern], types: ["image"]},
	["blocking"]);
	}

	function redirect(e) {