paulirish

{ style: 'unit', unit: 'millisecond', unitDisplay: 'narrow' }

┌─────────┬───────────┬─────────────────┬─────────────────┬───────┐
│ (index) │ locale    │ text            │ browser         │ same  │
├─────────┼───────────┼─────────────────┼─────────────────┼───────┤
│ 0       │ 'af'      │ '123,5 ms.'     │ '123,5 ms.'     │ true  │
│ 1       │ 'am'      │ '123.5 ሚሴ'      │ '123.5 ሚሴ'      │ true  │
│ 2       │ 'ar'      │ '١٢٣٫٥ ملي ث'   │ '123.5 ملي ث'   │ false │
│ 3       │ 'as'      │ '১২৩.৫ মিঃ ছেঃ' │ '123.5ms'       │ false │
│ 4       │ 'az'      │ '123,5 msan'    │ '123.5ms'       │ false │

paulirish

containment recap

• none (default)
• layout, paint, style - the easy ones.
  • content === these three
  • bonus benefit of contain: layout -- any pos:fixed children will be relative to it.
• size - harder. the element must define its own size, can't rely on laying out its children.
  • strict === content + size
  • inline-size - dunno? size but for display:inline-ish things?

paulirish

// Log all DOM mutations to console.

// Modern interpretation of https://github.com/kdzwinel/DOMListenerExtension

observer = new MutationObserver(onMutation);
observerSettings = {
  subtree: true,
  childList: true,
  attributes: true,
  attributeOldValue: true,

paulirish

/**
 * To use:
 * Export a Recording panel recording as JSON. Run this:
 *    node generate-pptr-lh-script-from-json.mjs yourjson.json
 * It'll save a `yourjson.json.pptr.js`
 *   That script is dependent on:
 *      [email protected]
 *      [email protected]
 * Run that script. It'll save a `flow.report.html`. View that. 
 *   It's one of these: https://web.dev/lighthouse-user-flows/

paulirish

// this is pretty quick and rough.. but it works
// script.google.com
// settings to allow editing the appscript.json
// set these two files
// then hit Run with function 'run'


const all = {};

function run() {

paulirish

'use strict';

import fs from 'fs';
import puppeteer from 'puppeteer';

import {navigation} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

// Run Lighthouse headlessly, just Performance
(async function() {
  const browser = await puppeteer.launch({headless: true});

paulirish

// works great on about:dino

// 1. save this file to your snippets.
// 2. load about:dino
// 3. evaluate the snippet
// 4. hit up arrow to trigger the game.
// 5. profit

(function() {
  perfnow = performance.now;

paulirish

document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';


function getPayload(item) {
  const kind = item.kind;
  switch (kind) {
    case 'string': return new Promise(res => item.getAsString(res));
    case 'file': return Promise.resolve(item.getAsFile());
    default: throw new Error('unknown item kind! ' + kind);  
  }    

paulirish

'use strict';

/* eslint-disable */

const fs = require('fs');
const path = require('path');

const ReportGenerator = require('../../lighthouse-core/report/report-generator');

const jsonPath = __dirname + '/../_json/';

paulirish

// Expected Queueing Time
// https://docs.google.com/document/d/1Vgu7-R84Ym3lbfTRi98vpdspRr1UwORB4UV-p9K1FF0/edit
// Initial impl by Nicolás Peña (npm), Tim Dresser (tdresser)

// Usage:
//     var eqt = EQT.begin();
//     // ...
//     const {expectedQueueingTime} = EQT.end();
class EQT {
  constructor() {