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 // Allow a function to be provided by tests, which will be called when | 7 // Allow a function to be provided by tests, which will be called when |
8 // the page has been populated with site engagement details. | 8 // the page has been populated with site engagement details. |
9 var resolvePageIsPopulated = null; | 9 var resolvePageIsPopulated = null; |
10 var pageIsPopulatedPromise = new Promise((resolve, reject) => { | 10 var pageIsPopulatedPromise = new Promise((resolve, reject) => { |
11 resolvePageIsPopulated = resolve; | 11 resolvePageIsPopulated = resolve; |
12 }); | 12 }); |
13 | 13 |
14 function whenPageIsPopulatedForTest() { | 14 function whenPageIsPopulatedForTest() { |
15 return pageIsPopulatedPromise; | 15 return pageIsPopulatedPromise; |
16 } | 16 } |
17 | 17 |
18 define('main', [ | 18 define('main', [ |
19 'chrome/browser/engagement/site_engagement.mojom', | 19 'chrome/browser/engagement/site_engagement_details.mojom', |
20 'content/public/renderer/frame_interfaces', | 20 'content/public/renderer/frame_interfaces', |
21 ], (siteEngagementMojom, frameInterfaces) => { | 21 ], (siteEngagementMojom, frameInterfaces) => { |
22 return () => { | 22 return () => { |
23 var uiHandler = new siteEngagementMojom.SiteEngagementUIHandlerPtr( | 23 var uiHandler = new siteEngagementMojom.SiteEngagementDetailsProviderPtr( |
24 frameInterfaces.getInterface( | 24 frameInterfaces.getInterface( |
25 siteEngagementMojom.SiteEngagementUIHandler.name)); | 25 siteEngagementMojom.SiteEngagementDetailsProvider.name)); |
26 | 26 |
27 var engagementTableBody = $('engagement-table-body'); | 27 var engagementTableBody = $('engagement-table-body'); |
28 var updateInterval = null; | 28 var updateInterval = null; |
29 var info = null; | 29 var info = null; |
30 var sortKey = 'score'; | 30 var sortKey = 'total_score'; |
31 var sortReverse = true; | 31 var sortReverse = true; |
32 | 32 |
33 // Set table header sort handlers. | 33 // Set table header sort handlers. |
34 var engagementTableHeader = $('engagement-table-header'); | 34 var engagementTableHeader = $('engagement-table-header'); |
35 var headers = engagementTableHeader.children; | 35 var headers = engagementTableHeader.children; |
36 for (var i = 0; i < headers.length; i++) { | 36 for (var i = 0; i < headers.length; i++) { |
37 headers[i].addEventListener('click', (e) => { | 37 headers[i].addEventListener('click', (e) => { |
38 var newSortKey = e.target.getAttribute('sort-key'); | 38 var newSortKey = e.target.getAttribute('sort-key'); |
39 if (sortKey == newSortKey) { | 39 if (sortKey == newSortKey) { |
40 sortReverse = !sortReverse; | 40 sortReverse = !sortReverse; |
41 } else { | 41 } else { |
42 sortKey = newSortKey; | 42 sortKey = newSortKey; |
43 sortReverse = false; | 43 sortReverse = false; |
44 } | 44 } |
45 var oldSortColumn = document.querySelector('.sort-column'); | 45 var oldSortColumn = document.querySelector('.sort-column'); |
46 oldSortColumn.classList.remove('sort-column'); | 46 oldSortColumn.classList.remove('sort-column'); |
47 e.target.classList.add('sort-column'); | 47 e.target.classList.add('sort-column'); |
48 if (sortReverse) | 48 if (sortReverse) |
49 e.target.setAttribute('sort-reverse', ''); | 49 e.target.setAttribute('sort-reverse', ''); |
50 else | 50 else |
51 e.target.removeAttribute('sort-reverse'); | 51 e.target.removeAttribute('sort-reverse'); |
52 renderTable(); | 52 renderTable(); |
53 }); | 53 }); |
54 } | 54 } |
55 | 55 |
56 /** | 56 /** |
57 * Creates a single row in the engagement table. | 57 * Creates a single row in the engagement table. |
58 * @param {SiteEngagementInfo} info The info to create the row from. | 58 * @param {SiteEngagementDetails} info The info to create the row from. |
59 * @return {HTMLElement} | 59 * @return {HTMLElement} |
60 */ | 60 */ |
61 function createRow(info) { | 61 function createRow(info) { |
62 var originCell = createElementWithClassName('td', 'origin-cell'); | 62 var originCell = createElementWithClassName('td', 'origin-cell'); |
63 originCell.textContent = info.origin.url; | 63 originCell.textContent = info.origin.url; |
64 | 64 |
65 var scoreInput = createElementWithClassName('input', 'score-input'); | 65 var scoreInput = createElementWithClassName('input', 'score-input'); |
66 scoreInput.addEventListener( | 66 scoreInput.addEventListener( |
67 'change', handleScoreChange.bind(undefined, info.origin)); | 67 'change', handleScoreChange.bind(undefined, info.origin)); |
68 scoreInput.addEventListener('focus', disableAutoupdate); | 68 scoreInput.addEventListener('focus', disableAutoupdate); |
69 scoreInput.addEventListener('blur', enableAutoupdate); | 69 scoreInput.addEventListener('blur', enableAutoupdate); |
70 scoreInput.value = info.score; | 70 scoreInput.value = info.total_score; |
71 | 71 |
72 var scoreCell = createElementWithClassName('td', 'score-cell'); | 72 var scoreCell = createElementWithClassName('td', 'score-cell'); |
73 scoreCell.appendChild(scoreInput); | 73 scoreCell.appendChild(scoreInput); |
74 | 74 |
75 var engagementBar = createElementWithClassName('div', 'engagement-bar'); | 75 var engagementBar = createElementWithClassName('div', 'engagement-bar'); |
76 engagementBar.style.width = (info.score * 4) + 'px'; | 76 engagementBar.style.width = (info.total_score * 4) + 'px'; |
77 | 77 |
78 var engagementBarCell = | 78 var engagementBarCell = |
79 createElementWithClassName('td', 'engagement-bar-cell'); | 79 createElementWithClassName('td', 'engagement-bar-cell'); |
80 engagementBarCell.appendChild(engagementBar); | 80 engagementBarCell.appendChild(engagementBar); |
81 | 81 |
82 var row = document.createElement('tr'); | 82 var row = document.createElement('tr'); |
83 row.appendChild(originCell); | 83 row.appendChild(originCell); |
84 row.appendChild(scoreCell); | 84 row.appendChild(scoreCell); |
85 row.appendChild(engagementBarCell); | 85 row.appendChild(engagementBarCell); |
86 | 86 |
(...skipping 17 matching lines...) Expand all Loading... |
104 | 104 |
105 /** | 105 /** |
106 * Sets the engagement score when a score input is changed. | 106 * Sets the engagement score when a score input is changed. |
107 * Resets the length of engagement-bar-cell to match the new score. | 107 * Resets the length of engagement-bar-cell to match the new score. |
108 * Also resets the update interval. | 108 * Also resets the update interval. |
109 * @param {string} origin The origin of the engagement score to set. | 109 * @param {string} origin The origin of the engagement score to set. |
110 * @param {Event} e | 110 * @param {Event} e |
111 */ | 111 */ |
112 function handleScoreChange(origin, e) { | 112 function handleScoreChange(origin, e) { |
113 var scoreInput = e.target; | 113 var scoreInput = e.target; |
114 uiHandler.setSiteEngagementScoreForOrigin(origin, scoreInput.value); | 114 uiHandler.setSiteEngagementScoreForUrl(origin, scoreInput.value); |
115 scoreInput.barCellRef.style.width = (scoreInput.value * 4) + 'px'; | 115 scoreInput.barCellRef.style.width = (scoreInput.value * 4) + 'px'; |
116 scoreInput.blur(); | 116 scoreInput.blur(); |
117 enableAutoupdate(); | 117 enableAutoupdate(); |
118 } | 118 } |
119 | 119 |
120 /** | 120 /** |
121 * Remove all rows from the engagement table. | 121 * Remove all rows from the engagement table. |
122 */ | 122 */ |
123 function clearTable() { | 123 function clearTable() { |
124 engagementTableBody.innerHTML = ''; | 124 engagementTableBody.innerHTML = ''; |
125 } | 125 } |
126 | 126 |
127 /** | 127 /** |
128 * Sort the engagement info based on |sortKey| and |sortReverse|. | 128 * Sort the engagement info based on |sortKey| and |sortReverse|. |
129 */ | 129 */ |
130 function sortInfo() { | 130 function sortInfo() { |
131 info.sort((a, b) => { | 131 info.sort((a, b) => { |
132 return (sortReverse ? -1 : 1) * | 132 return (sortReverse ? -1 : 1) * |
133 compareTableItem(sortKey, a, b); | 133 compareTableItem(sortKey, a, b); |
134 }); | 134 }); |
135 } | 135 } |
136 | 136 |
137 /** | 137 /** |
138 * Compares two SiteEngagementInfo objects based on |sortKey|. | 138 * Compares two SiteEngagementDetails objects based on |sortKey|. |
139 * @param {string} sortKey The name of the property to sort by. | 139 * @param {string} sortKey The name of the property to sort by. |
140 * @return {number} A negative number if |a| should be ordered before |b|, a | 140 * @return {number} A negative number if |a| should be ordered before |b|, a |
141 * positive number otherwise. | 141 * positive number otherwise. |
142 */ | 142 */ |
143 function compareTableItem(sortKey, a, b) { | 143 function compareTableItem(sortKey, a, b) { |
144 var val1 = a[sortKey]; | 144 var val1 = a[sortKey]; |
145 var val2 = b[sortKey]; | 145 var val2 = b[sortKey]; |
146 | 146 |
147 // Compare the hosts of the origin ignoring schemes. | 147 // Compare the hosts of the origin ignoring schemes. |
148 if (sortKey == 'origin') | 148 if (sortKey == 'origin') |
149 return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1; | 149 return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1; |
150 | 150 |
151 if (sortKey == 'score') | 151 if (sortKey == 'total_score') |
152 return val1 - val2; | 152 return val1 - val2; |
153 | 153 |
154 assertNotReached('Unsupported sort key: ' + sortKey); | 154 assertNotReached('Unsupported sort key: ' + sortKey); |
155 return 0; | 155 return 0; |
156 } | 156 } |
157 | 157 |
158 /** | 158 /** |
159 * Regenerates the engagement table from |info|. | 159 * Regenerates the engagement table from |info|. |
160 */ | 160 */ |
161 function renderTable() { | 161 function renderTable() { |
162 clearTable(); | 162 clearTable(); |
163 sortInfo(); | 163 sortInfo(); |
164 // Round each score to 2 decimal places. | 164 // Round each score to 2 decimal places. |
165 info.forEach((info) => { | 165 info.forEach((info) => { |
166 info.score = Number(Math.round(info.score * 100) / 100); | 166 info.total_score = Number(Math.round(info.total_score * 100) / 100); |
167 engagementTableBody.appendChild(createRow(info)); | 167 engagementTableBody.appendChild(createRow(info)); |
168 }); | 168 }); |
169 | 169 |
170 resolvePageIsPopulated(); | 170 resolvePageIsPopulated(); |
171 } | 171 } |
172 | 172 |
173 /** | 173 /** |
174 * Retrieve site engagement info and render the engagement table. | 174 * Retrieve site engagement info and render the engagement table. |
175 */ | 175 */ |
176 function updateEngagementTable() { | 176 function updateEngagementTable() { |
177 // Populate engagement table. | 177 // Populate engagement table. |
178 uiHandler.getSiteEngagementInfo().then((response) => { | 178 uiHandler.getSiteEngagementDetails().then((response) => { |
179 info = response.info; | 179 info = response.info; |
180 renderTable(info); | 180 renderTable(info); |
181 }); | 181 }); |
182 }; | 182 }; |
183 | 183 |
184 updateEngagementTable(); | 184 updateEngagementTable(); |
185 enableAutoupdate(); | 185 enableAutoupdate(); |
186 }; | 186 }; |
187 }); | 187 }); |
OLD | NEW |