Provide rich preview or interaction about inspected objects across the DevTools, in the form of floating popups.
These are for illustration only, just cause a picture is worth a thousand words, however final implementation may differ.
"""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 () { |
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.
To achieve 2 main goals:
div { | |
color: #f06; | |
} | |
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlcyI6WyJzYXNzL2NvbnRhaW5lZC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VBQ0UsT0FISyIsInNvdXJjZXNDb250ZW50IjpbIiRwaW5rOiAjZjA2O1xuXG4jaGVhZGVyIHtcbiAgY29sb3I6ICRwaW5rO1xufSJdfQ==*/ |
nsIDOMWindowUtils provides some pretty interesting helpers. Here are some example chrome-privileged scripts.