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

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

Issue 8329305: Fixed issue reporter`s progress labels for right-to-left languages (Closed)
Patch Set: Created Sept. 14, 2012, 9:09 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 | chrome/content/ui/sendReport.js » ('j') | chrome/content/ui/sendReport.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This Source Code is subject to the terms of the Mozilla Public License 2 * This Source Code is subject to the terms of the Mozilla Public License
3 * version 2.0 (the "License"). You can obtain a copy of the License at 3 * version 2.0 (the "License"). You can obtain a copy of the License at
4 * http://mozilla.org/MPL/2.0/. 4 * http://mozilla.org/MPL/2.0/.
5 */ 5 */
6 6
7 (function() 7 (function()
8 { 8 {
9 let progressBar, canvas, headers; 9 let progressBar, canvas, headers, isRTL;
10 10
11 function onLoad() 11 function onLoad()
12 { 12 {
13 window.removeEventListener("load", onLoad, false); 13 window.removeEventListener("load", onLoad, false);
14 14
15 // Init global variables 15 // Init global variables
16 progressBar = document.getElementById("progressBar"); 16 progressBar = document.getElementById("progressBar");
17 canvas = document.getElementById("progressBarCanvas"); 17 canvas = document.getElementById("progressBarCanvas");
18 18
19 headers = Array.prototype.slice.call(progressBar.getElementsByTagName("label ")); 19 headers = Array.prototype.slice.call(progressBar.getElementsByTagName("label "));
20 for (let i = 0; i < headers.length; i++) 20 for (let i = 0; i < headers.length; i++)
21 canvas.parentNode.appendChild(headers[i]); 21 canvas.parentNode.appendChild(headers[i]);
22 22
23 // Expose properties 23 // Expose properties
24 progressBar.__defineGetter__("activeItem", getActiveItem); 24 progressBar.__defineGetter__("activeItem", getActiveItem);
25 progressBar.__defineSetter__("activeItem", setActiveItem); 25 progressBar.__defineSetter__("activeItem", setActiveItem);
26 progressBar.__defineGetter__("activeItemComplete", getActiveItemComplete); 26 progressBar.__defineGetter__("activeItemComplete", getActiveItemComplete);
27 progressBar.__defineSetter__("activeItemComplete", setActiveItemComplete); 27 progressBar.__defineSetter__("activeItemComplete", setActiveItemComplete);
28 28
29 isRTL = (window.getComputedStyle(document.documentElement).direction == "rtl ");
30
29 // Run actual drawing delayed, once the sizes are fixed 31 // Run actual drawing delayed, once the sizes are fixed
30 window.setTimeout(init, 0); 32 window.setTimeout(init, 0);
31 }; 33 };
32 window.addEventListener("load", onLoad, false); 34 window.addEventListener("load", onLoad, false);
33 35
34 function init() 36 function init()
35 { 37 {
36 const gapWidth = 5; 38 const gapWidth = 5;
37 const arrowheadWidth = 5; 39 const arrowheadWidth = 5;
38 40
39 let width = canvas.width = canvas.offsetWidth; 41 let width = canvas.width = canvas.offsetWidth;
40 let height = canvas.height = canvas.offsetHeight; 42 let height = canvas.height = canvas.offsetHeight;
41 43
42 let context = canvas.getContext("2d"); 44 let context = canvas.getContext("2d");
43 context.fillStyle = window.getComputedStyle(progressBar, "").color; 45 context.fillStyle = window.getComputedStyle(progressBar, "").color;
44 context.strokeStyle = window.getComputedStyle(progressBar, "").color; 46 context.strokeStyle = window.getComputedStyle(progressBar, "").color;
45 context.lineWidth = 1; 47 context.lineWidth = 1;
48 if(isRTL)
Wladimir Palant 2012/09/14 21:20:40 Style nit: please insert a space between "if" and
49 {
50 context.translate(width, 0);
51 context.scale(-1, 1);
52 }
46 53
47 let panelCount = headers.length; 54 let panelCount = headers.length;
48 let panelWidth = (width - gapWidth * (panelCount - 1) - 1) / panelCount; 55 let panelWidth = (width - gapWidth * (panelCount - 1) - 1) / panelCount;
49 for (let i = 0; i < panelCount; i++) 56 for (let i = 0; i < panelCount; i++)
50 { 57 {
51 context.save(); 58 context.save();
52 context.translate(Math.round(i * (panelWidth + gapWidth)) + 0.5, 0.5); 59 context.translate(Math.round(i * (panelWidth + gapWidth)) + 0.5, 0.5);
53 context.beginPath(); 60 context.beginPath();
54 if (i) 61 if (i)
55 context.moveTo(-arrowheadWidth, 0); 62 context.moveTo(-arrowheadWidth, 0);
56 else 63 else
57 context.moveTo(0, 0); 64 context.moveTo(0, 0);
58 context.lineTo(panelWidth - arrowheadWidth, 0); 65 context.lineTo(panelWidth - arrowheadWidth, 0);
59 context.lineTo(panelWidth, (height - 1) / 2); 66 context.lineTo(panelWidth, (height - 1) / 2);
60 context.lineTo(panelWidth - arrowheadWidth, height - 1); 67 context.lineTo(panelWidth - arrowheadWidth, height - 1);
61 if (i) 68 if (i)
62 { 69 {
63 context.lineTo(-arrowheadWidth, height - 1); 70 context.lineTo(-arrowheadWidth, height - 1);
64 context.lineTo(0, (height - 1) / 2); 71 context.lineTo(0, (height - 1) / 2);
65 context.lineTo(-arrowheadWidth, 0); 72 context.lineTo(-arrowheadWidth, 0);
66 } 73 }
67 else 74 else
68 { 75 {
69 context.lineTo(0, height - 1); 76 context.lineTo(0, height - 1);
70 context.lineTo(0, 0); 77 context.lineTo(0, 0);
71 } 78 }
79
72 context.stroke(); 80 context.stroke();
73 context.restore(); 81 context.restore();
74 82
75 let childLeft = Math.round(i * (panelWidth + gapWidth) + 1); 83 let childLeft = Math.round(i * (panelWidth + gapWidth) + 1);
76 let childWidth = panelWidth - arrowheadWidth - 2; 84 let childWidth = panelWidth - arrowheadWidth - 2;
77 let child = headers[i]; 85 let child = headers[i];
78 child.style.marginLeft = childLeft + "px"; 86 child.style.marginLeft = childLeft + "px";
79 child.style.marginRight = (width - childLeft - childWidth) + "px"; 87 child.style.marginRight = (width - childLeft - childWidth) + "px";
80 child.style.width = childWidth + "px"; 88 child.style.width = childWidth + "px";
Wladimir Palant 2012/09/14 21:20:40 Since we are already positioning headers manually,
81 } 89 }
82 90
83 // Resize after initialization should be ignored 91 // Resize after initialization should be ignored
84 canvas.parentNode.removeAttribute("flex"); 92 canvas.parentNode.removeAttribute("flex");
85 } 93 }
86 94
87 function getActiveItem() 95 function getActiveItem()
88 { 96 {
89 for (let i = 0; i < headers.length; i++) 97 for (let i = 0; i < headers.length; i++)
90 { 98 {
91 let header = headers[i]; 99 let header = headers[i];
92 if (header.classList.contains("active")) 100 if (header.classList.contains("active"))
93 return header; 101 return header;
94 } 102 }
95 return null; 103 return null;
96 } 104 }
97 105
98 function setActiveItem(val) 106 function setActiveItem(val)
99 { 107 {
100 let complete = true; 108 let complete = true;
101 for (let i = 0; i < headers.length; i++) 109 for (let i = 0; i < headers.length; i++)
102 { 110 {
103 let header = headers[i]; 111 let header = headers[(isRTL) ? headers.length-i-1 : i];
Wladimir Palant 2012/09/14 21:20:40 Style nit: please a space before and after a binar
104 if (header == val) 112 if (header == val)
105 complete = false; 113 complete = false;
106 114
107 if (!complete && header.value[0] == "✔") 115 if (!complete && header.value[0] == "✔")
108 header.value = header.value.replace(/^✔\s*/, ""); 116 header.value = header.value.replace(/^✔\s*/, "");
109 else if (complete && header.value[0] != "✔") 117 else if (complete && header.value[0] != "✔")
110 header.value = "✔ " + header.value; 118 header.value = "✔ " + header.value;
111 119
112 if (header == val) 120 if (header == val)
113 header.classList.add("active"); 121 header.classList.add("active");
(...skipping 16 matching lines...) Expand all
130 let activeItem = this.activeItem; 138 let activeItem = this.activeItem;
131 if (!activeItem) 139 if (!activeItem)
132 return; 140 return;
133 141
134 if (!val && activeItem.value[0] == "✔") 142 if (!val && activeItem.value[0] == "✔")
135 activeItem.value = activeItem.value.replace(/^✔\s*/, ""); 143 activeItem.value = activeItem.value.replace(/^✔\s*/, "");
136 else if (val && activeItem.value[0] != "✔") 144 else if (val && activeItem.value[0] != "✔")
137 activeItem.value = "✔ " + activeItem.value; 145 activeItem.value = "✔ " + activeItem.value;
138 } 146 }
139 })(); 147 })();
OLDNEW
« no previous file with comments | « no previous file | chrome/content/ui/sendReport.js » ('j') | chrome/content/ui/sendReport.js » ('J')

Powered by Google App Engine
This is Rietveld