Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: chrome/content/ui/sendReport.js

Issue 29333297: Issue 3375 - Issue reporter: move screenshot creation into the content process (Closed)
Patch Set: Created Jan. 7, 2016, 4:59 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | lib/child/dataCollector.js » ('j') | lib/child/dataCollector.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>, 2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-2015 Eyeo GmbH 3 * Copyright (C) 2006-2015 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
(...skipping 303 matching lines...) Expand 10 before | Expand all | Expand 10 after
314 } 314 }
315 } 315 }
316 callback(); 316 callback();
317 } 317 }
318 }; 318 };
319 319
320 var screenshotDataSource = 320 var screenshotDataSource =
321 { 321 {
322 imageOffset: 10, 322 imageOffset: 10,
323 323
324 // Fields used for color reduction
325 _mapping: [0x00, 0x55, 0xAA, 0xFF],
326 _i: null,
327 _max: null,
328 _pixelData: null,
329 _callback: null,
330
331 // Fields used for user interaction 324 // Fields used for user interaction
332 _enabled: true, 325 _enabled: true,
333 _canvas: null, 326 _canvas: null,
334 _context: null, 327 _context: null,
335 _selectionType: "mark", 328 _selectionType: "mark",
336 _currentData: null, 329 _currentData: null,
337 _undoQueue: [], 330 _undoQueue: [],
338 331
339 collectData: function(wnd, windowURI, callback) 332 collectData: function(wnd, windowURI, callback)
340 { 333 {
341 this._callback = callback; 334 let outerWindowID = wnd.QueryInterface(Ci.nsIInterfaceRequestor)
342 this._canvas = E("screenshotCanvas"); 335 .getInterface(Ci.nsIDOMWindowUtils)
343 this._canvas.width = this._canvas.offsetWidth; 336 .outerWindowID;
337 let dataCollector = require("dataCollector");
338 let canvas = E("screenshotCanvas");
339 let screenshotWidth = canvas.offsetWidth - this.imageOffset * 2;
340 dataCollector.collectData(outerWindowID, screenshotWidth, data => {
341 if (!data || !data.screenshot)
342 {
343 callback();
344 return;
345 }
344 346
345 // Do not resize canvas any more (no idea why Gecko requires both to be set) 347 let image = new Image();
346 this._canvas.parentNode.style.MozBoxAlign = "center"; 348 image.src = data.screenshot;
347 this._canvas.parentNode.align = "center"; 349 image.addEventListener("load", () => {
350 canvas.width = image.width + this.imageOffset * 2;
351 canvas.height = image.height + this.imageOffset * 2;
348 352
349 this._context = this._canvas.getContext("2d"); 353 // Do not resize canvas any more (no idea why Gecko requires both to be set)
350 let wndWidth = wnd.document.documentElement.scrollWidth; 354 canvas.parentNode.style.MozBoxAlign = "center";
351 let wndHeight = wnd.document.documentElement.scrollHeight; 355 canvas.parentNode.align = "center";
352 356
353 // Copy scaled screenshot of the webpage. We scale the webpage by width 357 let context = canvas.getContext("2d");
354 // but leave 10px on each side for easier selecting. 358 context.drawImage(image, this.imageOffset, this.imageOffset);
355 359
356 // Gecko doesn't like sizes more than 64k, restrict to 30k to be on the safe side. 360 // Init canvas settings
357 // Also, make sure height is at most five times the width to keep image size down. 361 context.fillStyle = "rgb(0, 0, 0)";
358 let copyWidth = Math.min(wndWidth, 30000); 362 context.strokeStyle = "rgba(255, 0, 0, 0.7)";
359 let copyHeight = Math.min(wndHeight, 30000, copyWidth * 5); 363 context.lineWidth = 3;
360 let copyX = Math.max(Math.min(wnd.scrollX - copyWidth / 2, wndWidth - copyWi dth), 0); 364 context.lineJoin = "round";
361 let copyY = Math.max(Math.min(wnd.scrollY - copyHeight / 2, wndHeight - copy Height), 0);
362 365
363 let scalingFactor = (this._canvas.width - this.imageOffset * 2) / copyWidth; 366 this._canvas = canvas;
364 this._canvas.height = copyHeight * scalingFactor + this.imageOffset * 2; 367 this._context = context;
365 368
366 this._context.save(); 369 callback();
367 this._context.translate(this.imageOffset, this.imageOffset); 370 });
368 this._context.scale(scalingFactor, scalingFactor); 371 });
369 try
370 {
371 this._context.drawWindow(wnd, copyX, copyY, copyWidth, copyHeight, "rgb(25 5,255,255)");
372 }
373 catch (e)
374 {
375 Cu.reportError(e);
376 }
377 this._context.restore();
378
379 // Init canvas settings
380 this._context.fillStyle = "rgb(0, 0, 0)";
381 this._context.strokeStyle = "rgba(255, 0, 0, 0.7)";
382 this._context.lineWidth = 3;
383 this._context.lineJoin = "round";
384
385 // Reduce colors asynchronously
386 this._pixelData = this._context.getImageData(this.imageOffset, this.imageOff set,
387 this._canvas.width - this.imageOffset * 2,
388 this._canvas.height - this.imageOffset * 2 );
389 this._max = this._pixelData.width * this._pixelData.height * 4;
390 this._i = 0;
391 Utils.runAsync(this.run.bind(this));
392 },
393
394 run: function()
395 {
396 // Process only 5000 bytes at a time to prevent browser hangs
397 let endIndex = Math.min(this._i + 5000, this._max);
398 let i = this._i;
399 for (; i < endIndex; i++)
400 this._pixelData.data[i] = this._mapping[this._pixelData.data[i] >> 6];
401
402 if (i >= this._max)
403 {
404 // Save data back and we are done
405 this._context.putImageData(this._pixelData, this.imageOffset, this.imageOf fset);
406 this._callback();
407 }
408 else
409 {
410 this._i = i;
411 Utils.runAsync(this.run.bind(this));
412 }
413 }, 372 },
414 373
415 get enabled() this._enabled, 374 get enabled() this._enabled,
416 set enabled(enabled) 375 set enabled(enabled)
417 { 376 {
418 if (this._enabled == enabled) 377 if (this._enabled == enabled)
419 return; 378 return;
420 379
421 this._enabled = enabled; 380 this._enabled = enabled;
422 this._canvas.style.opacity = this._enabled ? "" : "0.3" 381 this._canvas.style.opacity = this._enabled ? "" : "0.3"
(...skipping 1167 matching lines...) Expand 10 before | Expand all | Expand 10 after
1590 1549
1591 function censorURL(url) 1550 function censorURL(url)
1592 { 1551 {
1593 return url.replace(/([?;&\/#][^?;&\/#]+?=)[^?;&\/#]+/g, "$1*"); 1552 return url.replace(/([?;&\/#][^?;&\/#]+?=)[^?;&\/#]+/g, "$1*");
1594 } 1553 }
1595 1554
1596 function encodeHTML(str) 1555 function encodeHTML(str)
1597 { 1556 {
1598 return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"). replace(/"/g, "&quot;"); 1557 return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"). replace(/"/g, "&quot;");
1599 } 1558 }
OLDNEW
« no previous file with comments | « no previous file | lib/child/dataCollector.js » ('j') | lib/child/dataCollector.js » ('J')

Powered by Google App Engine
This is Rietveld