Patrick Brosset captainbrosset

Update: webcompat bugs are now tracked in bugzilla, they just all block this meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1493094

Below is the list of ideas that don't yet have bugs

[Debugger] Nonsensical "steps out". The step out of Firefox devtools seems to be working differently from the one in Chrome. There are many cases where it doesn't seem to make sense. Karl will try to find a practical example
[Debugger] Logging all events that are fired for a given period of time
[Debugger] being able to set breakpoints on a column+line/specific instruction, not just an entire line.
[Debugger] improve the "click this line of a stack trace to jump to that code" feature so it takes you to the column+line in the trace, not just the start of the entire line (for minified scripts).
[Debugger] improve the same function so that it uses the pretty-printed version of the script, if one has been opened.
[Debugger] being able to modify a bit of script text, and have that version be used upon reload

Refactoring the way CSS declarations are displayed in the rule-view to better support visual edition tools

Goal

As part of the effort to create more visual edition tools in the rule-view (see bug 1258390), we need to be able to easily add new functionality to how CSS declarations are displayed and interacted with in the css rule-view.

Not only do we want it to be easy for us to add new types of editors (for gradients, borders, shadows, grids etc.), but we also want addon authors to be able to extend the rule-view too.

CSS declarations (name:value; pairs) are the most important part of the rule-view and represent what people interact with the most. This is where we currently show things like color swatches, linkify URLs to background images, offer ways to edit animation timing-functions, and more.

Right now, generating the DOM for a CSS declaration is handled by the OutputParser, which contains very specific

This is the French translation of Manuel Rego's (@regocas) post "Deep Dive into Grid Layout Placement", published on February 1st, 2016. All images and code samples come from the original article, with the author's permission. Translation: Patrick Brosset (@patrickbrosset).

Ceci est la traduction française de l'article "Deep Dive into Grid Layout Placement" par Manuel Rego (@regocas), publié le 1er Février 2016. Toutes les images et extraits de code viennent de l'article original avec la permission de l'auteur. Traduction: Patrick Brosset (@patrickbrosset).

Le positionnement dans les Grilles CSS

Une revue complète des différentes méthodes de positionnement offertes par les grilles CSS.

Understanding inline elements

A bit of theory first

First of all, it's important to define the vocabulary here:

DOM tree elements are visually rendered with boxes (0 or more boxes), each of them having a specific type,
the type of each box is described with the display CSS property,
a display:block; box is a block type box,
a display:inline; box is an inline type of box, and it's what we will be talking about here.

Geometry Transform Tool

The idea for this tool is to allow moving and resizing elements in the page, via drag and drop.

Graphic editors like Adobe Photoshop usually allow this kind of transformation via tools that look like this:

Use cases solved by the tool

One of the goals for 2015 is to provide more creative ways for designers and developers to make changes to the layout, behavior and design of a webpage, without only relying on typing CSS properties or Javascript code or HTML tags.

We've started to introduce more visual tools over the course of 2014, like the box-model highlighter, the CSS transform previewer, the cubic-bezier editor tooltip, and lately the new animation inspection panel.

There is a need to introduce more of these tools, and tie them up together in a UI that makes sense for designers and creative developers.

Here's a list of tools that so far either exist or are being developed or are planned and that together would form a very interesting toolkit:

relative to an element:
the element picker

	exporting patch:
	# HG changeset patch
	# User Patrick Brosset <[email protected]>
	# Date 1540390759 -7200
	# Wed Oct 24 16:19:19 2018 +0200
	# Node ID 28252579eb8db33d857061e4db42a15e04a87e45
	# Parent 079c7a062b23950449e9ce1ef809ff43026cc259
	WIP pref to disable anoncontent highlighters

	diff --git a/devtools/client/preferences/devtools-client.js b/devtools/client/preferences/devtools-client.js

	exporting patch:
	# HG changeset patch
	# User Patrick Brosset <[email protected]>
	# Date 1540391188 -7200
	# Wed Oct 24 16:26:28 2018 +0200
	# Node ID f65095a765a557f6f3c039bb7209dbce37657f68
	# Parent 079c7a062b23950449e9ce1ef809ff43026cc259
	WIP investigating why inspector 'fixes' layout

	diff --git a/devtools/server/actors/inspector/walker.js b/devtools/server/actors/inspector/walker.js

	(function() {
	/**
	* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
	*
	* A stacking context is formed, anywhere in the document, by any element which is either
	*
	* - the root element (HTML),
	* - positioned (absolutely or relatively) with a z-index value other than "auto",
	* - a flex item with a z-index value other than "auto",that is the parent element display: flex\|inline-flex,
	* - elements with an opacity value less than 1. (See the specification for opacity),

	[alias]
	who = !$HG anno -u $1 \| awk '{print $$1" "$$2}' \| sort \| uniq -c \| sort -r