| const browserCompat = require('@mdn/browser-compat-data'); | |
| const browsersToConsider = [ | |
| 'chrome', | |
| 'edge', | |
| 'firefox', | |
| 'safari_ios', | |
| 'safari', | |
| ]; |
Now that Gecko uses Servo's parallel style system, we want to work outward from there. The next phase could be parallel frame construction, and after that, parallel layout using Servo layout code.
We want to ship this work incrementally (every six weeks), without needing to replace the entire layout system at once. There are a few ways we can convert
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:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script> | |
| var y = 1/2; | |
| function funct(x) { | |
| x = eval(x); | |
| var result = x*x - (2*Math.cos(y)*x)-Math.pow((Math.sin(y)),2); | |
| alert(result) | |
| } |
| // import base Devtools SDK Panel constructor | |
| const { Panel } = require("dev/panel"); | |
| // import Devtools SDK Toolbox manager constructor | |
| const { Tool } = require("dev/toolbox"); | |
| // import Class helper from the Addon SDK | |
| const { Class } = require("sdk/core/heritage"); | |
| // import self module needed to result data resources urls | |
| var self = require('sdk/self'); |
| /* | |
| * robotNav.js | |
| * | |
| * The green key is located in a slightly more | |
| * complicated room. You'll need to get the robot | |
| * past these obstacles. | |
| */ | |
| function startLevel(map) { | |
| // Hint: you can press R or 5 to "rest" and not move the |
| <!doctype html> | |
| <html> | |
| <title>Flatten.js, General SVG Flattener</title> | |
| <head> | |
| <script> | |
| /* | |
| Random path and shape generator, flattener test base: https://jsfiddle.net/fjm9423q/embedded/result/ | |
| Basic usage example: https://jsfiddle.net/nrjvmqur/embedded/result/ |
| # Start firefox in a loop, allowing you to quit and have it auto rebuild devtools and restart. | |
| if [ -f mach ]; | |
| then | |
| echo "mach exists. Starting loop." | |
| trap "exit" SIGHUP SIGINT SIGTERM | |
| while true | |
| do | |
| ./mach build faster | |
| ./mach run --devtools --jsconsole -P dev |
| function getDominantColor(aImg) { | |
| let canvas = document.createElement("canvas"); | |
| canvas.height = aImg.height; | |
| canvas.width = aImg.width; | |
| let context = canvas.getContext("2d"); | |
| context.drawImage(aImg, 0, 0); | |
| // keep track of how many times a color appears in the image | |
| let colorCount = {}; |
