summaryrefslogtreecommitdiffstats
path: root/chrome/browser/resources/suggestions_internals/suggestions_internals.js
blob: 35988303db0ea5b6c9ac4df73b8fcbfd7c8409f7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
// 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);