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

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

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

Powered by Google App Engine
This is Rietveld 408576698