Category: Mozilla

Karl Dubost: Week notes – 2019 w47 – worklog

Karl Dubost: Week notes – 2019 w47 – worklog

Week Notes?

Week Notes. I’m not sure I will be able to commit to this. But they have a bit of revival around my blogging reading echo chamber. Per revival, I mean I see them again.

The Open Data Institute just started one with a round about them. I subscribed again to the feed of Brian Suda and his own week notes. Alice Bartlett has also a very cool personal, down to earth and simple summary of her week. I love that she calls them weaknotes She’s on week 63 by now.

So these will not be personal but more covering a bit of the things I (we?) do, learn, fail about webcompat. The only way to do that is to write down properly things. The possible issues: redundancy in writing things elsewhere, the fatigue associated with the regularity. I did a stretch of worklogs in the past.


Firefox Usage Counters

I need to better understand how counters are working inside Firefox so the numbers become more meaningful. And probably it would be good to understand how they operate at Chrome too. How the counter works when a property is used inside a condition. For example in JavaScript with a construct like:

var mypath = event.path || event.composedPath()

These are probably questions for Boris Bzarsky. Maybe a presentation at All Hands Berlin would be cool on the topic.

  • What is happening if the browser implements both, how are they counted?
  • What is happening if the browser implements one of these, how are they counted?
  • Is the order matters for the counter?
  • What are the induced differences if the counter is tracking only one of the property and not the two?
  • Can a counter track something which is in the source code but not implemented in the engine. For instance, tracking event.path which is undefined.

Python tests

We currently do AB testing for for a new form with the goal to improve the quality of the bugs reported. The development has not been an entirely smooth road, and there are still a lot of things to fix, and particulary the missing tests. Our objective is that if the AB testing experiment is successful. We will be rewriting properly the code, and more specifically the tests. So instead of fixing the code, I was thinking that we could just add the tests, so we have a solid base when it’s time for rewriting. We’ll see. Then Mike was worried that we would break continuous integration. We use nose for running our unittest tests. There is a plugin in nose for creating groups of tests by setting an attr.

from nose.plugins.attrib import attr
class WizardFormTest:
    def test_exclusive_wizard(self):

So we could probably deactivate these specific tests. So this is something to explore.

Webcompat dev

  • Discussions with Kate about DB migrations.
  • Trying to understand what GitHub really does with linked images, because it might have consequences for our own images hosting.
  • Making a local prototype of image upload with the Bottle framework. So I can think differently about it. Bottle is super nice for quick prototyping/thinking. That looks doable. In the end it will be probably done with Flask. It helped identified some issues and some cool things we do.



  • I have the feeling I could write a counterpart for this blog post about work commuting. There’s probably something about work and the circumstances of your country.
  • This blog post was followed by a series of internal discussions on the nature of commuting, the reason to commute or not, etc. As usual, a lot of things need to be unpacked when we talk about commuting.
  • Impressive and interesting to look at the differences. Female developers in the world from hackerrank

System abuse? or goofing

  • A user reported two invalid bugs and deleted his accounts. It’s always for me a surprise when people try to abuse a system which has no power.

Some notes about the week notes

  • Should adding pieces be about a linear timeline of events when they happen OR should it be about categories like I did above?
  • Was it too long? Oversharing? All of these are notes taken on the last 5 days. And I’m surprised by the amount.
  • My work is not linear on one task, which means updates to many tasks are happening in a couple of hours or days.


Cameron Kaiser: TenFourFox FPR17b1 available

TenFourFox Feature Parity Release 17 beta 1 is now available (downloads, hashes, release notes). SourceForge seems to have fixed whatever was making TenFourFox barf on its end which now might actually be an issue over key exchange. For a variety of reasons, but most importantly backwards compatibility, my preference has been to patch up the NSS security library in TenFourFox to support new crypto and ciphers rather than just drop in a later version. We will see if the issue recurs.

This release fixes the “infinite loop” issue on Github with a trivial “hack” mitigation. This mitigation makes JavaScript slightly faster as a side-effect but it’s because it relaxes some syntax constraints in the runtime, so I don’t consider this a win really. It also gets rid of some debug-specific functions that are web-observable and clashed on a few pages, an error Firefox corrected some time ago but missed my notice. Additionally, since 68ESR newly adds the ability to generate and click on links without embedding them in the DOM, I backported that patch so that we can do that now too (a 4-year-old bug only recently addressed in Firefox 70). Apparently this functionality is required for certain sites’ download features and evidently this was important enough to merit putting in an extended support release, so we will follow suit.

I also did an update to cookie security, with more to come, and cleared my backlog of some old performance patches I had been meaning to backport. The most important of these substantially reduces the amount of junk strings JavaScript has hanging around, which in turn reduces memory pressure (important on our 32-bit systems) and garbage collection frequency. Another enables a fast path for layout frames with no properties so we don’t have to check the hash tables as frequently.

By user request, this version of TenFourFox also restores the old general.useragent.override.* site-specific override pref feature. This was removed in bug 896114 for performance reasons and we certainly don’t need anything that makes the browser any slower, so instead of just turning it back on I also took the incomplete patch in that bug as well and fixed and finished it. This means, in the default state with no site-specific overrides, there is no penalty. This is the only officially supported state. I do not have any plans to expose this feature to the UI because I think it will be troublesome to manage and the impact on loading can be up to 9-10%, so if you choose to use this, you do so at your own risk. I’ve intentionally declined to mention it in the release notes or to explain any further how this works since only the people who already know what it does and how it operates and most importantly why they need it should be using it. For everyone else, the only official support for changing the user agent remains the global selector in the TenFourFox preference pane (which I might add now allows you to select Firefox 68 if needed). Note that if you change the global setting and have site-specific overrides at the same time, the browser’s behaviour becomes “officially undefined.” Don’t file any bug reports on that, please.

Finally, this release also updates the ATSUI font blacklist and basic adblock database, and has the usual security, certificate, pin, HSTS and TLD updates. Assuming no issues, it will go live on December 2nd or thereabouts.

For FPR18, one thing I would like to improve further is the built-in Reader mode to at least get it more consistent with current Firefox releases. Since layout is rapidly approaching its maximum evolution (as determined by the codebase, the level of work required and my rapidly dissipating free time), the Reader mode is probably the best means for dealing with the (fortunately relatively small) number of sites right now that lay out problematically. There are some other backlogged minor changes I would like to consider for that release as well. However, FPR18 will be parallel with the first of the 4-week cadence Firefox releases and as I have mentioned before I need to consider how sustainable that is with my other workloads, especially as most of the low-hanging fruit has long since been picked.

Hacks.Mozilla.Org: Multi-Value All The Wasm!

Hacks.Mozilla.Org: Multi-Value All The Wasm!

This article is cross-posted on the Bytecode Alliance web site.

Multi-value is a proposed extension to core WebAssembly that enables functions to return many values, among other things. It is also a pre-requisite for Wasm interface types.

I’ve been adding multi-value support all over the place recently:

  • I added multi-value support to all the various crates in the Rust and WebAssembly toolchain, so that Rust projects can compile down to Wasm code that uses multi-value features.

  • I added multi-value support to Wasmtime, the WebAssembly runtime built on top of the Cranelift code generator, so that it can run Wasm code that uses multi-value features.

Now, as my multi-value efforts are wrapping up, it seems like a good time to reflect on the experience and write up everything that’s been required to get all this support in all these places.

Wait — What is Multi-Value Wasm?

In core WebAssembly, there are a couple of arity restrictions on the language:

  • functions can only return either zero or one value, and
  • instruction sequences like blocks, ifs, and loops cannot consume any stack values, and may only produce zero or one resulting stack value.

The multi-value proposal is an extension to the WebAssembly standard that lifts these arity restrictions. Under the new multi-value Wasm rules:

  • functions can return an arbitrary number of values, and
  • instruction sequences can consume and produce an arbitrary number of stack values.

The following snippets are only valid under the new rules introduced in the multi-value Wasm proposal:

;; A function that takes an `i64` and returns
;; three `i32`s.
(func (param i64) (result i32 i32 i32)

;; A loop that consumes an `i32` stack value
;; at the start of each iteration.
loop (param i32)

;; A block that produces two `i32` stack values.
block (result i32 i32)

The multi-value proposal is currently at phase 3 of the WebAssembly standardization process.

But Why Should I Care?

Code Size

There are a few scenarios where compilers are forced to jump through hoops when producing multiple stack values for core Wasm. Workarounds include introducing temporary local variables, and using local.get and local.set instructions, because the arity restrictions on blocks mean that the values cannot be left on the stack.

Consider a scenario where we are computing two stack values: the pointer to a string in linear memory, and its length. Furthermore, imagine we are choosing between two different strings (which therefore have different pointer-and-length pairs) based on some condition. But whichever string we choose, we’re going to process the string in the same fashion, so we just want to push the pointer-and-length pair for our chosen string onto the stack, and control flow can join afterwards.

With multi-value, we can do this in a straightforward fashion:

call $compute_condition
if (result i32 i32)
call $get_first_string_pointer
call $get_first_string_length
call $get_second_string_pointer
call $get_second_string_length

This encoding is also compact: only sixteen bytes!

When we’re targeting core Wasm, and multi-value isn’t available, we’re forced to pursue alternative, more convoluted forms. We can smuggle the stack values out of each if and else arm via temporary local values:

;; Introduce a pair of locals to hold the values
;; across the instruction sequence boundary.
(local $string i32)
(local $length i32)

call $compute_condition
call $get_first_string_pointer
local.set $string
call $get_first_string_length
local.set $length
call $get_second_string_pointer
local.set $string
call $get_second_string_length
local.set $length

;; Restore the values onto the stack, from their
;; temporaries.
local.get $string
local.get $length

This encoding requires 30 bytes, an overhead of fourteen bytes more than the ideal multi-value version. And if we were computing three values instead of two, there would be even more overhead, and the same is true for four values, etc… The additional overhead is proportional to how many values we’re producing in the if and else arms.

We can actually go a little smaller than that — still with core Wasm — by jumping through a different hoop. We can split this into two if ... else ... end blocks and duplicate the condition check to avoid introducing temporaries for each of the computed values themselves:

;; Introduce a local for the condition, so that
;; we only re-check it, and don't recompute it.
(local $condition i32)

;; Compute and save the condition.
call $compute_condition
local.set $condition

;; Compute the first stack value.
local.get $condition
if (result i32)
call $get_first_string_pointer
call $get_second_string_pointer

;; Compute the second stack value.
local.get $condition
if (result i32)
call $get_first_string_length
call $get_second_string_length

This gets us down to 28 bytes. Two fewer than the last version, but still an overhead of twelve bytes compared to the multi-value encoding. And the overhead is still proportional to how many values we’re computing.

There’s no way around it: we need multi-value to get the most compact code here.

New Instructions

The multi-value proposal opens up the possibility for new instructions that produce multiple values:

  • An i32.divmod instruction of type [i32 i32] -> [i32 i32] that takes a numerator and divisor and produces both their quotient and remainder.

  • Arithmetic operations with an additional carry result. These could be used to better implement big ints, overflow checks, and saturating arithmetic.

Returning Small Structs More Efficiently

Returning multiple values from functions will allow us to more efficiently return small structures like Rust’s Results. Without multi-value returns, these relatively small structs that still don’t fit in a single Wasm value type get placed in linear memory temporarily. With multi-value returns, the values don’t escape to linear memory, and instead stay on the stack. This can be more efficient, since Wasm stack values are generally more amenable to optimization than loads and stores from linear memory.

Interface Types

Shrinking code size is great, and new instructions would be fancy, but here’s what I’m really excited about: WebAssembly interface types. Interface types used to be called “host bindings,” and they are the key to unlocking:

  • direct, optimized access to the browser’s DOM methods on the Web,
  • “shared-nothing linking” of WebAssembly modules, and
  • defining language-neutral interfaces, like WASI.

For all three use cases, we might want to return a string from a callee Wasm module. The caller that is consuming this string might be a Web browser, or it might be another Wasm module, or it might be a WASI-compatible Wasm runtime. In any case, a natural way to return the string is as two i32s:

  1. a pointer to the start of the string in linear memory, and
  2. the byte length of the string.

The interface adapter can then lift that pair of i32s into an abstract string type, and then lower it into the caller’s concrete string representation on the other side. Interface types are designed such that in most cases, this lifting and lowering can be optimized into a quick memory copy from the callee’s linear memory to the caller’s.

But before the interface adapters can do that lifting and lowering, they need access to the pointer and length pair, which means the callee Wasm function needs to return two values, which means we need multi-value Wasm for interface types.

All The Implementing!

Now that we know what multi-value Wasm is, and why it’s exciting, I’ll recount the tale of implementing support for it all over the place. I started with implementing multi-value support in the Rust and WebAssembly toolchain, and then I added support to the Wasmtime runtime, and the Cranelift code generator it’s built on top of.

Rust and WebAssembly Toolchain

What falls under the Rust and Wasm toolchain umbrella? It is a superset of the general Rust toolchain:

  • cargo: Manages builds and dependencies.
  • rustc: Compiles Rust sources into code.
  • LLVM: Used by rustc under the covers to optimize and generate code.

And then additionally, when targeting Wasm, we also use a few more moving parts:

  • wasm-bindgen: Part library and part Wasm post-processor, wasm-bindgen generates bindings for consuming and producing interfaces defined with interface types (and much more!)
  • walrus: A library for transforming and rewriting WebAssembly modules, used by wasm-bindgen‘s post-processor.
  • wasmparser: An event-style parser for WebAssembly binaries, used by walrus.

Here’s a summary of the toolchain’s pipeline, showing the inputs and outputs between tools:

My goal is to unlock interface types with multi-value functions. For now, I haven’t been focusing on code size wins from generating multi-value blocks. For my purposes, I only need to introduce multi-value functions at the edges of the Wasm module that talk to interface adapters; I don’t need to make all function bodies use the optimal multi-value instruction sequence constructs. Therefore, I decided to have wasm-bindgen‘s post-processor rewrite certain functions to use multi-value returns, rather than add support in LLVM.0 With this approach I only needed to add support to the following tools:

  • cargo
  • rustc
  • LLVM
  • wasm-bindgen
  • walrus
  • wasmparser

wasmparser is an event-style parser for WebAssembly binaries. It may seem strange that adding toolchain support for generating multi-value Wasm began with parsing multi-value Wasm. But it is necessary to make testing easy and painless, and we needed it eventually for Wasmtime anyways, which also uses wasmparser.

In core Wasm, the optional value type result of a block, loop, or if is encoded directly in the instruction:

  • a 0x40 byte means there is no result
  • a 0x7f byte means there is a single i32 result
  • a 0x7e byte means there is a single i64 result
  • etc…

With multi-value Wasm, there are not only zero or one resulting value types, there are also parameter types. Blocks can have the same set of types that functions can have. Functions already de-duplicate their types in the “Type” section of a Wasm binary and reference them via index. With multi-value, blocks do that now as well. But how does this co-exist with non-multi-value block types?

The index is encoded as a signed variable-length integer, using the LEB128 encoding. If we interpret non-multi-value blocks’ optional result value type as a signed LEB128, we get:

  • -64 (the smallest number that can be encoded as a single byte with signed LEB128) means there is no result
  • -1 means there is a single i32 result
  • -2 means there is a single i64 result
  • etc..

They’re all negative, leaving the positive numbers to be interpreted as indices into the “Type” section for multi-value blocks! A nice little encoding trick and bit of foresight from the WebAssembly standards folks.

Adding support for parsing these was straightforward, but wasmparser also supports validating the Wasm as it parses it. Adding validation support was a little bit more involved.

wasmparser‘s validation implementation is similar to the validation algorithm presented in the appendix of the WebAssembly spec: it abstractly interprets the Wasm instructions, maintaining a stack of types, rather than a stack of values. If any operation uses operands of the wrong type — for example the stack has an f32 at its top when we are executing an i32.add instruction, and therefore expect two i32s on top of the stack — then validation fails. If there are no type errors, then it succeeds. There are some complications when dealing with stack-polymorphic instructions, like drop, but they don’t really interact with multi-value.

Whenever wasmparser encounters a block, loop, or if instruction, it pushes an associated control frame, that keeps track of how deep in the stack instructions within this block can access. Before multi-value, the limit was always the length of the stack upon entering the block, because blocks didn’t take any values from the stack. With multi-value, this limit becomes stack.len() - block.num_params(). When exiting a block, wasmparser pops the associated control frame. It check that the top n types on the stack match the block’s result types, and that the stack’s length is frame.depth + n. Before multi-value, n was always either 0 or 1, but now it can be any non-negative integer.

The final bit of validation that is impacted by multi-value is when an if needs to have an else or not. In core Wasm, if the if does not produce a resulting value on the stack, it doesn’t need an else arm since the whole if‘s typing is [] -> [] which is also the typing for a no-op. With multi-value this is generalized to any if where the inputs and outputs are the same types: [t*] -> [t*]. Easy to implement, but also very easy to overlook (like I originally did!)

Multi-value support was added to wasmparser in these pull requests:


walrus is a WebAssembly to WebAssembly transformation library. We use it to generate glue code in wasm-bindgen and to polyfill WebAssembly features.

walrus constructs its own intermediate representation (IR) for WebAssembly. Similar to how wasmparser validates Wasm instructions, walrus also abstractly interprets the instructions while building up its IR. This meant that adding support for constructing multi-value IR to walrus was very similar to adding multi-value validation support to wasmparser. In fact, walrus also validates the Wasm while it is constructing its IR.

But multi-value has big implications for the IR itself. Before multi-value, you could view Wasm’s stack-based instructions as a post-order encoding of an expression tree.

Consider the expression (a + b) * (c - d). As an expression tree, it looks like this:

+ -
/  / 
a b c d

A post-order traversal of a tree is where a node is visited after its children. A post-order traversal of our example expression tree would be:

a b + c d - *

Assume that a, b, c, and d are Wasm locals of type i32, with the values 9, 7, 5, and 3 respectively. We can convert this post-order directly into a sequence of Wasm instructions that build up their results on the Wasm stack:

;; Instructions ;; Stack
local.get $a ;; [9]
local.get $b ;; [9, 7]
i32.add ;; [16]
local.get $c ;; [16, 5]
local.get $d ;; [16, 5, 3]
i32.sub ;; [16, 2]
i32.mul ;; [32]

This correspondence between trees and Wasm stack instructions made using a tree-like IR in walrus, where nodes are instructions and a node’s children are the instructions that produce the parent’s input values, very natural.1 Our IR used to look something like this:

pub enum Expr {
// A `local.get` instruction.

// An `i32.add` instruction.
I32Add(ExprId, ExprId),

// Etc...

But multi-value threw a wrench in this tree-like representation: now that an instruction can produce multiple values, when we have a parent⟶child edge in the tree, how do we know which of the child’s resulting values the parent wants to use? And also, if two different parents are each using one of the two values an instruction generates, we fundamentally don’t have a tree anymore, we have a directed, acyclic graph (DAG).

We considered generalizing our tree representation into a DAG, and labeling edges with n to represent using the nth resulting value of an instruction. We weighed the complexity of implementing this representation against what our current use cases in wasm-bindgen demand, along with any future use cases we could think of. Ultimately, we decided it wasn’t worth the effort, since we don’t need that level of detail for any of the transformations or manipulations that wasm-bindgen performs, or that we foresee it doing in the future.

Instead, we decided that within a block, representing instructions as a simple list is good enough for our use cases, so now our IR looks something like this:

pub struct Block(Vec);

pub enum Instr {
// A `local.get` instruction.

// An `i32.add` instruction. Note that its
// children are left implicit now.

// Etc...

Additionally, it turns out it is faster to construct and traverse this list-based representation, so switching representations in walrus also gave wasm-bindgen a nice little speed up.

The walrus support for multi-value was implemented in these pull requests:


wasm-bindgen facilitates high-level interactions between Wasm modules and their host. Often that host is a Web browser and its DOM methods, or some user-written JavaScript. Other times it is an outside-the-Web Wasm runtime, like Wasmtime, using WASI and interface types. wasm-bindgen acts as a polyfill for the interface types proposal, plus some extra batteries included for a powerful user experience.

One of wasm-bindgen‘s responsibilities is translating the return value of a Wasm function into something that the host caller can understand. When using interface types directly with Wasmtime, this means generating interface adapters that lift the concrete Wasm return values into abstract interface types. When the caller is some JavaScript code on the Web, it means generating some JavaScript code to convert the Wasm values into JavaScript values.

Let’s take a look at some Rust functions and the Wasm they get compiled down into.

First, consider when we are returning a single integer from a Rust function:


pub extern "C" fn get_random_int() -> i32 {
// Chosen by fair dice roll.

And here is the disassembly of that Rust code compiled to Wasm:

;; random.wasm

(func $get_random_int (result i32)
i32.const 4

The resulting Wasm function’s signature is effectively identical to the Rust function’s signature. No surprises here. It is easy for wasm-bindgen to translate the resulting Wasm value to whatever is needed because wasm-bindgen has direct access to it; it’s right there.

Now let’s look at returning compound structures from Rust that don’t fit in a single Wasm value:


pub extern "C" fn make_pair(a: i32, b: i32) -> [i32; 2] {
[a, b]

And here is the disassembly of this new Rust code compiled to Wasm:

;; pair.wasm

(func $make_pair (param i32 i32 i32)
local.get 0
local.get 2 offset=4
local.get 0
local.get 1

The signature for the make_pair function in pair.wasm doesn’t look like its corresponding signature in! It has three parameters instead of two, and it isn’t returning any values, let alone a pair.

What’s happening is that LLVM doesn’t support multi-value yet so it can’t return two i32s directly from the function. Instead, callers pass in a “struct return” pointer to some space that they’ve reserved for the return value, and make_pair will write its return value through that struct return pointer into the reserved space. By convention, LLVM uses the first parameter as the struct return pointer, so the second Wasm parameter is our original a parameter in Rust and the third Wasm parameter is our original b parameter in Rust. We can see that the Wasm function is writing the b field first, and then the a field second.

How is space reserved for the struct return? Distinct from the Wasm standard’s stack that instructions push values to and pop values from, LLVM emits code to maintain a “shadow stack” in linear memory. There is a global dedicated as the stack pointer, and always points to the top of the stack. Non-leaf functions that need some scratch space of their own will decrement the stack pointer to allocate some space on entry (since the stack grows down, and its “top” of the stack is its lowest address) and will increment it to deallocate that space on exit. Leaf functions that don’t call any other function can skip incrementing and decrementing this stack pointer, which is exactly why we didn’t see make_pair messing with the stack pointer.

To verify that callers are allocating space for the return struct in the shadow stack, let’s create a function that calls make_pair and then inspect its disassembly:


pub extern "C" fn make_default_pair() -> [i32; 2] {
make_pair(42, 1337)

I’ve annotated default_make_pair‘s disassembly below to make it clear how the shadow stack pointer is manipulated to create space for return values and how the pointer to that space is passed to make_pair:

;; pair.wasm

(func $make_default_pair (param i32)
(local i32)

;; Reserve 16 bytes of space in the shadow
;; stack. We only need 8 bytes, but LLVM keeps
;; the stack pointer 16-byte aligned. Global 0
;; is the stack pointer.
global.get 0
i32.const 16
local.tee 1
global.set 0

;; Get a pointer to the last 8 bytes of our
;; shadow stack space. This is our struct
;; return pointer argument, where the result
;; of `make_pair` will be written to.
local.get 1
i32.const 8

;; Call `make_pair` with the struct return
;; pointer and our default values.
i32.const 42
i32.const 1337
call $make_pair

;; Copy the resulting pair into our own struct
;; return pointer's space. LLVM optimized this
;; into a single `i64` load and store, instead
;; of two `i32` load and stores.
local.get 0
local.get 1
i64.load offset=8 align=4

;; Restore the stack pointer to the original
;; value it had upon entering this function,
;; deallocating our shadow stack frame.
local.get 1
i32.const 16
global.set 0

When the caller is JavaScript, wasm-bindgen can use its knowledge of these calling conventions to generate JavaScript glue code that allocates shadow stack space, calls the function with the struct return pointer argument, reads the values out of linear memory, and finally deallocates the shadow stack space before converting the Wasm values into some JavaScript value.

But when using interface types directly, rather than polyfilling them, we can’t rely on generating glue code that has access to the Wasm module’s linear memory. First, the memory might not be exported. Second, the only glue code we have is interface adapters, not arbitrary JavaScript code. We want those values as proper return values, rather than through a side channel.

So I wrote a walrus transform in wasm-bindgen that converts functions that use a struct return pointer parameter without any actual Wasm return values, into multi-value functions that don’t take a struct return pointer parameter but return multiple resulting Wasm values instead. This transform is essentially a “reverse polyfill” for multi-value functions.

;; Before.
;; First parameter is a struct return pointer. No
;; return values, as they are stored through the
;; struct return pointer.
(func $make_pair (param i32 i32 i32)
;; ...

;; After.
;; No more struct return pointer parameter. Return
;; values are actual Wasm results.
(func $make_pair (param i32 i32) (result i32 i32)
;; ...

The transform is only applied to exported functions that take a struct return pointer parameter, and rather than rewriting the source function in place, the transform leaves it unmodified but removes it from the Wasm module’s exports list. It generates a new function that replaces the old one in the Wasm module’s exports list. This new function allocates shadow stack space for the return value, calls the original function, reads the values out of the shadow stack onto the Wasm value stack, and finally deallocates the shadow stack space before returning.

For our running make_pair example, the transform produces an exported wrapper function like this:

;; pair.wasm

(func $new_make_pair (param i32 i32) (result i32 i32)
;; Our struct return pointer that points to the
;; scratch space we are allocating on the shadow
;; stack for calling `$make_pair`.
(local i32)

;; Allocate space on the shadow stack for the
;; result.
global.get $shadow_stack_pointer
i32.const 8
local.tee 2
global.set $shadow_stack_pointer

;; Call the original `$make_pair` with our
;; allocated shadow stack space for its
;; results.
local.get 2
local.get 0
local.get 1
call $make_pair

;; Read the return values out of the shadow
;; stack and place them onto the Wasm stack.
local.get 2
local.get 2
i32.load offset=4

;; Finally, restore the shadow stack pointer.
local.get 2
i32.const 8
global.set $shadow_stack_pointer

With this transform in place, wasm-bindgen can now generate multi-value function exports along with associated interface adapters that lift the concrete Wasm return values into abstract interface types.

The multi-value support and transform were implemented in wasm-bindgen in these pull requests:

Wasmtime and Cranelift

Ok, so at this point, we can generate multi-value Wasm binaries with the Rust and Wasm toolchain — woo! But now we need to be able to run these binaries.

Enter Wasmtime, the WebAssembly runtime built on top of the Cranelift code generator. Wasmtime translates WebAssembly into Cranelift’s IR with the cranelift-wasm crate, and then Cranelift compiles the IR down to native machine code.

Implementing multi-value Wasm support in Wasmtime and Cranelift roughly involved two steps:

  1. Translating multi-value Wasm into Cranelift IR
  2. Supporting arbitrary numbers of return values in Cranelift
Translating Multi-Value Wasm into Cranelift IR

Cranelift has its own intermediate representation that it manipulates, optimizes, and legalizes before generating machine code for the target architecture. In order for Cranelift to compile some code, you need to translate whatever you’re working with into Cranelift’s IR. In our case, that means translating Wasm into Cranelift’s IR. This process is analogous to rustc converting its mid-level intermediate representation (MIR) to LLVM’s IR.2

Cranelift’s IR is made up of (extended) basic blocks3 containing code in single, static-assignment form (SSA). SSA, as the name implies, means that variables can only be assigned to when defined, and can’t ever be re-assigned:

;; `42 + 1337` in Cranelift IR
v0 = iconst.32 42
v1 = iconst.32 1337
v2 = iadd v0, v1

When translating to SSA form, most re-assignments to a variable x can be handled by defining a fresh x1 and replacing subsequent uses of x with x1, and then turning the next re-assignment into x2, etc. But that doesn’t work for points where control flow joins, such as the block following the consequent and alternative arms of an if/else.

Consider this Rust code, and how we might translate it into SSA:

let x;
if some_condition() {
// This version of `x` becomes `x0` when
// translated to SSA.
x = foo();
} else {
// This version of `x` becomes `x1` when
// translated to SSA.
x = bar();
// Does this use `x0` or `x1`??

Should the do_stuff call at the bottom use x0 or x1 when translated into SSA? Neither!

SSA uses Φ (phi) functions to handle these cases. A phi function takes a number of mutually exclusive, control flow-dependent parameters and returns the one that was defined where control flow came from. In our example we would have x2 = Φ(x0, x1), and if some_condition() was true then x2 would get its value from x0. Otherwise, x2 would get its value from x1.

If SSA and phi functions are new to you and you’re feeling confused, don’t worry! It was confusing for me too when I first learned about this stuff. But Cranelift IR doesn’t use phi functions per se, it has something that I think is more intuitive: blocks can have formal parameters.

Translating our example to Cranelift IR, we get this:

;; Head of the `if`/`else`.
v0 = call some_condition()
brnz v0, ebb1
jump ebb2

;; Consequent.
v1 = call foo()
jump ebb3(v1)

;; Alternative.
v2 = call bar()
jump ebb3(v2)

;; Code following the `if`/`else`.
ebb3(v3: i32):
call do_stuff(v3)

Note that ebb3 takes a parameter for the control flow-dependent value that we should pass to do_stuff! And the jumps in ebb1 and ebb2 pass their locally-defined values “into” ebb3! This is equivalent to phi functions, but I find it much more intuitive.

Anyways, translating WebAssembly code into Cranelift IR happens in the cranelift-wasm crate. It uses wasmparser to decode the given blob of Wasm and validate it, and then constructs Cranelift IR via (you guessed it!) abstract interpretation. As cranelift-wasm interprets Wasm instructions, rather than pushing and popping Wasm values, it maintains a stack of Cranelift IR SSA values. As cranelift-wasm enters and exits Wasm control frames, it creates Cranelift IR basic blocks.

This process is fairly similar to walrus‘s IR construction, which was pretty similar to wasmparser‘s validation, and the whole thing felt pretty familiar by now. There were just a couple tricky bits.

The first tricky bit was remembering to add parameters (phi functions) to the first basic block for a Wasm loop‘s body, representing its Wasm stack parameters. This is necessary, because control flow joins from two places at the top of the loop body: from where we were when we first entered the loop, and from the bottom of the loop when we finish an iteration and are starting another. In terms of the abstract interpretation, this means you need to pop off the particular SSA values you have on the stack at the start of the loop, construct SSA values for the loop’s parameters, and then push those onto the stack instead. I originally overlooked this, resulting in a fair bit of head scratching and debugging mis-translated IR. Whoops!

Second, cranelift-wasm will track reachability during translation, and if some Wasm code is unreachable, we don’t even bother constructing Cranelift IR for it. But that boundary between unreachable and reachable code, and when one transitions to the other, can be a bit subtle. You can be in an unreachable state, fall through the current block into the following block, and become reachable once again. Throw in ifs with elses, and ifs without elses, and unconditional branches, and early returns, and it is easy for bugs to sneak in. And in the process of adding multi-value Wasm support, bugs did, in fact, sneak in. This time involving an if that was initially reachable, and whose consequent arm also ends reachable, but whose alternative arm ends unreachable. Given that, should the block following the consequent and alternative be reachable? Yes, but we were incorrectly computing that it shouldn’t be.

To fix this bug, I refactored how cranelift-wasm computes reachablity of code following an if. It now correctly determines that the following block is reachable if the head of the if is reachable and any of the following are true:

  • The consequent or alternative end reachable, in which case they will continue to the following block.
  • The consequent or alternative do an early branch (potentially a conditional branch) to the following block, and that branch is reachable.
  • There is no alternative, so if the if‘s condition is false, we go directly to the following block.

To be sure that we are handling all these edge cases correctly, I added tests enumerating every combination of reachability of an if‘s arms as well as early branches. Phew!

Finally, this bug first manifested itself in a 39 KiB Wasm file, and figuring out what was going on was made so much easier thanks to tools like wasm-reduce (a tool that is part of binaryen) and creduce (working on the WAT disassembly, rather than the binary Wasm). I forget which one I used this time, but I’ve successfully used both to turn big, complicated Wasm test cases into small, isolated test cases that highlight the bug at hand. These tools are real life savers so it is worth broadcasting their existence just in case anyone doesn’t know about them!

Translating multi-value Wasm into Cranelift IR happened in these pull requests:

Supporting Many Return Values in Cranelift

Cranelift IR the language supports returning arbitrarily many values from a function, but Cranelift the implementation only supported returning as many values as there are available registers in the calling convention that the function is using. For example, with the System V calling convention, you could return up to three pointer-sized values, and with the Windows fastcall calling convention, you could only return a single pointer-sized value.

So the question was:

How to return more values than can fit in registers?

This should trigger some deja vu: when compiling to Wasm, how was LLVM returning structures larger than could fit in a single Wasm value? Struct return pointer parameters! This is nothing new, and in fact its use is dictated by certain calling conventions, we just hadn’t implemented support for it in Cranelift yet. So that’s what I set out to do.

When Cranelift is given some initial IR, the IR is generally portable and machine independent. As the IR moves through Cranelift, eventually it reaches a legalization phase where instructions that don’t have a direct mapping to an machine code instruction in the target architecture are replaced with ones that do. For example, on 32-bit x86, Cranelift legalizes 64-bit arithmetic by expanding it into a series of 32-bit operations. During this process, we also legalize function signatures: passing a value that is larger than can fit in a register may need to be split into multiple parameters, each of which can fit in registers, for example. Signature legalization also assigns locations to formal parameters based on the function’s calling convention: this parameter should be in this register, and that parameter should be at this stack offset, etc.

My plan for implementing arbitrary numbers of return values via struct return pointer parameters was to hook into Cranelift’s legalization phase during signature legalization, legalizing return instructions, and legalizing call instructions.

When legalizing signatures, we need to determine whether a struct return pointer is required, and if so, update the signature to reflect that.

;; Before legalization.
fn() -> i64, i64, i64, i64 fast

;; After legalization.
fn (v0: i64 sret [%rdi]) -> i64 sret [%rax] fast

Here, fast means the signature is using our internal, unstable “fast” calling convention. The sret is an annotation for a parameter or return value, in this case documenting that it is being used as a struct return pointer. The %rdi and %rax are the registers assigned to the parameter and return value by the calling convention.4

After legalization, we’ve added the struct return pointer parameter, but we also removed the old returns, and we also return the struct return pointer parameter as well. Returning the struct return pointer is mandated by the System V ABI’s calling conventions, but we currently do the same thing for our internal, unstable calling convention as well.

After signatures are legalized, we need to legalize call and return instructions as well, so that they match the new, legalized signatures. Let’s turn our attention to the latter first.

Legalizing a return instruction removes the return values from the return instruction itself, and creates a series of preceding store instructions that write the return values through the struct return pointer. Here’s an example that is returning four i32 values:

;; Before legalization.
;; ...
return v0, v1, v2, v3

;; After legalization.
ebb0(v4: i64):
;; ...
store notrap aligned v0, v4
store notrap aligned v1, v4+4
store notrap aligned v2, v4+8
store notrap aligned v3, v4+12
return v4

The new v4 value is the struct return pointer parameter. The notrap annotation on the store instruction is saying that this store can’t trigger a trap. It is the caller’s responsibility to give us a valid struct return pointer that is pointing to enough space to fit all of our return values. The aligned annotation is similar, saying that the pointer we are storing through is properly four-byte aligned for an i32. Again, the responsibility is on the caller to ensure the struct return pointer has at least the maximum alignment required by the return values’ types. The +4, +8, and +12 are static immediates that specify an offset to be added to the actual v4 operand to compute the destination address for the store.

Legalizing a call instruction has comparatively more responsibilities than legalizing a return instruction. Yes, it involves adding the struct return pointer argument to the call instruction itself, and then loading the values out of the struct return space after the callee returns to us. But it additionally must allocate the space for the struct return in the caller function’s stack frame, and it must ensure that the size and alignment invariants that the callee and its return instructions rely on are upheld.

Let’s take a look at an example of some caller function calling a callee function that returns four i32s:

;; Before legalization.
function %caller() {
fn0 = colocated %callee() -> i32, i32, i32, i32

v0, v1, v2, v3 = call fn0()

;; After legalization.
function %caller() {
ss0 = sret_slot 16
sig0 = (i64 sret [%rdi]) -> i64 sret [%rax] fast
fn0 = colocated %callee sig0

v4 = stack_addr.i64 ss0
v5 = call fn0(v4)
v6 = load.i32 notrap aligned v5
v0 -> v6
v7 = load.i32 notrap aligned v5+4
v1 -> v7
v8 = load.i32 notrap aligned v5+8
v2 -> v8
v9 = load.i32 notrap aligned v5+12
v3 -> v9

The ss0 = sret_slot 16 is a sixteen byte stack slot that we created for the struct return space. It is also aligned to sixteen bytes, which is greater than necessary in this case, since we only need four byte alignment for the i32s. Similar to the stores in the legalized return, the loads in the legalized call are also annotated with notrap and aligned. v0 -> v6 establishes that v0 is another name for v6, and we don’t have to eagerly rewrite all the following uses of v0 into uses of v6 (even though there don’t happen to be any in this particular example).

With signature, call, and return legalization that all understand when and how to use struct return pointers, we now have full support for arbitrarily many multi-value returns in Cranelift and Wasmtime. This support was implemented in these pull requests:

Putting It All Together

Finally, let’s put everything together and create a multi-value Wasm binary with the Rust and Wasm toolchain and then run it in Wasmtime!

First, let’s create a new library crate with cargo:

$ cargo new --lib hello-multi-value
Created library `hello-multi-value` package
$ cd hello-multi-value/

We’re going to use wasm-bindgen to return a string from our Wasm function, so lets add it as a dependency. Additionally, we’re going to create a Wasm library, rather than an executable, so specify that this is a “cdylib”:

# Cargo.toml

crate-type = ["cdylib"]

wasm-bindgen = "0.2.54"

Let’s fill out src/ with our string-returning function:

use wasm_bindgen::prelude::*;

pub fn hello(name: &str) -> String {
format!("Hello, {}!", name)

We can build our Wasm library with cargo wasi:

$ cargo wasi build --release

This will automatically build a Wasm file for the wasm32-wasi target and then run wasm-bindgen‘s post-processor to add interface types and introduce multi-value. We can verify this with the wasm-objdump tool from WABT:

$ wasm-objdump -x 
hello_multi_value.wasm: file format wasm 0x1

Section Details:

- type[6] (i32, i32) -> (i32, i32)

- func[93] sig=6

- func[93] -> "hello"

We can see that the function is exported as `"hello"` and that it has the multi-value type `(i32, i32) -> (i32, i32)`. This shim function is indeed the one introduced by our multi-value transform we added to `wasm-bindgen` to wrap the original function and turn its struct return pointer into multi-value.

Finally, we can load this Wasm library into Wasmtime, which will use Cranelift to just-in-time (JIT) compile it to machine code, and then invoke the hello export with the string "multi-value Wasm":

$ wasmtime 
--invoke hello "multi-value Wasm"
Hello, multi-value Wasm!

It works!!


The Rust and WebAssembly toolchain now supports generating Wasm binaries that make use of the multi-value proposal, and Cranelift and Wasmtime can compile and run multi-value Wasm binaries. This has been — I hope! — an interesting tale of implementing a Wasm feature through the whole vertical ecosystem, start to finish.

Lastly, and definitely not leastly, I’d like to thank Dan Gohman, Benjamin Bouvier, Alex Crichton, Yury Delendik, @bjorn3, and @iximeow for providing reviews and implementation suggestions for different pieces of this journey at various stages. Additionally, thanks again to Alex and Dan, and to Lin Clark and Till Schneidereit for all providing feedback on early drafts of this piece.

0 Additionally, Thomas Lively and some other folks are already working on adding multi-value Wasm support directly to LLVM, so that is definitely coming in the future, and it made sense for me to focus my attention elsewhere. ↩

1 There are some “stack-y” forms that don’t quite directly map to a tree. For example, you can insert stack-neutral, side-effectual instruction sequences in the middle of any part of the post-order encoding of an expression tree. Here is a call that produces some value, followed by a drop of that value, inserted into the middle of the post-order encoding of 1 + 2:

;; Instructions ;; Stack
i32.const 1 ;; [1]
call $foo ;; [1, $result_of_foo]
drop ;; [1]
i32.const 2 ;; [1, 2]
i32.add ;; [3]

These stack-y forms can be represented by introducing blocks that don’t also introduce labels for control flow branches. You can think of them as sort of similar to Common Lisp’s progn and prog0 forms or Scheme’s (begin ...) ↩

2 Fun fact: there is also ongoing work to make Cranelift a viable alternative backend for rustc! See the goals write up and the bjorn3/rustc_codegen_cranelift repo for details. ↩

3 Originally, Cranelift was designed to use extended basic blocks, rather than regular basic blocks. Both can only be entered at their head, but basic blocks additionally can only exit at their tail, while extended basic blocks can have conditional exits from the block in their middle. The idea is that extended basic blocks more directly match machine code which falls through untaken conditional branches to continue executing the next instruction. However, Cranelift is in the process of switching over to regular basic blocks, and removing support for extended basic blocks. The reasoning is that all its optimization passes end up essentially constructing and keeping track of basic blocks anyways, which added complexity, and the extended basic blocks weren’t ultimately carrying their weight. ↩

4 Semi-confusingly, the square brackets are just the syntax that Cranelift decided to use to surround parameter locations, and they do not represent dereferencing the way they would in Intel-flavored assembly syntax. ↩

The post Multi-Value All The Wasm! appeared first on Mozilla Hacks – the Web developer blog.

Mozilla Localization (L10N): L10n Report: November Edition

Mozilla Localization (L10N): L10n Report: November Edition

Please note some of the information provided in this report may be subject to change as we are sometimes sharing information about projects that are still in early stages and are not final yet. 


Are you a locale leader and want us to include new members in our upcoming reports? Contact us!

New content and projects

What’s new or coming up in Firefox desktop

As anticipated in previous reports, the release cycles are getting progressively shorter, in order to reach a consistent 4 weeks length in the first half of 2020.

Firefox 71 will be released next week, on December 3rd. At that point Firefox 72 will move to beta, and the deadline to ship updates for that version will be on December 24th.

Firefox 71 will ship with 3 new languages: Catalan (Valencian) (ca-valencia), Tagalog (tl), and Triqui (trs).

Compared to Firefox 70, the last release has been relatively light in terms of new strings to translate. That’s a great time to do a full test of your localization, to make sure everything works as expected, in particular for new users switching – or coming back – to Firefox.

What’s new or coming up in mobile

As most of you know, Fenix (Firefox Preview) has been an ongoing and ever evolving priority at Mozilla, as we work on creating the best Android mobile browser yet. The transition to Fenix is amplifying as we see its positive impact grow among our users. Be ready for something big early 2020, as our efforts are ramping up dramatically.

If you are interested in localizing Fenix, please reach out to delphine so she can get things going (please note there is not yet a locale-switcher in place, so you should be sure your locale is supported by Android system).

Talking about in-app locale switcher for Fenix, work is currently happening on that front and should be ready by the beginning of next year. Which means we will be able to support all locales, independently of what Android system and/or carriers have to offer. This will help us extend our reach globally and make sure any locale that wants to contribute is treated equally.

In the same vein, we’ve been working hard on making sure we can support our right-to-left locales in Fenix. Reza, a core Mozilla Persian localizer (who you will find called out in our “Friends of the Lion” section), has been a key helper in this initiative and is helping push things forwards. Thank you Reza!

Lockwise has also been a growing initiative that spans across our desktop and mobile products. We have both an Android and iOS version. If you’ve been localizing Firefox iOS, feel free to request the iOS version of this project from the Pontoon project page. For Android, send your request to delphine so she can set you up. All this will help in providing a consistent experience between desktop Lockwise and mobile Lockwise.

What’s new or coming up in web projects

Quite a few pages were added and updated in recent weeks. Some of the deadlines are mandatory for Tier 1 markets and others are for all languages in order to be included for certain release.

Update: due on November 25

  • firefox/mobile-2019.lang
  • firefox/whatsnew.lang

New: due on December 11

  • firefox/welcome/page3.lang
  • firefox/welcome/page4.lang

The following pages are important pages that have been activated on production. Please prioritize accordingly:

  • footer.lang
  • navigation.lang
  • firefox/all-unified.lang

The project will be on a weekly code push, and localized content will be pushed to production much more regularly than it has been.

Legal documents

In recent months, quite a few legal documents were revised and updated. New documents were created and new languages were added. Reviews and feedback are welcome:

What’s new or coming up in Foundation projects

New donate website

Launch has been delayed, but it will happen as soon as the last blockers are fixed. Thanks for all your work so far! Next steps for this project are exposing the CMS content and a few strings specific to the Thunderbird donate page. This will be the first CMS fully connected to Pontoon, so there are still some last minute issues to fix.

Foundation website

A first batch of UI strings for the foundation website has been exposed in Pontoon for all supported locales. A few strings that are not yet localizable are going to be exposed over the next few weeks.

What’s new or coming up in Pontoon

3-column translation workbench layout

We shipped the first batch of review process improvements that will be coming to Pontoon, notably the new 3-column translation workbench layout. It brings several changes:

  1. A 3rd column has been added in addition to the string list and the editor, which hosts Machinery and Locales panels.
  2. User suggestions and Machinery results – both of which are critical during the review process – can now be seen at the same time.
  3. Editor is now centered in the middle of the screen and uses the same amount of space as before. Translations in History panel use avatars.
  4. String list occupies half of its previous width. Source strings and translations are in separate lines and no longer truncated.

We hope you like the new layout as much as we do. And please let us know if you have any problems!

Pontoon - 3 Columns LayoutOutreachy contribution period complete

Outreachy contribution period is complete, which means we’re in the process of selecting our intern for this round. Accepted interns will be announced on November 26, and the internship will start a week later on December 3. Thanks to April, Dinda, Anastasia, Karskaja, Katherine, Michael, Monika and Okpo for making a contribution and fixing a whooping 37 bugs in total so far.

Newly published localizer facing documentation

Other projects

The Firefox Screenshots project has been removed from Pontoon. The website hasn’t been updated in a long time, and it’s scheduled for removal. We’re working on porting the add-on code to Fluent, and migrating existing translations into each l10n repository. At that point, the add-on will be localizable as part of Firefox.


Want to showcase an event coming up that your community is participating in? Reach out to any l10n-driver and we’ll include that (see links to emails at the bottom of this report)


It’s the end of the year and there are so many unreviewed suggestions in Pontoon! We’re working out a project campaign for December to get your help to reduce the number of unreviewed strings for your locale and start the year fresh. Stay tuned for details!

Friends of the Lion

Karl Dubost: Week notes - 2019 w47 - worklog 1

Image by Elio Qoshi

  • A big shout out to Reza Habibi, who once more is helping out with our right-to-left (RTL) implementation – this time for Fenix! As many already know, this is not the first time Reza helps with this initiative. In fact, he was a key stakeholder during Firefox OS days, and has since then helped with creating RTL specs, as well as finding, reporting, and fixing bugs for many Mozilla projects. He’s also a core Persian localizer, so double kudos to him 🙂
  • Talking about RTL, kudos to Itiel: not only is the main contributor for Hebrew, but he’s constantly listed in These Weeks in Firefox for fixing several RTL bugs in our desktop browser.

Know someone in your l10n community who’s been doing a great job and should appear here? Contact on of the l10n-drivers and we’ll make sure they get a shout-out (see list at the bottom)!

Useful Links

Questions? Want to get involved?

Did you enjoy reading this report? Let us know how we can improve by reaching out to any one of the l10n-drivers listed above.

The Mozilla Blog: Can Your Holiday Gift Spy on You?

Mozilla is unveiling its annual holiday ranking of the creepiest and safest connected devices. Our researchers reviewed the security and privacy features and flaws of 76 popular gifts for 2019’s *Privacy Not Included guide

Mozilla today launches the third-annual *Privacy Not Included, a report and shopping guide identifying which connected gadgets and toys are secure and trustworthy — and which aren’t. The goal is two-fold: arm shoppers with the information they need to choose gifts that protect the privacy of their friends and family. And, spur the tech industry to do more to safeguard consumers.

Mozilla researchers reviewed 76 popular connected gifts available for purchase in the United States across six categories: Toys & Games; Smart Home; Entertainment; Wearables; Health & Exercise; and Pets. Researchers combed through privacy policies, sifted through product and app specifications, reached out to companies about their encryption and bug bounty programs, and more. As a result, we can answer questions like: How accessible is the privacy policy, if there is one? Does the product require strong passwords? Does it collect biometric data? And, Are there automatic security updates?

The guide also showcases the Creep-O-Meter, an interactive tool allowing shoppers to rate the creepiness of a product using an emoji sliding scale from “Super Creepy” to “Not Creepy.

Says Ashley Boyd, Mozilla’s Vice President of Advocacy: “This year we found that many of the big tech companies like Apple and Google are doing pretty well at securing their products, and you’ll see that most products in the guide meet our Minimum Security Standards. But don’t let that fool you. Even though devices are secure, we found they are collecting more and more personal information on users, who often don’t have a whole lot of control over that data.”

For the first time ever, this year’s guide is launching alongside new longform research from Mozilla’s Internet Health Report. Two companion articles are debuting alongside the guide and provide additional context and insight into the realm of connected devices: what’s working, what’s not, and how consumers can wrestle back control. The articles include “How Smart Homes Could Be Wiser,” an exploration of why trustworthy connected devices are so scarce, and what consumers can do to remedy this. And “5 key decisions for every smart device,” a look at five key areas manufacturers should address when designing private and secure connected devices.

*Privacy Not Included highlights include:

Top trends identified by Mozilla researchers include:

  • Good on security, questionable on privacy: Many of the big tech companies like Apple and Google are doing pretty well at securing their products. But even when devices are secure, they can still collect a lot of data about users. This year saw an expansion of smart home ecosystems from big tech companies, allowing companies like Amazon to reach deeper into user’s lives. Customer data is also being used in ways users may not have anticipated, even if it’s stated in the privacy policy. For instance, Ring users may not realize their videos are being used in marketing campaigns and that photos of all visitors are stored on servers.
  • Small companies are not doing so well on privacy and security: Smaller companies often do not have the resources to prioritize the privacy and security of their products. Many of the products in the pet category, for example, seem weak on privacy and security. Mozilla could only confirm four of the 13 products meet our Minimum Security Standards. The $500 Litter Robot 3 Connect didn’t even have a privacy policy for the device or the app the device uses. Also, it appears to use the default password “neverscoop” to connect the device to WiFi.
  • Privacy policy readability is improving: Companies are making strides in how they present privacy information, with a lot more privacy pages — like those by Roomba and Apple — being written in simple, accessible language and housed in one central place.
  • Products are becoming more privacy friendly, but sometimes at a cost to consumers: Sonos removed the microphone for the Sonos One SL to make it more privacy-friendly, while Parrot, which made one of the creepiest products in the 2018 guide, launched the Anafi drone, which met the Minimum Security Standards. However, Parrot left the low end consumer market: the Anafi drone costs $700.


*Privacy Not Included builds on Mozilla’s work to ensure the internet remains open, safe, and accessible to all people. Mozilla’s initiatives include its annual Internet Health Report; its roster of Fellows who develop research, policies, and products around privacy, security, and other internet health issues; and its advocacy campaigns, such as putting public pressure on apps like Snapchat and Instagram to let users know if they are using facial emotion recognition software.


About Mozilla

Mozilla is a nonprofit that believes the internet must always remain a global public resource, open and accessible to all. Its work is guided by the Mozilla Manifesto. The direct work of the Mozilla Foundation focuses on fueling the movement for an open Internet. Mozilla does this by connecting open Internet leaders with each other and by mobilizing grassroots activists around the world. The Foundation is also the sole shareholder in the Mozilla Corporation, the maker of Firefox and other open source tools. Mozilla Corporation functions as a self-sustaining social enterprise — money earned through its products is reinvested into the organization.

The post Can Your Holiday Gift Spy on You? appeared first on The Mozilla Blog.

Hacks.Mozilla.Org: Multiple-column Layout and column-span in Firefox 71

Hacks.Mozilla.Org: Multiple-column Layout and column-span in Firefox 71

Firefox 71 is an exciting release for anyone who cares about CSS Layout. While I am very excited to have subgrid available in Firefox, there is another property that I’ve been keeping an eye on. Firefox 71 implements column-span from Multiple-column Layout. In this post I’ll explain what it is and a little about the progress of the Multiple-column Layout specification.

Multiple-column Layout, usually referred to as multicol, is a layout method that does something quite different to layout methods such as flexbox and grid. If you have some content marked up and displaying in Normal Flow, and turn that into a multicol container using the column-width or column-count properties, it will display as a set of columns. Unlike Flexbox or Grid however, the content inside the columns flows just as it did in Normal Flow. The difference is that it now flows into a number of anonymous column boxes, much like content in a newspaper.

See the Pen
Columns with multicol
by rachelandrew (@rachelandrew)
on CodePen.

Multicol is described as fragmenting the content when it creates these anonymous column boxes to display content. It does not act on the direct children of the multicol container in a flex or grid-like way. In this way it is most similar to the fragmentation that happens when we print a web document, and the content is split between pages. A column-box is essentially the same thing as a page.

What is column-span?

We can use the column-span property to take an element appearing in a column, and cause it to span across all of the columns. This is a pattern common in print design. In the CodePen below I have two such spanning elements:

  • The h1 is inside the article as the first child element and is spanning all of the columns.
  • The h2 is inside the second section, and also spans all of the columns.

See the Pen
Columns with multicol and column-span
by rachelandrew (@rachelandrew)
on CodePen.

This example highlights a few things about column-span. Firstly, it is only possible to span all of the columns, or no columns. The allowable values for column-span are all, or none.

Secondly, when a span interrupts the column boxes, we end up with two lines of columns. The columns are created in the inline direction above the spanning element, then they restart below. Content in the columns does not “jump over” the spanning element and continue.

In addition, the h1 is a direct child of the multicol container, however the h2 is not. The h2 is nested inside a section. This demonstrates the fact that items do not need to be a direct child to have column-span applied to them.

Firefox has now joined other browsers in implementing the column-span property. This means that we have good support for the property across all major browsers, as the Compat data for column-span shows.

The compat data for column-span on MDN

The multicol specification

My interest in the implementation of column-span is partly because I am one of the editors of the multicol specification. I volunteered to edit the multicol specification as it had been stalled for some time, with past resolutions by the WG not having been edited into the spec. There were also a number of unresolved issues, many of which were to do with the column-span feature. I started work by digging through the mailing list archives to find these issues and resolutions where we had them. I then began working through them and editing them into the spec.

At the time I started working on the specification it was at Candidate Recommendation (CR) status, which infers that the specification is deemed to be fairly complete. Given the number of issues, the WG decided to return it to Working Draft (WD) status while these issues were resolved.

CSS development needs teamwork between browsers and spec editors

As a spec editor, it’s exciting when features are being implemented, as it helps to progress the spec. CSS is created via an iterative and collaborative process; the CSS WG do not create a complete specification and fling it over the wall at browser engineers. The process involves working on a feature in the WG, which browser engineers try to implement. Questions and problems discovered during that implementation phase are brought back to the working group. The WG then have to decide what to do about such issues, and the spec editor then gets the job of clarifying the spec based on the resolution. The process repeats — each time we tease out issues. Any lack of clarity could cause an interoperability issue if two browsers interpreted the description of the feature in a different way.

Based on the work that Mozilla have been doing to implement column-span, several issues were brought to the CSS WG and discussed in our calls and face-to-face meetings. We’ve been able to make the specification much clearer on a number of issues with column-span and related issues. Therefore, I’m very happy to have a new property implemented across browsers, and also happy to have a more resilient spec! We recently published an updated WD of multicol, which includes many changes made during the time Mozilla were implementing multicol in Firefox.

Other multicol related issues

With the implementation of column-span, multicol will work in much the same way across browsers. We do have an outstanding issue with regards to the column-fill property, which controls how the columns are filled. The default way that multicol fills columns is to try to balance the content, so equal amounts of content end up in each column.

By using the column-fill property, you can change this behavior to fill columns sequentially. This would mean that a multicol container with a height could fill columns to the specified height, potentially leaving empty columns if there was not enough content.

See the Pen
Columns with multicol and column-fill
by rachelandrew (@rachelandrew)
on CodePen.

Due to specification ambiguity, Firefox and Chrome do different things if the multicol container does not have a height. Chrome ignores the column-fill property and balances, whereas Firefox fills the first column with all of the content. This is the kind of issue that arises when we have a vague or unclear spec. It’s not a case of a browser “getting things wrong”, or trying to make the lives of web developers hard. It’s what happens when specifications aren’t crystal clear! For anyone interested, the somewhat lengthy issue trying to resolve this is here. Most developers won’t come across this issue in practice. However, if you are seeing differences when using column-fill, it is worth knowing about.

The implementation of column-span is a step towards making multicol robust and useful on the web. To read more about multicol and possible use cases see the Guides to Multicol on MDN, and my article When And How To Use Multiple-column Layout.

The post Multiple-column Layout and column-span in Firefox 71 appeared first on Mozilla Hacks – the Web developer blog.

Karl Dubost: Saving Webcompat images as a microservice

Update: You may want to fast forward to the latest part… of this blog post. (Head explodes).

Thinking out loud on separating our images into a separate service. The initial goal was to push the images to the cloud, but I think we could probably have a first step. We could keep the images on our server, but instead of the current save, we could send them to another service, let say with a HTTP PUT. And this service would save them locally.

That way it would allow us two things:

  1. Virtualize the core app on heroku if needed
  2. Replace when we are ready the microservice by another cloud hosting solution.

All of this is mainly thinking for now.

Anatomy of our environment

config/ defines:


The maximum limit for images is defined in
Currently in, there is a route for localhost upload.

# set limit of 5.5MB for file uploads
# in practice, this is ~4MB (5.5 / 1.37)
# after the data URI is saved to disk
app.config['MAX_CONTENT_LENGTH'] = 5.5 * 1024 * 1024

The localhost part would probably not changed much. This is just for reading the images URL.

if app.config['LOCALHOST']:
    def download_file(filename):
        """Route just for local environments to send uploaded images.

        In production, nginx handles this without needing to touch the
        Python app.
        return send_from_directory(
            app.config['UPLOADS_DEFAULT_DEST'], filename)

then the api for uploads is defined in api/

This is where the production route is defined.

@uploads.route('/', methods=['POST'])
def upload():
    '''Endpoint to upload an image.

    If the image asset passes validation, it's saved as:
        UPLOADS_DEFAULT_DEST + /year/month/random-uuid.ext

    Returns a JSON string that contains the filename and url.
    # cut some stuff.
        upload = Upload(imagedata)
        data = {
            'filename': upload.get_filename(upload.image_path),
            'url': upload.get_url(upload.image_path),
            'thumb_url': upload.get_url(upload.thumb_path)
        return (json.dumps(data), 201, {'content-type': JSON_MIME})
    except (TypeError, IOError):
    except RequestEntityTooLarge:
        abort(413) is basically where we should replace this by an HTTP PUT to a micro service.

What is Amazon S3 doing?

In these musings, I wonder if we could mimick the way Amazon S3 operates at a very high level. No need to replicate everything. We just need to save some bytes into a folder structure.

boto 3 has a documentation for uploading files.

def upload_file(file_name, bucket, object_name=None):
    """Upload a file to an S3 bucket

    :param file_name: File to upload
    :param bucket: Bucket to upload to
    :param object_name: S3 object name. If not specified then file_name is used
    :return: True if file was uploaded, else False

    # If S3 object_name was not specified, use file_name
    if object_name is None:
        object_name = file_name

    # Upload the file
    s3_client = boto3.client('s3')
        response = s3_client.upload_file(file_name, bucket, object_name)
    except ClientError as e:
        return False
    return True

We could keep the image validation on the size of, but then the naming and checking is done. We can save this to a service the same way aws is doing.

So our priviledged service could accept images and save them locally in the same folder structure a separate flask structure. And later on, we could adjust it to use S3.

Surprise. Surprise.

I just found out that each time you put an image in an issue or a comment. GitHub is making a private copy of this image. Not sure if it’s borderline with regards to property.

If you enter:

!['m root](

Then it creates this markup.

<p><a target="_blank"
       rel="noopener noreferrer"
             alt="I'm root"

And we can notice that the img src is pointing to… GitHub?

I checked in my server logs to be sure.
And I found… - - [20/Nov/2019:06:44:54 +0000] "GET /2019/01/01/2535-misere HTTP/1.1" 200 62673 "-" "github-camo (876de43e)"

That will seriously challenge the OKR for this quarter.

To be continued…