Changes between Version 16 and Version 18 of Ticket #7338


Ignore:
Timestamp:
03/28/2019 05:34:19 PM (17 months ago)
Author:
kzar
Comment:

Cool, I just tried that out and it seems possible on Chrome 72 at least. My test code (of course you need to add the eyeo-32.png file first):

let canvas = new OffscreenCanvas(32, 32);
let context = canvas.getContext("2d");
fetch("icons/eyeo-32.png").then(response =>
{
  return response.body.getReader().read();
}).then(responseData =>
{
  return createImageBitmap(new Blob([responseData.value]));
}).then(imageBitmap =>
{
  canvas.globalAlpha = 1;
  context.drawImage(imageBitmap, 0, 0);

  return browser.browserAction.setIcon({
    imageData: {32: context.getImageData(0, 0, 32, 32)}
  });
}).then(() =>
{
  console.log("Icon set");
});

If that turns out to work OK in practice with the real code, I wonder what we should do for browsers that don't yet support OffscreenCanvas, like older versions of Chrome? I guess we can fallback to just using image paths, breaking animations like we used to do for Safari.

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #7338 – Description

    v16 v18  
    1212- In `lib/notificationHelper.js` we use `window.confirm` as a fall back for question notifications, where the `browser.notifications` API is faulty/unavailable. We plan to remove this fallback with #7408. 
    1313 
    14 - In `lib/icon.js` we use `Image` to load the icon images, then `document.createElement` to create a `canvas` with their contents as an optimisation (#7253). We'll need to pass the image paths to the `browserAction` APIs instead. 
     14- In `lib/icon.js` we use `Image` to load the icon images, then `document.createElement` to create a `canvas` with their contents as an optimisation (#7253). We'll need to use a combination of the `fetch` and `OffscreenCanvas` APIs instead, falling back to just setting the image path on browers which don't yet support `OffscreenCanvas`. 
    1515- In `lib/filterValidation.js` we use `document.createElement`, `document.documentElement.appendChild`, `document.documentElement.removeChild` and `document.querySelector` to create a `style` element which we use to test if a given CSS selector is valid. No plan so far, we'll need to attempt to validate CSS selectors ourselves - perhaps with a big regexp. 
    1616