OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 'use strict'; | 5 'use strict'; |
6 | 6 |
7 define('main', [ | 7 define( |
8 'chrome/browser/ui/webui/engagement/site_engagement.mojom', | 8 'main', |
9 'content/public/renderer/frame_interfaces', | 9 [ |
10 ], function(siteEngagementMojom, frameInterfaces) { | 10 'chrome/browser/ui/webui/engagement/site_engagement.mojom', |
11 return function() { | 11 'content/public/renderer/frame_interfaces', |
12 var uiHandler = new siteEngagementMojom.SiteEngagementUIHandlerPtr( | 12 ], |
13 frameInterfaces.getInterface( | 13 function(siteEngagementMojom, frameInterfaces) { |
14 siteEngagementMojom.SiteEngagementUIHandler.name)); | 14 return function() { |
| 15 var uiHandler = new siteEngagementMojom.SiteEngagementUIHandlerPtr( |
| 16 frameInterfaces.getInterface( |
| 17 siteEngagementMojom.SiteEngagementUIHandler.name)); |
15 | 18 |
16 var engagementTableBody = $('engagement-table-body'); | 19 var engagementTableBody = $('engagement-table-body'); |
17 var updateInterval = null; | 20 var updateInterval = null; |
18 var info = null; | 21 var info = null; |
19 var sortKey = 'score'; | 22 var sortKey = 'score'; |
20 var sortReverse = true; | 23 var sortReverse = true; |
21 | 24 |
22 // Set table header sort handlers. | 25 // Set table header sort handlers. |
23 var engagementTableHeader = $('engagement-table-header'); | 26 var engagementTableHeader = $('engagement-table-header'); |
24 var headers = engagementTableHeader.children; | 27 var headers = engagementTableHeader.children; |
25 for (var i = 0; i < headers.length; i++) { | 28 for (var i = 0; i < headers.length; i++) { |
26 headers[i].addEventListener('click', function(e) { | 29 headers[i].addEventListener('click', function(e) { |
27 var newSortKey = e.target.getAttribute('sort-key'); | 30 var newSortKey = e.target.getAttribute('sort-key'); |
28 if (sortKey == newSortKey) { | 31 if (sortKey == newSortKey) { |
29 sortReverse = !sortReverse; | 32 sortReverse = !sortReverse; |
30 } else { | 33 } else { |
31 sortKey = newSortKey; | 34 sortKey = newSortKey; |
32 sortReverse = false; | 35 sortReverse = false; |
| 36 } |
| 37 var oldSortColumn = document.querySelector('.sort-column'); |
| 38 oldSortColumn.classList.remove('sort-column'); |
| 39 e.target.classList.add('sort-column'); |
| 40 if (sortReverse) |
| 41 e.target.setAttribute('sort-reverse', ''); |
| 42 else |
| 43 e.target.removeAttribute('sort-reverse'); |
| 44 renderTable(); |
| 45 }); |
33 } | 46 } |
34 var oldSortColumn = document.querySelector('.sort-column'); | |
35 oldSortColumn.classList.remove('sort-column'); | |
36 e.target.classList.add('sort-column'); | |
37 if (sortReverse) | |
38 e.target.setAttribute('sort-reverse', ''); | |
39 else | |
40 e.target.removeAttribute('sort-reverse'); | |
41 renderTable(); | |
42 }); | |
43 } | |
44 | 47 |
45 /** | 48 /** |
46 * Creates a single row in the engagement table. | 49 * Creates a single row in the engagement table. |
47 * @param {SiteEngagementInfo} info The info to create the row from. | 50 * @param {SiteEngagementInfo} info The info to create the row from. |
48 * @return {HTMLElement} | 51 * @return {HTMLElement} |
49 */ | 52 */ |
50 function createRow(info) { | 53 function createRow(info) { |
51 var originCell = createElementWithClassName('td', 'origin-cell'); | 54 var originCell = createElementWithClassName('td', 'origin-cell'); |
52 originCell.textContent = info.origin.url; | 55 originCell.textContent = info.origin.url; |
53 | 56 |
54 var scoreInput = createElementWithClassName('input', 'score-input'); | 57 var scoreInput = createElementWithClassName('input', 'score-input'); |
55 scoreInput.addEventListener( | 58 scoreInput.addEventListener( |
56 'change', handleScoreChange.bind(undefined, info.origin)); | 59 'change', handleScoreChange.bind(undefined, info.origin)); |
57 scoreInput.addEventListener('focus', disableAutoupdate); | 60 scoreInput.addEventListener('focus', disableAutoupdate); |
58 scoreInput.addEventListener('blur', enableAutoupdate); | 61 scoreInput.addEventListener('blur', enableAutoupdate); |
59 scoreInput.value = info.score; | 62 scoreInput.value = info.score; |
60 | 63 |
61 var scoreCell = createElementWithClassName('td', 'score-cell'); | 64 var scoreCell = createElementWithClassName('td', 'score-cell'); |
62 scoreCell.appendChild(scoreInput); | 65 scoreCell.appendChild(scoreInput); |
63 | 66 |
64 var engagementBar = createElementWithClassName('div', 'engagement-bar'); | 67 var engagementBar = |
65 engagementBar.style.width = (info.score * 4) + 'px'; | 68 createElementWithClassName('div', 'engagement-bar'); |
| 69 engagementBar.style.width = (info.score * 4) + 'px'; |
66 | 70 |
67 var engagementBarCell = | 71 var engagementBarCell = |
68 createElementWithClassName('td', 'engagement-bar-cell'); | 72 createElementWithClassName('td', 'engagement-bar-cell'); |
69 engagementBarCell.appendChild(engagementBar); | 73 engagementBarCell.appendChild(engagementBar); |
70 | 74 |
71 var row = document.createElement('tr'); | 75 var row = document.createElement('tr'); |
72 row.appendChild(originCell); | 76 row.appendChild(originCell); |
73 row.appendChild(scoreCell); | 77 row.appendChild(scoreCell); |
74 row.appendChild(engagementBarCell); | 78 row.appendChild(engagementBarCell); |
75 | 79 |
76 // Stores correspondent engagementBarCell to change it's length on | 80 // Stores correspondent engagementBarCell to change it's length on |
77 // scoreChange event. | 81 // scoreChange event. |
78 scoreInput.barCellRef = engagementBar; | 82 scoreInput.barCellRef = engagementBar; |
79 return row; | 83 return row; |
80 } | 84 } |
81 | 85 |
82 function disableAutoupdate() { | 86 function disableAutoupdate() { |
83 if (updateInterval) | 87 if (updateInterval) |
84 clearInterval(updateInterval); | 88 clearInterval(updateInterval); |
85 updateInterval = null; | 89 updateInterval = null; |
86 } | 90 } |
87 | 91 |
88 function enableAutoupdate() { | 92 function enableAutoupdate() { |
89 if (updateInterval) | 93 if (updateInterval) |
90 clearInterval(updateInterval); | 94 clearInterval(updateInterval); |
91 updateInterval = setInterval(updateEngagementTable, 5000); | 95 updateInterval = setInterval(updateEngagementTable, 5000); |
92 } | 96 } |
93 | 97 |
94 /** | 98 /** |
95 * Sets the engagement score when a score input is changed. | 99 * Sets the engagement score when a score input is changed. |
96 * Resets the length of engagement-bar-cell to match the new score. | 100 * Resets the length of engagement-bar-cell to match the new score. |
97 * Also resets the update interval. | 101 * Also resets the update interval. |
98 * @param {string} origin The origin of the engagement score to set. | 102 * @param {string} origin The origin of the engagement score to set. |
99 * @param {Event} e | 103 * @param {Event} e |
100 */ | 104 */ |
101 function handleScoreChange(origin, e) { | 105 function handleScoreChange(origin, e) { |
102 var scoreInput = e.target; | 106 var scoreInput = e.target; |
103 uiHandler.setSiteEngagementScoreForOrigin(origin, scoreInput.value); | 107 uiHandler.setSiteEngagementScoreForOrigin(origin, scoreInput.value); |
104 scoreInput.barCellRef.style.width = (scoreInput.value * 4) + 'px'; | 108 scoreInput.barCellRef.style.width = (scoreInput.value * 4) + 'px'; |
105 scoreInput.blur(); | 109 scoreInput.blur(); |
106 enableAutoupdate(); | 110 enableAutoupdate(); |
107 } | 111 } |
108 | 112 |
109 /** | 113 /** |
110 * Remove all rows from the engagement table. | 114 * Remove all rows from the engagement table. |
111 */ | 115 */ |
112 function clearTable() { | 116 function clearTable() { |
113 engagementTableBody.innerHTML = ''; | 117 engagementTableBody.innerHTML = ''; |
114 } | 118 } |
115 | 119 |
116 /** | 120 /** |
117 * Sort the engagement info based on |sortKey| and |sortReverse|. | 121 * Sort the engagement info based on |sortKey| and |sortReverse|. |
118 */ | 122 */ |
119 function sortInfo() { | 123 function sortInfo() { |
120 info.sort(function(a, b) { | 124 info.sort(function(a, b) { |
121 return (sortReverse ? -1 : 1) * | 125 return (sortReverse ? -1 : 1) * compareTableItem(sortKey, a, b); |
122 compareTableItem(sortKey, a, b); | 126 }); |
123 }); | 127 } |
124 } | |
125 | 128 |
126 /** | 129 /** |
127 * Compares two SiteEngagementInfo objects based on |sortKey|. | 130 * Compares two SiteEngagementInfo objects based on |sortKey|. |
128 * @param {string} sortKey The name of the property to sort by. | 131 * @param {string} sortKey The name of the property to sort by. |
129 * @return {number} A negative number if |a| should be ordered before |b|, a | 132 * @return {number} A negative number if |a| should be ordered before |b|, a |
130 * positive number otherwise. | 133 * positive number otherwise. |
131 */ | 134 */ |
132 function compareTableItem(sortKey, a, b) { | 135 function compareTableItem(sortKey, a, b) { |
133 var val1 = a[sortKey]; | 136 var val1 = a[sortKey]; |
134 var val2 = b[sortKey]; | 137 var val2 = b[sortKey]; |
135 | 138 |
136 // Compare the hosts of the origin ignoring schemes. | 139 // Compare the hosts of the origin ignoring schemes. |
137 if (sortKey == 'origin') | 140 if (sortKey == 'origin') |
138 return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1; | 141 return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1; |
139 | 142 |
140 if (sortKey == 'score') | 143 if (sortKey == 'score') |
141 return val1 - val2; | 144 return val1 - val2; |
142 | 145 |
143 assertNotReached('Unsupported sort key: ' + sortKey); | 146 assertNotReached('Unsupported sort key: ' + sortKey); |
144 return 0; | 147 return 0; |
145 } | 148 } |
146 | 149 |
147 /** | 150 /** |
148 * Regenerates the engagement table from |info|. | 151 * Regenerates the engagement table from |info|. |
149 */ | 152 */ |
150 function renderTable() { | 153 function renderTable() { |
151 clearTable(); | 154 clearTable(); |
152 sortInfo(); | 155 sortInfo(); |
153 // Round each score to 2 decimal places. | 156 // Round each score to 2 decimal places. |
154 info.forEach(function(info) { | 157 info.forEach(function(info) { |
155 info.score = Number(Math.round(info.score * 100) / 100); | 158 info.score = Number(Math.round(info.score * 100) / 100); |
156 engagementTableBody.appendChild(createRow(info)); | 159 engagementTableBody.appendChild(createRow(info)); |
157 }); | 160 }); |
158 } | 161 } |
159 | 162 |
160 /** | 163 /** |
161 * Retrieve site engagement info and render the engagement table. | 164 * Retrieve site engagement info and render the engagement table. |
162 */ | 165 */ |
163 function updateEngagementTable() { | 166 function updateEngagementTable() { |
164 // Populate engagement table. | 167 // Populate engagement table. |
165 uiHandler.getSiteEngagementInfo().then(function(response) { | 168 uiHandler.getSiteEngagementInfo().then(function(response) { |
166 info = response.info; | 169 info = response.info; |
167 renderTable(info); | 170 renderTable(info); |
168 }); | 171 }); |
169 }; | 172 }; |
170 | 173 |
171 updateEngagementTable(); | 174 updateEngagementTable(); |
172 enableAutoupdate(); | 175 enableAutoupdate(); |
173 }; | 176 }; |
174 }); | 177 }); |
OLD | NEW |