Patrick Brosset captainbrosset

DevTools Doorhangers

Goal

Provide rich preview or interaction about inspected objects across the DevTools, in the form of floating popups.

Yay! Screenshots!

These are for illustration only, just cause a picture is worth a thousand words, however final implementation may differ.

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:

nsIDOMWindowUtils provides some pretty interesting helpers. Here are some example chrome-privileged scripts.

	"""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

	/*

	2d pixel-perfect collision detection

	Requires that each object has a rectangular bounding box (simple x/y/w/h, no rotation)
	and a bit mask (i.e. an array of lines and columns containing 0s for empty pixels and 1s for solid pixels).

	On each frame of the animation, take all pairs of objects and
	1. compare the bounding boxes
	2. for those that collide, check for overlayed bits by creating a new mask that is the AND of the 2 sub-masks and check for 1s

	/**
	* 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

	devtools inspector screencast script

	1 - Load www.mozilla.com

	2 - Accessing the inspector
	- from the firefox menu bar: tools / web developer / inspector
	-> switches the mouse selection mode ON
	-> or alt+cmd+c
	- from the keyboard with alt+cmd+i
	-> can be used to toggle on/off the inspector

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>event</title>
	</head>
	<body>
	<div id="live"></div>
	<script type="text/javascript">
	window.onload = function () {

	div {
	color: #f06;
	}

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