Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(47)

Side by Side Diff: chrome/browser/resources/engagement/site_engagement.js

Issue 1758573002: Make chrome://site-engagement non-polymer and re-enable on Android. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: address comments Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/engagement/site_engagement.html ('k') | chrome/browser/ui/webui/chrome_web_ui_controller_factory.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698