Chromium Code Reviews| 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 it changed. Also resets the | |
|
tsergeant
2016/03/10 06:13:21
Nit: 'is changed'
calamity
2016/03/10 07:24:40
Done.
| |
| 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 |