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