diff --git a/browser/metro/base/content/bindings/circularprogress.xml b/browser/metro/base/content/bindings/circularprogress.xml new file mode 100644 index 00000000000..00f673e61c8 --- /dev/null +++ b/browser/metro/base/content/bindings/circularprogress.xml @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + document.getAnonymousElementByAttribute(this, "anonid", "progressRing"); + + null + null + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/browser/metro/base/content/browser.css b/browser/metro/base/content/browser.css index f35c745624a..da905ec0865 100644 --- a/browser/metro/base/content/browser.css +++ b/browser/metro/base/content/browser.css @@ -42,6 +42,10 @@ autoscroller { -moz-binding: url('chrome://browser/content/bindings/popup.xml#element-popup'); } +circularprogressindicator { + -moz-binding: url('chrome://browser/content/bindings/circularprogress.xml#circular-progress-indicator'); +} + setting[type="bool"] { display: -moz-box; -moz-binding: url("chrome://browser/content/bindings/toggleswitch.xml#setting-fulltoggle-bool"); diff --git a/browser/metro/base/content/browser.xul b/browser/metro/base/content/browser.xul index 7dc47617567..321d2c3afc9 100644 --- a/browser/metro/base/content/browser.xul +++ b/browser/metro/base/content/browser.xul @@ -296,8 +296,8 @@ command="cmd_stop"/> - + download guid + // info[1].download => nsIDownload + totPercent += info[1].download.percentComplete; + } + + let percentComplete = totPercent / this._progressNotificationInfo.size; + this._downloadProgressIndicator.updateProgress(percentComplete); + }, + _computeDownloadProgressString: function dv_computeDownloadProgressString(aDownload) { let totTransferred = 0, totSize = 0, totSecondsLeft = 0; for (let info of this._progressNotificationInfo) { @@ -260,6 +282,7 @@ var Downloads = { totSize += size; totSecondsLeft += ((size - amountTransferred) / speed); } + // Compute progress in bytes. let amountTransferred = Util.getDownloadSize(totTransferred); let size = Util.getDownloadSize(totSize); @@ -296,6 +319,7 @@ var Downloads = { updateInfobar: function dv_updateInfobar(aDownload) { this._saveDownloadData(aDownload); let message = this._computeDownloadProgressString(aDownload); + this._updateCircularProgressMeter(); if (this._progressNotification == null || !this._notificationBox.getNotificationWithValue("download-progress")) { @@ -310,6 +334,7 @@ var Downloads = { accessKey: "", callback: function() { Downloads.cancelDownloads(); + Downloads._downloadProgressIndicator.reset(); } } ]; @@ -327,6 +352,7 @@ var Downloads = { this._saveDownloadData(aDownload); this._progressNotification.label = this._computeDownloadProgressString(aDownload); + this._updateCircularProgressMeter(); } }, diff --git a/browser/metro/base/jar.mn b/browser/metro/base/jar.mn index e2b14abbd62..5573f4ffd06 100644 --- a/browser/metro/base/jar.mn +++ b/browser/metro/base/jar.mn @@ -26,6 +26,7 @@ chrome.jar: content/bindings/selectionoverlay.xml (content/bindings/selectionoverlay.xml) content/bindings/cssthrobber.xml (content/bindings/cssthrobber.xml) content/bindings/popup.xml (content/bindings/popup.xml) + content/bindings/circularprogress.xml (content/bindings/circularprogress.xml) * content/flyoutpanels/FlyoutPanelsUI.js (content/flyoutpanels/FlyoutPanelsUI.js) * content/flyoutpanels/AboutFlyoutPanel.js (content/flyoutpanels/AboutFlyoutPanel.js) diff --git a/browser/metro/base/tests/mochitest/Makefile.in b/browser/metro/base/tests/mochitest/Makefile.in index 78391d886f2..20cd222b798 100644 --- a/browser/metro/base/tests/mochitest/Makefile.in +++ b/browser/metro/base/tests/mochitest/Makefile.in @@ -15,6 +15,7 @@ MOCHITEST_METRO_FILES = \ browser_urlbar.js \ browser_bookmarks.js \ browser_canonizeURL.js \ + browser_circular_progress_indicator.js \ browser_context_menu_tests.js \ browser_context_menu_tests_01.html \ browser_context_menu_tests_02.html \ @@ -27,6 +28,7 @@ MOCHITEST_METRO_FILES = \ browser_onscreen_keyboard.js \ browser_onscreen_keyboard.html \ browser_prefs_ui.js \ + browser_progress_indicator.xul \ browser_remotetabs.js \ browser_tabs.js \ browser_test.js \ diff --git a/browser/metro/base/tests/mochitest/browser_circular_progress_indicator.js b/browser/metro/base/tests/mochitest/browser_circular_progress_indicator.js new file mode 100644 index 00000000000..c7ee7dfa43e --- /dev/null +++ b/browser/metro/base/tests/mochitest/browser_circular_progress_indicator.js @@ -0,0 +1,59 @@ +/* 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/. */ + +let doc; + +function test() { + waitForExplicitFinish(); + Task.spawn(function(){ + netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); + + info(chromeRoot + "browser_progress_indicator.xul"); + yield addTab(chromeRoot + "browser_progress_indicator.xul"); + doc = Browser.selectedTab.browser.contentWindow.document; + }).then(runTests); +} + +gTests.push({ + desc: "circular progress indicator binding is applied.", + run: function() { + ok(doc, "doc got defined"); + + let progressIndicator = doc.querySelector("#progress-indicator"); + ok(progressIndicator, "progress-indicator is found"); + is(typeof progressIndicator.reset, "function", "#progress-indicator has a reset() function"); + is(typeof progressIndicator.updateProgress, "function", "#progress-indicator has a updateProgress() function"); + } +}); + +gTests.push({ + desc: "start and end angles are correct for various percents complete", + run: function() { + let progressIndicator = doc.querySelector("#progress-indicator"); + ok(progressIndicator, "progress-indicator is found"); + is(typeof progressIndicator.updateProgress, "function", "#progress-indicator has a updateProgress() function"); + + let expectedStartAngle = 1.5 * Math.PI; + + let percentComplete = 0; + let [startAngle, endAngle] = progressIndicator.updateProgress(percentComplete); + is(startAngle, expectedStartAngle, "start angle is correct"); + is(endAngle, startAngle + (2 * Math.PI * (percentComplete / 100)), "end angle is correct"); + + percentComplete = 0.05; + [startAngle, endAngle] = progressIndicator.updateProgress(percentComplete); + is(startAngle, expectedStartAngle, "start angle is correct"); + is(endAngle, startAngle + (2 * Math.PI * (percentComplete / 100)), "end angle is correct"); + + percentComplete = 0.5; + [startAngle, endAngle] = progressIndicator.updateProgress(percentComplete); + is(startAngle, expectedStartAngle, "start angle is correct"); + is(endAngle, startAngle + (2 * Math.PI * (percentComplete / 100)), "end angle is correct"); + + percentComplete = 1; + [startAngle, endAngle] = progressIndicator.updateProgress(percentComplete); + is(startAngle, expectedStartAngle, "start angle is correct"); + is(endAngle, startAngle + (2 * Math.PI * (percentComplete / 100)), "end angle is correct"); + } +}); \ No newline at end of file diff --git a/browser/metro/base/tests/mochitest/browser_progress_indicator.xul b/browser/metro/base/tests/mochitest/browser_progress_indicator.xul new file mode 100644 index 00000000000..6c7e4924bc2 --- /dev/null +++ b/browser/metro/base/tests/mochitest/browser_progress_indicator.xul @@ -0,0 +1,15 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/browser/metro/theme/browser.css b/browser/metro/theme/browser.css index 49fe1ef66ef..dd51e32bfbd 100644 --- a/browser/metro/theme/browser.css +++ b/browser/metro/theme/browser.css @@ -448,6 +448,12 @@ documenttab[selected] .documenttab-selection { transform: none; } +.circularprogressindicator-progressRing { + margin: 0 @toolbar_horizontal_spacing@; + pointer-events:none; + position: absolute; +} + /* Progress meter ---------------------------------------------------------- */ #progress-container { @@ -675,13 +681,14 @@ documenttab[selected] .documenttab-selection { /* Application-Specific */ -#download-button { +.circularprogressindicator-progressButton { + margin: 0 @toolbar_horizontal_spacing@; -moz-image-region: rect(0px, 40px, 40px, 0px) !important; } -#download-button:hover { +.circularprogressindicator-progressButton:hover { -moz-image-region: rect(40px, 40px, 80px, 0px) !important; } -#download-button:active { +.circularprogressindicator-progressButton:active { -moz-image-region: rect(80px, 40px, 120px, 0px) !important; } diff --git a/browser/metro/theme/images/progresscircle.png b/browser/metro/theme/images/progresscircle.png new file mode 100644 index 00000000000..f0a4dbfdf94 Binary files /dev/null and b/browser/metro/theme/images/progresscircle.png differ diff --git a/browser/metro/theme/jar.mn b/browser/metro/theme/jar.mn index a44b0cfaf42..f120710fe1d 100644 --- a/browser/metro/theme/jar.mn +++ b/browser/metro/theme/jar.mn @@ -99,6 +99,7 @@ chrome.jar: skin/images/tile-selected-check-hdpi.png (images/tile-selected-check-hdpi.png) skin/images/plus-34.png (images/plus-34.png) skin/images/plus-24.png (images/plus-24.png) + skin/images/progresscircle.png (images/progresscircle.png) skin/images/overlay-back.png (images/overlay-back.png) skin/images/overlay-plus.png (images/overlay-plus.png)