Skip to content

Instantly share code, notes, and snippets.

View captainbrosset's full-sized avatar
👋

Patrick Brosset captainbrosset

👋
186 followers · 20 following
View GitHub Profile
@captainbrosset
captainbrosset / index.html
Created September 16, 2014 13:35
css animation demo
<!DOCTYPE html>
<style>
.shape {
position: absolute;
top: 3em;
left: 3em;
width: 200px;
height: 200px;
background: yellow;
@captainbrosset
captainbrosset / creative-toolbar.md
Last active August 29, 2015 14:14
Firefox creative toolbar

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
@captainbrosset
captainbrosset / gtt.md
Last active August 29, 2015 14:16
Geometry Transformation Tool

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:

photoshop transform tool

Use cases solved by the tool

@captainbrosset
captainbrosset / post.md
Last active August 29, 2015 14:17
Understanding inline elements

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.
@captainbrosset
captainbrosset / article.md
Last active February 19, 2016 22:10
http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/ FRENCH TRANSLATION

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.

@captainbrosset
captainbrosset / .hgrc
Created May 26, 2016 20:06
hg who
[alias]
who = !$HG anno -u $1 | awk '{print $$1" "$$2}' | sort | uniq -c | sort -r
@captainbrosset
captainbrosset / architecture-doc.md
Last active July 11, 2016 15:41
Refactoring the way CSS declarations are displayed in the rule-view to better support visual edition tools

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

@captainbrosset
captainbrosset / z-index.js
Created January 13, 2017 11:52
z-index tool - Compare 2 elements in the DOM and understand why they are stacked the way they are
(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),
@captainbrosset
captainbrosset / backlog.md
Last active September 24, 2018 14:19
webcompat backlog

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
@captainbrosset
captainbrosset / inspector-fixes-layout.diff
Created October 24, 2018 14:27
exporting patch:
# HG changeset patch
# User Patrick Brosset <pbrosset@mozilla.com>
# 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