Fix alpha mask for download progress on high DPI displays.

chrome/browser/resources/downloads/downloads.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // TODO(jhawkins): Use hidden instead of showInline* and display:none.
 
 /**
  * Sets the display style of a node.
+ * @param {!Element} node The target element to show or hide.
+ * @param {boolean} isShow Should the target element be visible.
  */
 function showInline(node, isShow) {
   node.style.display = isShow ? 'inline' : 'none';
 }
 
+/**
+ * Sets the display style of a node.
+ * @param {!Element} node The target element to show or hide.
+ * @param {boolean} isShow Should the target element be visible.
+ */
 function showInlineBlock(node, isShow) {
   node.style.display = isShow ? 'inline-block' : 'none';
 }
 
 /**
  * Creates an element of a specified type with a specified class name.
  * @param {string} type The node type.
  * @param {string} className The class name to use.
+ * @return {Element} The created element.
  */
 function createElementWithClassName(type, className) {
   var elm = document.createElement(type);
   elm.className = className;
   return elm;
 }
 
 /**
- * Creates a link with a specified onclick handler and content
- * @param {function()} onclick The onclick handler
- * @param {string} value The link text
+ * Creates a link with a specified onclick handler and content.
+ * @param {function()} onclick The onclick handler.
+ * @param {string} value The link text.
+ * @return {Element} The created link element.
  */
 function createLink(onclick, value) {
   var link = document.createElement('a');
   link.onclick = onclick;
   link.href = '#';
   link.textContent = value;
   link.oncontextmenu = function() { return false; };
   return link;
 }
 
 /**
- * Creates a button with a specified onclick handler and content
- * @param {function()} onclick The onclick handler
- * @param {string} value The button text
+ * Creates a button with a specified onclick handler and content.
+ * @param {function()} onclick The onclick handler.
+ * @param {string} value The button text.
+ * @return {Element} The created button.
  */
 function createButton(onclick, value) {
   var button = document.createElement('input');
   button.type = 'button';
   button.value = value;
   button.onclick = onclick;
   return button;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ skipping 181 matching lines @@
   // Container for all 'safe download' UI.
   this.safe_ = createElementWithClassName('div', 'safe');
   this.safe_.ondragstart = this.drag_.bind(this);
   this.node.appendChild(this.safe_);
 
   if (download.state != Download.States.COMPLETE) {
     this.nodeProgressBackground_ =
         createElementWithClassName('div', 'progress background');
     this.safe_.appendChild(this.nodeProgressBackground_);
 
-    this.canvasProgress_ =
-        document.getCSSCanvasContext('2d', 'canvas_' + download.id,
-            Download.Progress.width,
-            Download.Progress.height);
+    this.nodeProgressForeground_ =
+        createElementWithClassName('canvas', 'progress');
+    this.nodeProgressForeground_.width = Download.Progress.width;
+    this.nodeProgressForeground_.height = Download.Progress.height;
+    this.canvasProgress_ = this.nodeProgressForeground_.getContext('2d');
 
-    this.nodeProgressForeground_ =
-        createElementWithClassName('div', 'progress foreground');
-    this.nodeProgressForeground_.style.webkitMask =
-        '-webkit-canvas(canvas_' + download.id + ')';
+    this.canvasProgressForegroundImage_ = new Image();
+    this.canvasProgressForegroundImage_.src =
+        'chrome://theme/IDR_DOWNLOAD_PROGRESS_FOREGROUND_32@' +
+        window.devicePixelRatio + 'x';
     this.safe_.appendChild(this.nodeProgressForeground_);
   }
 
   this.nodeImg_ = createElementWithClassName('img', 'icon');
   this.safe_.appendChild(this.nodeImg_);
 
   // FileLink is used for completed downloads, otherwise we show FileName.
   this.nodeTitleArea_ = createElementWithClassName('div', 'title-area');
   this.safe_.appendChild(this.nodeTitleArea_);
 
@@ skipping 90 matching lines @@
   NOT_DANGEROUS: 'NOT_DANGEROUS',
   DANGEROUS_FILE: 'DANGEROUS_FILE',
   DANGEROUS_URL: 'DANGEROUS_URL',
   DANGEROUS_CONTENT: 'DANGEROUS_CONTENT',
   UNCOMMON_CONTENT: 'UNCOMMON_CONTENT'
 };
 
 /**
  * Constants for the progress meter.
  */
-Download.Progress = {
-  width: 48,
-  height: 48,
-  radius: 24,
-  centerX: 24,
-  centerY: 24,
-  base: -0.5 * Math.PI,
-  dir: false,
-};
+
+Download.Progress = (function() {
+  var scale = window.devicePixelRatio;
+  return {
+    width: 48 * scale,
+    height: 48 * scale,
+    radius: 24 * scale,
+    centerX: 24 * scale,
+    centerY: 24 * scale,
+    base: -0.5 * Math.PI,
+    dir: false,
+  };
+})();
 
 /**
  * Updates the download to reflect new data.
  * @param {Object} download A backend download object (see downloads_ui.cc)
  */
 Download.prototype.update = function(download) {
   this.id_ = download.id;
   this.filePath_ = download.file_path;
   this.fileUrl_ = download.file_url;
   this.fileName_ = download.file_name;
@@ skipping 52 matching lines @@
     // undesirable reordering. http://crbug.com/13216
     showInlineBlock(this.nodeFileName_,
                     this.state_ != Download.States.COMPLETE ||
                         this.fileExternallyRemoved_);
 
     if (this.state_ == Download.States.IN_PROGRESS) {
       this.nodeProgressForeground_.style.display = 'block';
       this.nodeProgressBackground_.style.display = 'block';
 
       // Draw a pie-slice for the progress.
-      this.canvasProgress_.clearRect(0, 0,
-                                     Download.Progress.width,
-                                     Download.Progress.height);
+      this.canvasProgress_.globalCompositeOperation = 'copy';
+      this.canvasProgress_.drawImage(this.canvasProgressForegroundImage_, 0, 0);
+      this.canvasProgress_.globalCompositeOperation = 'destination-in';
       this.canvasProgress_.beginPath();
       this.canvasProgress_.moveTo(Download.Progress.centerX,
                                   Download.Progress.centerY);
 
       // Draw an arc CW for both RTL and LTR. http://crbug.com/13215
       this.canvasProgress_.arc(Download.Progress.centerX,
                                Download.Progress.centerY,
                                Download.Progress.radius,
                                Download.Progress.base,
                                Download.Progress.base + Math.PI * 0.02 *
@@ skipping 77 matching lines @@
     case Download.States.COMPLETE:
       return this.fileExternallyRemoved_ ?
           loadTimeData.getString('status_removed') : '';
   }
 };
 
 /**
  * Tells the backend to initiate a drag, allowing users to drag
  * files from the download page and have them appear as native file
  * drags.
+ * @return {boolean} Returns false to prevent the default action.
  * @private
  */
 Download.prototype.drag_ = function() {
   chrome.send('drag', [this.id_.toString()]);
   return false;
 };
 
 /**
  * Tells the backend to open this file.
+ * @return {boolean} Returns false to prevent the default action.
  * @private
  */
 Download.prototype.openFile_ = function() {
   chrome.send('openFile', [this.id_.toString()]);
   return false;
 };
 
 /**
  * Tells the backend that the user chose to save a dangerous file.
+ * @return {boolean} Returns false to prevent the default action.
  * @private
  */
 Download.prototype.saveDangerous_ = function() {
   chrome.send('saveDangerous', [this.id_.toString()]);
   return false;
 };
 
 /**
  * Tells the backend that the user chose to discard a dangerous file.
+ * @return {boolean} Returns false to prevent the default action.
  * @private
  */
 Download.prototype.discardDangerous_ = function() {
   chrome.send('discardDangerous', [this.id_.toString()]);
   downloads.remove(this.id_);
   return false;
 };
 
 /**
  * Tells the backend to show the file in explorer.
+ * @return {boolean} Returns false to prevent the default action.
  * @private
  */
 Download.prototype.show_ = function() {
   chrome.send('show', [this.id_.toString()]);
   return false;
 };
 
 /**
  * Tells the backend to pause this download.
+ * @return {boolean} Returns false to prevent the default action.
  * @private
  */
 Download.prototype.togglePause_ = function() {
   chrome.send('togglepause', [this.id_.toString()]);
   return false;
 };
 
 /**
  * Tells the backend to remove this download from history and download shelf.
+ * @return {boolean} Returns false to prevent the default action.
  * @private
  */
  Download.prototype.remove_ = function() {
   chrome.send('remove', [this.id_.toString()]);
   return false;
 };
 
 /**
  * Tells the backend to cancel this download.
+ * @return {boolean} Returns false to prevent the default action.
  * @private
  */
 Download.prototype.cancel_ = function() {
   chrome.send('cancel', [this.id_.toString()]);
   return false;
 };
 
 ///////////////////////////////////////////////////////////////////////////////
 // Page:
 var downloads, resultsTimeout;
@@ skipping 50 matching lines @@
   downloads.clear();
   downloads.setSearchText('');
   chrome.send('clearAll');
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Chrome callbacks:
 /**
  * Our history system calls this function with results from searches or when
  * downloads are added or removed.
+ * @param {Array.<Object>} results List of updates.
  */
 function downloadsList(results) {
   if (downloads && downloads.isUpdateNeeded(results)) {
     if (resultsTimeout)
       clearTimeout(resultsTimeout);
     fifo_results.length = 0;
     downloads.clear();
     downloadUpdated(results);
   }
   downloads.updateSummary();
 }
 
 /**
  * When a download is updated (progress, state change), this is called.
+ * @param {Array.<Object>} results List of updates for the download process.
  */
 function downloadUpdated(results) {
   // Sometimes this can get called too early.
   if (!downloads)
     return;
 
   fifo_results = fifo_results.concat(results);
   tryDownloadUpdatedPeriodically();
 }
 
@@ skipping 10 matching lines @@
     if (Date.now() - start > 50) {
       clearTimeout(resultsTimeout);
       resultsTimeout = setTimeout(tryDownloadUpdatedPeriodically, 5);
       break;
     }
   }
 }
 
 // Add handlers to HTML elements.
 window.addEventListener('DOMContentLoaded', load);