NTP Zombie Code Slayer II: Suggestions Page

chrome/browser/resources/suggestions_internals/suggestions_internals.js

-// Copyright (c) 2012 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-/**
- * Javascript for suggestions_internals.html, served from
- * chrome://suggestions-internals/. This is used to debug suggestions ranking.
- * When loaded, the page will show the current set of suggestions, along with a
- * large set of information (e.g. all the signals that were taken into
- * consideration for deciding which pages were selected to be shown to the user)
- * that will aid in debugging and optimizing the algorithms.
- */
-cr.define('suggestionsInternals', function() {
-  'use strict';
-
-  /**
-   * Register our event handlers.
-   */
-  function initialize() {
-    $('suggestions-form').addEventListener('submit', onRefreshClicked);
-    $('show-discarded').addEventListener('change', refresh);
-    refresh();
-  }
-
-  /**
-   * Called when the 'Refresh' button is clicked. Reloads the suggestions data.
-   */
-  function onRefreshClicked(event) {
-    refresh();
-    event.preventDefault();
-  }
-
-  /**
-   * Reloads the suggestions data by sending a 'getSuggestions' message to
-   * Chrome. The C++ code is then expected to call 'setSuggestions' when there
-   * are suggestions ready.
-   */
-  function refresh() {
-    chrome.send('getSuggestions');
-  }
-
-  /**
-   * A list of columns that we do not want to display.
-   * @type {Array<string>}
-   * @const
-   */
-  var IGNORED_COLUMNS = [
-    'direction'
-  ];
-
-  /**
-   * A list specifying the name of the first columns to be displayed. If
-   * present, they will be displayed in this order, followed by the remaining
-   * columns.
-   * @type {Array<string>}
-   * @const
-   */
-  var PREFERRED_COLUMN_ORDER = [
-    'title',
-    'url',
-    'score'
-  ];
-
-  function setBooleanColumn(column, value) {
-    if (value) {
-      column.innerText = 'Y';
-      column.classList.add('boolean-property-true');
-    } else {
-      column.innerText = 'N';
-      column.classList.add('boolean-property-false');
-    }
-  }
-
-  /**
-   * Called by Chrome code, with a ranked list of suggestions. The columns
-   * to be displayed are calculated automatically from the properties of the
-   * elements in the list, such that all properties have a column.
-   */
-  function setSuggestions(list) {
-    // Build a list of all the columns that will be displayed.
-    var columns = [];
-    list.forEach(function(entry) {
-      for (var column in entry) {
-        if (typeof entry[column] == 'object') {
-          // Expand one level deep
-          for (var subColumn in entry[column]) {
-            var path = column + '.' + subColumn;
-            if (columns.indexOf(path) < 0)
-              columns.push(path);
-          }
-        } else if (columns.indexOf(column) < 0) {
-          columns.push(column);
-        }
-      }
-    });
-
-    // Remove columns that we don't want to display.
-    columns = columns.filter(function(column) {
-      return IGNORED_COLUMNS.indexOf(column) < 0;
-    });
-
-    // Move the preferred columns to the start of the column list.
-    for (var i = PREFERRED_COLUMN_ORDER.length - 1; i >= 0; i--) {
-      var index = columns.indexOf(PREFERRED_COLUMN_ORDER[i]);
-      if (index >= 0)
-        columns.unshift(columns.splice(index, 1)[0]);
-    }
-
-    // Special columns.
-    columns.unshift('favicon');
-    columns.unshift('screenshot');
-    columns.unshift('rank');
-
-    // Erase whatever is currently being displayed.
-    var output = $('suggestions-debug-text');
-    output.innerHTML = '';
-
-    // Create the container table and add the header row.
-    var table = document.createElement('table');
-    table.className = 'suggestions-debug-table';
-    var header = document.createElement('tr');
-    columns.forEach(function(entry) {
-      var column = document.createElement('th');
-      column.innerText = entry;
-      header.appendChild(column);
-    });
-    table.appendChild(header);
-
-    // Add all the suggestions to the table.
-    var rank = 1;
-    list.forEach(function(entry) {
-      var row = document.createElement('tr');
-      columns.forEach(function(columnName) {
-        var column = document.createElement('td');
-        // Expand the path and find the data if it's there.
-        var path = columnName.split('.');
-        var data = entry;
-        for (var i = 0; i < path.length; ++i) {
-          if (data && data.hasOwnProperty(path[i]))
-            data = data[path[i]];
-          else
-            data = undefined;
-        }
-        // Only add the column if the current suggestion has this property
-        // (otherwise, leave the cell empty).
-        if (typeof(data) != 'undefined') {
-          if (typeof(data) == 'boolean') {
-            setBooleanColumn(column, data);
-          } else if (/^https?:\/\/.+$/.test(data)) {
-            // If the text is a URL, make it an anchor element.
-            var anchor = document.createElement('a');
-            anchor.href = data;
-            anchor.innerText = data;
-            column.appendChild(anchor);
-          } else {
-            column.innerText = data;
-          }
-        } else if (columnName == 'rank') {
-          column.innerText = rank++;
-        } else if (columnName == 'screenshot') {
-          var thumbnailUrl = 'chrome://thumb/' + entry.url;
-          var img = document.createElement('img');
-          img.onload = function() { setBooleanColumn(column, true); };
-          img.onerror = function() { setBooleanColumn(column, false); };
-          img.src = thumbnailUrl;
-        } else if (columnName == 'favicon') {
-          var faviconUrl = 'chrome://favicon/size/16@1x/' + entry.url;
-          column.style.backgroundImage = url(faviconUrl);
-          column.style.backgroundRepeat = 'no-repeat';
-          column.style.backgroundPosition = 'center center';
-        }
-        row.appendChild(column);
-      });
-      table.appendChild(row);
-    });
-
-    output.appendChild(table);
-  }
-
-  return {
-    initialize: initialize,
-    setSuggestions: setSuggestions
-  };
-});
-
-document.addEventListener('DOMContentLoaded', suggestionsInternals.initialize);