Patrick Brosset captainbrosset

## gist:8834705

      
              1 file
            
          
              1 fork
            
          
              0 comments
            
          
              0 stars
            
          
                captainbrosset
                / gist:8834705
            
            
              Last active
              August 29, 2015 13:56
            
              
                DevTools style inspector and editor changes proposal to support authored styles and editor-inspector sync
              
          
    What

A proposal for updating our style inspector and style editor.
For now it is a rough draft put together quickly. It will need to be refined a lot and will require discussions and, later, should be turned into a plan with bugs being filed.
Many of the things described below already work this way today, I just haven't had the chance yet to describe them as such.
A list highlighting what exists today, what doesn't and what should be changed has yet to be created.
Why

To achieve 2 main goals:

  
## index.html
div {
  color: #f06;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlcyI6WyJzYXNzL2NvbnRhaW5lZC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VBQ0UsT0FISyIsInNvdXJjZXNDb250ZW50IjpbIiRwaW5rOiAjZjA2O1xuXG4jaGVhZGVyIHtcbiAgY29sb3I6ICRwaW5rO1xufSJdfQ==*/

## README.md

      
              6 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                captainbrosset
                / README.md
            
            
              Last active
              August 29, 2015 14:03
            
              
                nsIDOMWindowUtils
              
          
    nsIDOMWindowUtils provides some pretty interesting helpers. Here are some example chrome-privileged scripts.

  
## index.html
<!DOCTYPE html>
<style>
.shape {
  position: absolute;
  top: 3em;
  left: 3em;
  width: 200px;
  height: 200px;
  background: yellow;

## creative-toolbar.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              2 stars
            
          
                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


## gtt.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                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:

Use cases solved by the tool


## post.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                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.


## pb64converter.py
"""The converter module is used to convert a number into a padless base64 string and back.
Padless base64 are used for short urls: http://www.mydomain.com/MTQy for instance.
Base64 strings are normally organized by groups of 4 characters and right padded if necessary with =
Padless base64 means that = characters are removed"""

import base64

def encodeB64Padless(number):
	"""Encode an integer into a padless base64 string"""
	return base64.b64encode(str(number)).replace("=", "")

## visitor.py
from pynarcissus import jsparser
from collections import defaultdict

class Visitor(object):

    CHILD_ATTRS = ['thenPart', 'elsePart', 'expression', 'body', 'initializer']

    def __init__(self, filepath):
        self.filepath = filepath
        #List of functions by line # and set of names

## Model.js
/**
 * Data model utility functions
 */
Aria.classDefinition({
  $classpath : 'utils.Model',
  $singleton : true,
  $prototype : {
    /**
     * Safely try to get the value of a nested property of an object. If it is not found, return the default value
     * instead. This could be useful in some cases when looking up values in a big data model, however if it doesn't
	div {
	color: #f06;
	}

	/# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlcyI6WyJzYXNzL2NvbnRhaW5lZC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VBQ0UsT0FISyIsInNvdXJjZXNDb250ZW50IjpbIiRwaW5rOiAjZjA2O1xuXG4jaGVhZGVyIHtcbiAgY29sb3I6ICRwaW5rO1xufSJdfQ==/
	<!DOCTYPE html>
	<style>
	.shape {
	position: absolute;
	top: 3em;
	left: 3em;
	width: 200px;
	height: 200px;
	background: yellow;
	"""The converter module is used to convert a number into a padless base64 string and back.
	Padless base64 are used for short urls: http://www.mydomain.com/MTQy for instance.
	Base64 strings are normally organized by groups of 4 characters and right padded if necessary with =
	Padless base64 means that = characters are removed"""

	import base64

	def encodeB64Padless(number):
	"""Encode an integer into a padless base64 string"""
	return base64.b64encode(str(number)).replace("=", "")
	from pynarcissus import jsparser
	from collections import defaultdict

	class Visitor(object):

	CHILD_ATTRS = ['thenPart', 'elsePart', 'expression', 'body', 'initializer']

	def __init__(self, filepath):
	self.filepath = filepath
	#List of functions by line # and set of names
	/**
	* Data model utility functions
	*/
	Aria.classDefinition({
	$classpath : 'utils.Model',
	$singleton : true,
	$prototype : {
	/**
	* Safely try to get the value of a nested property of an object. If it is not found, return the default value
	* instead. This could be useful in some cases when looking up values in a big data model, however if it doesn't