browser/metro/base/content/bindings/circularprogress.xml@b8a032363ba2 (annotated)
browser/metro/base/content/bindings/circularprogress.xml
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
| michael@0 | 1 | <?xml version="1.0"?> |
| michael@0 | 2 | |
| michael@0 | 3 | <!-- This Source Code Form is subject to the terms of the Mozilla Public |
| michael@0 | 4 | - License, v. 2.0. If a copy of the MPL was not distributed with this |
| michael@0 | 5 | - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> |
| michael@0 | 6 | |
| michael@0 | 7 | <bindings xmlns="http://www.mozilla.org/xbl" |
| michael@0 | 8 | xmlns:xbl="http://www.mozilla.org/xbl" |
| michael@0 | 9 | xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" |
| michael@0 | 10 | xmlns:html="http://www.w3.org/1999/xhtml"> |
| michael@0 | 11 | <binding id="circular-progress-indicator"> |
| michael@0 | 12 | <resources> |
| michael@0 | 13 | <stylesheet src="chrome://browser/skin/circularprogress.css"/> |
| michael@0 | 14 | </resources> |
| michael@0 | 15 | |
| michael@0 | 16 | <content> |
| michael@0 | 17 | <xul:stack> |
| michael@0 | 18 | <xul:toolbarbutton anonid="progressButton" |
| michael@0 | 19 | class="circularprogressindicator-progressButton"/> |
| michael@0 | 20 | <html:div anonid="progressTrack" |
| michael@0 | 21 | xbl:inherits="progress" |
| michael@0 | 22 | class="circularprogressindicator-progressTrack"> |
| michael@0 | 23 | </html:div> |
| michael@0 | 24 | <html:canvas anonid="progressRing" |
| michael@0 | 25 | xbl:inherits="progress" |
| michael@0 | 26 | class="circularprogressindicator-progressRing" |
| michael@0 | 27 | width="40" |
| michael@0 | 28 | height="40"> |
| michael@0 | 29 | </html:canvas> |
| michael@0 | 30 | <html:div anonid="progressNotification" |
| michael@0 | 31 | xbl:inherits="progress" |
| michael@0 | 32 | class="circularprogressindicator-progressNotification"> |
| michael@0 | 33 | </html:div> |
| michael@0 | 34 | </xul:stack> |
| michael@0 | 35 | </content> |
| michael@0 | 36 | |
| michael@0 | 37 | <implementation> |
| michael@0 | 38 | <field name="_progressCanvas"> |
| michael@0 | 39 | document.getAnonymousElementByAttribute(this, "anonid", "progressRing"); |
| michael@0 | 40 | </field> |
| michael@0 | 41 | <field name="_progressNotification"> |
| michael@0 | 42 | document.getAnonymousElementByAttribute(this, "anonid", |
| michael@0 | 43 | "progressNotification"); |
| michael@0 | 44 | </field> |
| michael@0 | 45 | <field name="_progressCircleCtx">null</field> |
| michael@0 | 46 | <field name="_img">null</field> |
| michael@0 | 47 | <constructor> |
| michael@0 | 48 | <![CDATA[ |
| michael@0 | 49 | this._progressCircleCtx = this._progressCanvas.getContext('2d'); |
| michael@0 | 50 | ]]> |
| michael@0 | 51 | </constructor> |
| michael@0 | 52 | <method name="updateProgress"> |
| michael@0 | 53 | <parameter name="percentComplete"/> |
| michael@0 | 54 | <body> |
| michael@0 | 55 | <![CDATA[ |
| michael@0 | 56 | const PROGRESS_RING_IMG = "chrome://browser/skin/images/progresscircle.png"; |
| michael@0 | 57 | |
| michael@0 | 58 | // show ring background even if % is 0. |
| michael@0 | 59 | this.setAttribute("progress", percentComplete); |
| michael@0 | 60 | |
| michael@0 | 61 | let startAngle = 1.5 * Math.PI; |
| michael@0 | 62 | let endAngle = startAngle + (2 * Math.PI * (percentComplete / 100)); |
| michael@0 | 63 | |
| michael@0 | 64 | if (!this._img) { |
| michael@0 | 65 | this._img = new Image(); |
| michael@0 | 66 | this._img.onload = () => { |
| michael@0 | 67 | this.updateProgress(this.getAttribute("progress")) |
| michael@0 | 68 | } |
| michael@0 | 69 | this._img.src = PROGRESS_RING_IMG; |
| michael@0 | 70 | } |
| michael@0 | 71 | else if (this._img.complete) { |
| michael@0 | 72 | let ctx = this._progressCircleCtx; |
| michael@0 | 73 | ctx.clearRect(0, 0, |
| michael@0 | 74 | this._progressCanvas.width, this._progressCanvas.height); |
| michael@0 | 75 | |
| michael@0 | 76 | // Save the state, so we can undo the clipping |
| michael@0 | 77 | ctx.save(); |
| michael@0 | 78 | |
| michael@0 | 79 | ctx.beginPath(); |
| michael@0 | 80 | let center = this._progressCanvas.width / 2; |
| michael@0 | 81 | ctx.arc(center, center, center, startAngle, endAngle, false); |
| michael@0 | 82 | ctx.lineTo(center, center); |
| michael@0 | 83 | ctx.closePath(); |
| michael@0 | 84 | ctx.clip(); |
| michael@0 | 85 | |
| michael@0 | 86 | // Draw circle image. |
| michael@0 | 87 | ctx.translate(center, center); |
| michael@0 | 88 | ctx.rotate(endAngle); |
| michael@0 | 89 | ctx.drawImage(this._img, -center, -center); |
| michael@0 | 90 | |
| michael@0 | 91 | ctx.restore(); |
| michael@0 | 92 | } else { |
| michael@0 | 93 | // Image is still loading |
| michael@0 | 94 | } |
| michael@0 | 95 | return [startAngle, endAngle]; |
| michael@0 | 96 | ]]> |
| michael@0 | 97 | </body> |
| michael@0 | 98 | </method> |
| michael@0 | 99 | <method name="reset"> |
| michael@0 | 100 | <body> |
| michael@0 | 101 | <![CDATA[ |
| michael@0 | 102 | if(this._img && !this._img.complete) { |
| michael@0 | 103 | // cancel any pending updateProgress |
| michael@0 | 104 | this._img.onload = () => {}; |
| michael@0 | 105 | } |
| michael@0 | 106 | this._progressCircleCtx.clearRect(0, 0, |
| michael@0 | 107 | this._progressCanvas.width, this._progressCanvas.height); |
| michael@0 | 108 | this.removeAttribute("progress"); |
| michael@0 | 109 | ]]> |
| michael@0 | 110 | </body> |
| michael@0 | 111 | </method> |
| michael@0 | 112 | <method name="notify"> |
| michael@0 | 113 | <body> |
| michael@0 | 114 | <![CDATA[ |
| michael@0 | 115 | this.addEventListener("transitionend", this._onNotificationEnd); |
| michael@0 | 116 | |
| michael@0 | 117 | this._progressNotification.classList.add( |
| michael@0 | 118 | "progressNotification-active"); |
| michael@0 | 119 | ]]> |
| michael@0 | 120 | </body> |
| michael@0 | 121 | </method> |
| michael@0 | 122 | <method name="_onNotificationEnd"> |
| michael@0 | 123 | <body> |
| michael@0 | 124 | <![CDATA[ |
| michael@0 | 125 | this.removeEventListener("transitionend", this._onNotificationEnd); |
| michael@0 | 126 | |
| michael@0 | 127 | this._progressNotification.classList.remove( |
| michael@0 | 128 | "progressNotification-active"); |
| michael@0 | 129 | ]]> |
| michael@0 | 130 | </body> |
| michael@0 | 131 | </method> |
| michael@0 | 132 | </implementation> |
| michael@0 | 133 | </binding> |
| michael@0 | 134 | </bindings> |
