| Index: chrome/browser/resources/engagement/site_engagement.js
|
| diff --git a/chrome/browser/resources/engagement/site_engagement.js b/chrome/browser/resources/engagement/site_engagement.js
|
| index 3557fd03845df0763a44ed268928e54671403103..bafc366119c83fe7faee07f1c1237b34e118734c 100644
|
| --- a/chrome/browser/resources/engagement/site_engagement.js
|
| +++ b/chrome/browser/resources/engagement/site_engagement.js
|
| @@ -4,171 +4,174 @@
|
|
|
| 'use strict';
|
|
|
| -define('main', [
|
| - 'chrome/browser/ui/webui/engagement/site_engagement.mojom',
|
| - 'content/public/renderer/frame_interfaces',
|
| -], function(siteEngagementMojom, frameInterfaces) {
|
| - return function() {
|
| - var uiHandler = new siteEngagementMojom.SiteEngagementUIHandlerPtr(
|
| - frameInterfaces.getInterface(
|
| - siteEngagementMojom.SiteEngagementUIHandler.name));
|
| -
|
| - var engagementTableBody = $('engagement-table-body');
|
| - var updateInterval = null;
|
| - var info = null;
|
| - var sortKey = 'score';
|
| - var sortReverse = true;
|
| -
|
| - // Set table header sort handlers.
|
| - var engagementTableHeader = $('engagement-table-header');
|
| - var headers = engagementTableHeader.children;
|
| - for (var i = 0; i < headers.length; i++) {
|
| - headers[i].addEventListener('click', function(e) {
|
| - var newSortKey = e.target.getAttribute('sort-key');
|
| - if (sortKey == newSortKey) {
|
| - sortReverse = !sortReverse;
|
| - } else {
|
| - sortKey = newSortKey;
|
| - sortReverse = false;
|
| +define(
|
| + 'main',
|
| + [
|
| + 'chrome/browser/ui/webui/engagement/site_engagement.mojom',
|
| + 'content/public/renderer/frame_interfaces',
|
| + ],
|
| + function(siteEngagementMojom, frameInterfaces) {
|
| + return function() {
|
| + var uiHandler = new siteEngagementMojom.SiteEngagementUIHandlerPtr(
|
| + frameInterfaces.getInterface(
|
| + siteEngagementMojom.SiteEngagementUIHandler.name));
|
| +
|
| + var engagementTableBody = $('engagement-table-body');
|
| + var updateInterval = null;
|
| + var info = null;
|
| + var sortKey = 'score';
|
| + var sortReverse = true;
|
| +
|
| + // Set table header sort handlers.
|
| + var engagementTableHeader = $('engagement-table-header');
|
| + var headers = engagementTableHeader.children;
|
| + for (var i = 0; i < headers.length; i++) {
|
| + headers[i].addEventListener('click', function(e) {
|
| + var newSortKey = e.target.getAttribute('sort-key');
|
| + if (sortKey == newSortKey) {
|
| + sortReverse = !sortReverse;
|
| + } else {
|
| + sortKey = newSortKey;
|
| + sortReverse = false;
|
| + }
|
| + var oldSortColumn = document.querySelector('.sort-column');
|
| + oldSortColumn.classList.remove('sort-column');
|
| + e.target.classList.add('sort-column');
|
| + if (sortReverse)
|
| + e.target.setAttribute('sort-reverse', '');
|
| + else
|
| + e.target.removeAttribute('sort-reverse');
|
| + renderTable();
|
| + });
|
| }
|
| - var oldSortColumn = document.querySelector('.sort-column');
|
| - oldSortColumn.classList.remove('sort-column');
|
| - e.target.classList.add('sort-column');
|
| - if (sortReverse)
|
| - e.target.setAttribute('sort-reverse', '');
|
| - else
|
| - e.target.removeAttribute('sort-reverse');
|
| - renderTable();
|
| - });
|
| - }
|
| -
|
| - /**
|
| +
|
| + /**
|
| * Creates a single row in the engagement table.
|
| * @param {SiteEngagementInfo} info The info to create the row from.
|
| * @return {HTMLElement}
|
| */
|
| - function createRow(info) {
|
| - var originCell = createElementWithClassName('td', 'origin-cell');
|
| - originCell.textContent = info.origin.url;
|
| -
|
| - var scoreInput = createElementWithClassName('input', 'score-input');
|
| - scoreInput.addEventListener(
|
| - 'change', handleScoreChange.bind(undefined, info.origin));
|
| - scoreInput.addEventListener('focus', disableAutoupdate);
|
| - scoreInput.addEventListener('blur', enableAutoupdate);
|
| - scoreInput.value = info.score;
|
| -
|
| - var scoreCell = createElementWithClassName('td', 'score-cell');
|
| - scoreCell.appendChild(scoreInput);
|
| -
|
| - var engagementBar = createElementWithClassName('div', 'engagement-bar');
|
| - engagementBar.style.width = (info.score * 4) + 'px';
|
| -
|
| - var engagementBarCell =
|
| - createElementWithClassName('td', 'engagement-bar-cell');
|
| - engagementBarCell.appendChild(engagementBar);
|
| -
|
| - var row = document.createElement('tr');
|
| - row.appendChild(originCell);
|
| - row.appendChild(scoreCell);
|
| - row.appendChild(engagementBarCell);
|
| -
|
| - // Stores correspondent engagementBarCell to change it's length on
|
| - // scoreChange event.
|
| - scoreInput.barCellRef = engagementBar;
|
| - return row;
|
| - }
|
| -
|
| - function disableAutoupdate() {
|
| - if (updateInterval)
|
| - clearInterval(updateInterval);
|
| - updateInterval = null;
|
| - }
|
| -
|
| - function enableAutoupdate() {
|
| - if (updateInterval)
|
| - clearInterval(updateInterval);
|
| - updateInterval = setInterval(updateEngagementTable, 5000);
|
| - }
|
| -
|
| - /**
|
| - * Sets the engagement score when a score input is changed.
|
| - * Resets the length of engagement-bar-cell to match the new score.
|
| - * Also resets the update interval.
|
| - * @param {string} origin The origin of the engagement score to set.
|
| - * @param {Event} e
|
| - */
|
| - function handleScoreChange(origin, e) {
|
| - var scoreInput = e.target;
|
| - uiHandler.setSiteEngagementScoreForOrigin(origin, scoreInput.value);
|
| - scoreInput.barCellRef.style.width = (scoreInput.value * 4) + 'px';
|
| - scoreInput.blur();
|
| - enableAutoupdate();
|
| - }
|
| -
|
| - /**
|
| - * Remove all rows from the engagement table.
|
| - */
|
| - function clearTable() {
|
| - engagementTableBody.innerHTML = '';
|
| - }
|
| + function createRow(info) {
|
| + var originCell = createElementWithClassName('td', 'origin-cell');
|
| + originCell.textContent = info.origin.url;
|
| +
|
| + var scoreInput = createElementWithClassName('input', 'score-input');
|
| + scoreInput.addEventListener(
|
| + 'change', handleScoreChange.bind(undefined, info.origin));
|
| + scoreInput.addEventListener('focus', disableAutoupdate);
|
| + scoreInput.addEventListener('blur', enableAutoupdate);
|
| + scoreInput.value = info.score;
|
| +
|
| + var scoreCell = createElementWithClassName('td', 'score-cell');
|
| + scoreCell.appendChild(scoreInput);
|
| +
|
| + var engagementBar =
|
| + createElementWithClassName('div', 'engagement-bar');
|
| + engagementBar.style.width = (info.score * 4) + 'px';
|
| +
|
| + var engagementBarCell =
|
| + createElementWithClassName('td', 'engagement-bar-cell');
|
| + engagementBarCell.appendChild(engagementBar);
|
| +
|
| + var row = document.createElement('tr');
|
| + row.appendChild(originCell);
|
| + row.appendChild(scoreCell);
|
| + row.appendChild(engagementBarCell);
|
| +
|
| + // Stores correspondent engagementBarCell to change it's length on
|
| + // scoreChange event.
|
| + scoreInput.barCellRef = engagementBar;
|
| + return row;
|
| + }
|
|
|
| - /**
|
| - * Sort the engagement info based on |sortKey| and |sortReverse|.
|
| - */
|
| - function sortInfo() {
|
| - info.sort(function(a, b) {
|
| - return (sortReverse ? -1 : 1) *
|
| - compareTableItem(sortKey, a, b);
|
| - });
|
| - }
|
| -
|
| - /**
|
| + function disableAutoupdate() {
|
| + if (updateInterval)
|
| + clearInterval(updateInterval);
|
| + updateInterval = null;
|
| + }
|
| +
|
| + function enableAutoupdate() {
|
| + if (updateInterval)
|
| + clearInterval(updateInterval);
|
| + updateInterval = setInterval(updateEngagementTable, 5000);
|
| + }
|
| +
|
| + /**
|
| + * Sets the engagement score when a score input is changed.
|
| + * Resets the length of engagement-bar-cell to match the new score.
|
| + * Also resets the update interval.
|
| + * @param {string} origin The origin of the engagement score to set.
|
| + * @param {Event} e
|
| + */
|
| + function handleScoreChange(origin, e) {
|
| + var scoreInput = e.target;
|
| + uiHandler.setSiteEngagementScoreForOrigin(origin, scoreInput.value);
|
| + scoreInput.barCellRef.style.width = (scoreInput.value * 4) + 'px';
|
| + scoreInput.blur();
|
| + enableAutoupdate();
|
| + }
|
| +
|
| + /**
|
| + * Remove all rows from the engagement table.
|
| + */
|
| + function clearTable() {
|
| + engagementTableBody.innerHTML = '';
|
| + }
|
| +
|
| + /**
|
| + * Sort the engagement info based on |sortKey| and |sortReverse|.
|
| + */
|
| + function sortInfo() {
|
| + info.sort(function(a, b) {
|
| + return (sortReverse ? -1 : 1) * compareTableItem(sortKey, a, b);
|
| + });
|
| + }
|
| +
|
| + /**
|
| * Compares two SiteEngagementInfo objects based on |sortKey|.
|
| * @param {string} sortKey The name of the property to sort by.
|
| * @return {number} A negative number if |a| should be ordered before |b|, a
|
| * positive number otherwise.
|
| */
|
| - function compareTableItem(sortKey, a, b) {
|
| - var val1 = a[sortKey];
|
| - var val2 = b[sortKey];
|
| + function compareTableItem(sortKey, a, b) {
|
| + var val1 = a[sortKey];
|
| + var val2 = b[sortKey];
|
|
|
| - // Compare the hosts of the origin ignoring schemes.
|
| - if (sortKey == 'origin')
|
| - return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1;
|
| + // Compare the hosts of the origin ignoring schemes.
|
| + if (sortKey == 'origin')
|
| + return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1;
|
|
|
| - if (sortKey == 'score')
|
| - return val1 - val2;
|
| + if (sortKey == 'score')
|
| + return val1 - val2;
|
|
|
| - assertNotReached('Unsupported sort key: ' + sortKey);
|
| - return 0;
|
| - }
|
| + assertNotReached('Unsupported sort key: ' + sortKey);
|
| + return 0;
|
| + }
|
|
|
| - /**
|
| - * Regenerates the engagement table from |info|.
|
| - */
|
| - function renderTable() {
|
| - clearTable();
|
| - sortInfo();
|
| - // Round each score to 2 decimal places.
|
| - info.forEach(function(info) {
|
| - info.score = Number(Math.round(info.score * 100) / 100);
|
| - engagementTableBody.appendChild(createRow(info));
|
| - });
|
| - }
|
| -
|
| - /**
|
| - * Retrieve site engagement info and render the engagement table.
|
| - */
|
| - function updateEngagementTable() {
|
| - // Populate engagement table.
|
| - uiHandler.getSiteEngagementInfo().then(function(response) {
|
| - info = response.info;
|
| - renderTable(info);
|
| - });
|
| - };
|
| -
|
| - updateEngagementTable();
|
| - enableAutoupdate();
|
| - };
|
| -});
|
| + /**
|
| + * Regenerates the engagement table from |info|.
|
| + */
|
| + function renderTable() {
|
| + clearTable();
|
| + sortInfo();
|
| + // Round each score to 2 decimal places.
|
| + info.forEach(function(info) {
|
| + info.score = Number(Math.round(info.score * 100) / 100);
|
| + engagementTableBody.appendChild(createRow(info));
|
| + });
|
| + }
|
| +
|
| + /**
|
| + * Retrieve site engagement info and render the engagement table.
|
| + */
|
| + function updateEngagementTable() {
|
| + // Populate engagement table.
|
| + uiHandler.getSiteEngagementInfo().then(function(response) {
|
| + info = response.info;
|
| + renderTable(info);
|
| + });
|
| + };
|
| +
|
| + updateEngagementTable();
|
| + enableAutoupdate();
|
| + };
|
| + });
|
|
|