The Tor Browser: comparison browser/devtools/tilt/TiltWorkerCrafter.js

comparison: browser/devtools/tilt/TiltWorkerCrafter.js

browser/devtools/tilt/TiltWorkerCrafter.js

changeset 0: 6474c204b198

equal deleted inserted replaced

--1:000000000000
+:820339f6d438
+/* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this
+* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+/**
+* Given the initialization data (sizes and information about
+* each DOM node) this worker sends back the arrays representing
+* vertices, texture coords, colors, indices and all the needed data for
+* rendering the DOM visualization mesh.
+*
+* Used in the TiltVisualization.Presenter object.
+*/
+self.onmessage = function TWC_onMessage(event)
+{
+let data = event.data;
+let maxGroupNodes = parseInt(data.maxGroupNodes);
+let style = data.style;
+let texWidth = data.texWidth;
+let texHeight = data.texHeight;
+let nodesInfo = data.nodesInfo;
+let mesh = {
+allVertices: [],
+groups: [],
+width: 0,
+height: 0
+};
+let vertices;
+let texCoord;
+let color;
+let stacksIndices;
+let wireframeIndices;
+let index;
+// seed the random function to get the same values each time
+// we're doing this to avoid ugly z-fighting with overlapping nodes
+self.random.seed(0);
+// go through all the dom nodes and compute the verts, texcoord etc.
+for (let n = 0, len = nodesInfo.length; n < len; n++) {
+// check if we need to start creating a new group
+if (n % maxGroupNodes === 0) {
+vertices = []; // recreate the arrays used to construct the 3D mesh data
+texCoord = [];
+color = [];
+stacksIndices = [];
+wireframeIndices = [];
+index = 0;
+}
+let info = nodesInfo[n];
+let coord = info.coord;
+// calculate the stack x, y, z, width and height coordinates
+let z = coord.depth + coord.thickness;
+let y = coord.top;
+let x = coord.left;
+let w = coord.width;
+let h = coord.height;
+// the maximum texture size slices the visualization mesh where needed
+if (x + w > texWidth) {
+w = texWidth - x;
+}
+if (y + h > texHeight) {
+h = texHeight - y;
+}
+x += self.random.next();
+y += self.random.next();
+w -= self.random.next() * 0.1;
+h -= self.random.next() * 0.1;
+let xpw = x + w;
+let yph = y + h;
+let zmt = coord.depth;
+let xotw = x / texWidth;
+let yoth = y / texHeight;
+let xpwotw = xpw / texWidth;
+let yphoth = yph / texHeight;
+// calculate the margin fill color
+let fill = style[info.name] || style.highlight.defaultFill;
+let r = fill[0];
+let g = fill[1];
+let b = fill[2];
+let g10 = r * 1.1;
+let g11 = g * 1.1;
+let g12 = b * 1.1;
+let g20 = r * 0.6;
+let g21 = g * 0.6;
+let g22 = b * 0.6;
+// compute the vertices
+vertices.push(x,   y,   z,                                /* front */ // 0
+x,   yph, z,                                            // 1
+xpw, yph, z,                                            // 2
+xpw, y,   z,                                            // 3
+// we don't duplicate vertices for the left and right faces, because
+// they can be reused from the bottom and top faces; we do, however,
+// duplicate some vertices from front face, because it has custom
+// texture coordinates which are not shared by the other faces
+x,   y,   z,                                /* front */ // 4
+x,   yph, z,                                            // 5
+xpw, yph, z,                                            // 6
+xpw, y,   z,                                            // 7
+x,   y,   zmt,                              /* back */  // 8
+x,   yph, zmt,                                          // 9
+xpw, yph, zmt,                                          // 10
+xpw, y,   zmt);                                         // 11
+// compute the texture coordinates
+texCoord.push(xotw,   yoth,
+xotw,   yphoth,
+xpwotw, yphoth,
+xpwotw, yoth,
+-1, 0, -1, 0, -1, 0, -1, 0, -1, 0, -1, 0, -1, 0, -1, 0);
+// compute the colors for each vertex in the mesh
+color.push(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+g10, g11, g12,
+g10, g11, g12,
+g10, g11, g12,
+g10, g11, g12,
+g20, g21, g22,
+g20, g21, g22,
+g20, g21, g22,
+g20, g21, g22);
+let i = index; // number of vertex points, used to create the indices array
+let ip1 = i + 1;
+let ip2 = ip1 + 1;
+let ip3 = ip2 + 1;
+let ip4 = ip3 + 1;
+let ip5 = ip4 + 1;
+let ip6 = ip5 + 1;
+let ip7 = ip6 + 1;
+let ip8 = ip7 + 1;
+let ip9 = ip8 + 1;
+let ip10 = ip9 + 1;
+let ip11 = ip10 + 1;
+// compute the stack indices
+stacksIndices.unshift(i,    ip1,  ip2,  i,    ip2,  ip3,
+ip8,  ip9,  ip5,  ip8,  ip5,  ip4,
+ip7,  ip6,  ip10, ip7,  ip10, ip11,
+ip8,  ip4,  ip7,  ip8,  ip7,  ip11,
+ip5,  ip9,  ip10, ip5,  ip10, ip6);
+// compute the wireframe indices
+if (coord.thickness !== 0) {
+wireframeIndices.unshift(i,    ip1, ip1,  ip2,
+ip2,  ip3, ip3,  i,
+ip8,  i,   ip9,  ip1,
+ip11, ip3, ip10, ip2);
+}
+// there are 12 vertices in a stack representing a node
+index += 12;
+// set the maximum mesh width and height to calculate the center offset
+mesh.width = Math.max(w, mesh.width);
+mesh.height = Math.max(h, mesh.height);
+// check if we need to save the currently active group; this happens after
+// we filled all the "slots" in a group or there aren't any remaining nodes
+if (((n + 1) % maxGroupNodes === 0) || (n === len - 1)) {
+mesh.groups.push({
+vertices: vertices,
+texCoord: texCoord,
+color: color,
+stacksIndices: stacksIndices,
+wireframeIndices: wireframeIndices
+});
+mesh.allVertices = mesh.allVertices.concat(vertices);
+}
+}
+self.postMessage(mesh);
+close();
+};
+/**
+* Utility functions for generating random numbers using the Alea algorithm.
+*/
+self.random = {
+/**
+* The generator function, automatically created with seed 0.
+*/
+_generator: null,
+/**
+* Returns a new random number between [0..1)
+*/
+next: function RNG_next()
+{
+return this._generator();
+},
+/**
+* From http://baagoe.com/en/RandomMusings/javascript
+* Johannes Baagoe <baagoe@baagoe.com>, 2010
+*
+* Seeds a random generator function with a set of passed arguments.
+*/
+seed: function RNG_seed()
+{
+let s0 = 0;
+let s1 = 0;
+let s2 = 0;
+let c = 1;
+if (arguments.length === 0) {
+return this.seed(+new Date());
+} else {
+s0 = this.mash(" ");
+s1 = this.mash(" ");
+s2 = this.mash(" ");
+for (let i = 0, len = arguments.length; i < len; i++) {
+s0 -= this.mash(arguments[i]);
+if (s0 < 0) {
+s0 += 1;
+}
+s1 -= this.mash(arguments[i]);
+if (s1 < 0) {
+s1 += 1;
+}
+s2 -= this.mash(arguments[i]);
+if (s2 < 0) {
+s2 += 1;
+}
+}
+let random = function() {
+let t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
+s0 = s1;
+s1 = s2;
+return (s2 = t - (c = t | 0));
+};
+random.uint32 = function() {
+return random() * 0x100000000; // 2^32
+};
+random.fract53 = function() {
+return random() +
+(random() * 0x200000 | 0) * 1.1102230246251565e-16; // 2^-53
+};
+return (this._generator = random);
+}
+},
+/**
+* From http://baagoe.com/en/RandomMusings/javascript
+* Johannes Baagoe <baagoe@baagoe.com>, 2010
+*/
+mash: function RNG_mash(data)
+{
+let h, n = 0xefc8249d;
+for (let i = 0, data = data.toString(), len = data.length; i < len; i++) {
+n += data.charCodeAt(i);
+h = 0.02519603282416938 * n;
+n = h >>> 0;
+h -= n;
+h *= n;
+n = h >>> 0;
+h -= n;
+n += h * 0x100000000; // 2^32
+}
+return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
+}
+};