| 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 |