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

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

Issue 2788413003: Add SiteEngagementService::GetAllDetails(), to return detailed scores. (Closed)
Patch Set: Fix notifications permission logic & test Created 3 years, 8 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 // 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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698