wbamberg

<iframe frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen width="640" height="360" name="vidly-frame" src="http://s.vid.ly/embeded.html?link=9g8h9f&new=1&autoplay=false&hd=yes"><a target="_blank" href="http://vid.ly/9g8h9f"><img src="http://vid.ly/9g8h9f/poster" /></a></iframe>

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

wbamberg

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:

wbamberg

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.

wbamberg

var primes = [];
var n = 100000;

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

wbamberg

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.

wbamberg

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) {

wbamberg

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

function listen() {
  WebRequest.onSendHeaders.addListener(listener, {}, ["requestHeaders"]);
}

function listener(e) {
  console.log("onSendHeaders");
  console.log(e);
}

wbamberg

Testing out the WebExtensions API

First, you need to set up Firefox:

• download, install, and launch Firefox Nightly.
• flip the preference that controls whether Firefox allows you to install unsigned add-ons:
  • type about:config into the URL bar in Firefox
  • in the Search box type "xpinstall.signatures.required"
• double-click the preference, or right-click and selected "Toggle", to set it to false.

wbamberg

this.addEventListener('click', function(event) {
  if(event.button == 0 && event.shiftKey == false)
    self.port.emit('left-click');

  if(event.button == 2 || (event.button == 0 && event.shiftKey == true))
    self.port.emit('right-click');
    event.preventDefault();
}, true);