NTP Zombie Code Slayer II: Suggestions Page

chrome/browser/resources/ntp4/suggestions_page.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.
-
-cr.define('ntp', function() {
-  'use strict';
-
-  var TilePage = ntp.TilePage;
-
-  /**
-   * A counter for generating unique tile IDs.
-   */
-  var tileID = 0;
-
-  /**
-   * Creates a new Suggestions page object for tiling.
-   * @constructor
-   * @extends {HTMLAnchorElement}
-   */
-  function Suggestion() {
-    var el = cr.doc.createElement('a');
-    el.__proto__ = Suggestion.prototype;
-    el.initialize();
-
-    return el;
-  }
-
-  Suggestion.prototype = {
-    __proto__: HTMLAnchorElement.prototype,
-
-    initialize: function() {
-      this.reset();
-
-      this.addEventListener('click', this.handleClick_);
-      this.addEventListener('keydown', this.handleKeyDown_);
-    },
-
-    get index() {
-      assert(this.tile);
-      return this.tile.index;
-    },
-
-    get data() {
-      return this.data_;
-    },
-
-    /**
-     * Clears the DOM hierarchy for this node, setting it back to the default
-     * for a blank thumbnail. TODO(georgey) make it a template.
-     */
-    reset: function() {
-      this.className = 'suggestions filler real';
-      this.innerHTML =
-          '<span class="thumbnail-wrapper fills-parent">' +
-            '<div class="close-button"></div>' +
-            '<span class="thumbnail fills-parent">' +
-              // thumbnail-shield provides a gradient fade effect.
-              '<div class="thumbnail-shield fills-parent"></div>' +
-            '</span>' +
-            '<span class="favicon"></span>' +
-          '</span>' +
-          '<div class="color-stripe"></div>' +
-          '<span class="title"></span>' +
-          '<span class="score"></span>';
-
-      this.querySelector('.close-button').title =
-          loadTimeData.getString('removethumbnailtooltip');
-
-      this.tabIndex = -1;
-      this.data_ = null;
-      this.removeAttribute('id');
-      this.title = '';
-    },
-
-    /**
-     * Update the appearance of this tile according to |data|.
-     * @param {{score: number, url: string, title: string, direction: string,
-     *     filler: boolean}} data A dictionary of relevant data for the page.
-     * @see chrome/browser/ui/webui/ntp/suggestions_source_top_sites.cc
-     * @see chrome/browser/ui/webui/ntp/most_visited_handler.cc
-     */
-    updateForData: function(data) {
-      if (this.classList.contains('blacklisted') && data) {
-        // Animate appearance of new tile.
-        this.classList.add('new-tile-contents');
-      }
-      this.classList.remove('blacklisted');
-
-      if (!data || data.filler) {
-        if (this.data_)
-          this.reset();
-        return;
-      }
-
-      var id = tileID++;
-      this.id = 'suggestions-tile-' + id;
-      this.data_ = data;
-      this.classList.add('focusable');
-
-      var faviconDiv = this.querySelector('.favicon');
-      var faviconUrl = 'chrome://favicon/size/16@1x/' + data.url;
-      faviconDiv.style.backgroundImage = url(faviconUrl);
-      chrome.send('getFaviconDominantColor', [faviconUrl, this.id]);
-
-      var title = this.querySelector('.title');
-      title.textContent = data.title;
-      title.dir = data.direction;
-
-      var score = this.querySelector('.score');
-      score.textContent = data.score;
-
-      // Sets the tooltip.
-      this.title = data.title;
-
-      var thumbnailUrl;
-      thumbnailUrl = data.urlImage ? data.urlImage :
-        'chrome://thumb/' + data.url;
-
-      this.querySelector('.thumbnail').style.backgroundImage =
-          url(thumbnailUrl);
-
-      this.href = data.url;
-
-      this.classList.remove('filler');
-    },
-
-    /**
-     * Sets the color of the favicon dominant color bar.
-     * @param {string} color The css-parsable value for the color.
-     */
-    set stripeColor(color) {
-      this.querySelector('.color-stripe').style.backgroundColor = color;
-    },
-
-    /**
-     * Handles a click on the tile.
-     * @param {Event} e The click event.
-     */
-    handleClick_: function(e) {
-      if (e.target.classList.contains('close-button')) {
-        this.blacklist_();
-        e.preventDefault();
-      } else {
-        // Records the index of this tile.
-        chrome.send('metricsHandler:recordInHistogram',
-                    ['NewTabPage.SuggestedSite', this.index, 8]);
-        chrome.send('suggestedSitesAction',
-                    [ntp.NtpFollowAction.CLICKED_TILE]);
-      }
-    },
-
-    /**
-     * Allow blacklisting suggestions site using the keyboard.
-     * @param {Event} e The keydown event.
-     */
-    handleKeyDown_: function(e) {
-      if (!cr.isMac && e.keyCode == 46 || // Del
-          cr.isMac && e.metaKey && e.keyCode == 8) { // Cmd + Backspace
-        this.blacklist_();
-      }
-    },
-
-    /**
-     * Permanently removes a page from Suggestions.
-     */
-    blacklist_: function() {
-      this.showUndoNotification_();
-      chrome.send('blacklistURLFromSuggestions', [this.data_.url]);
-      this.reset();
-      chrome.send('getSuggestions');
-      this.classList.add('blacklisted');
-    },
-
-    /**
-     * Shows notification that you can undo blacklisting.
-     */
-    showUndoNotification_: function() {
-      var data = this.data_;
-      var self = this;
-      var doUndo = function() {
-        chrome.send('removeURLsFromSuggestionsBlacklist', [data.url]);
-        self.updateForData(data);
-      };
-
-      var undo = {
-        action: doUndo,
-        text: loadTimeData.getString('undothumbnailremove'),
-      };
-
-      var undoAll = {
-        action: function() {
-          chrome.send('clearSuggestionsURLsBlacklist');
-        },
-        text: loadTimeData.getString('restoreThumbnailsShort'),
-      };
-
-      ntp.showNotification(
-          loadTimeData.getString('thumbnailremovednotification'),
-          [undo, undoAll]);
-    },
-
-    /**
-     * Set the size and position of the suggestions tile.
-     * @param {number} size The total size of |this|.
-     * @param {number} x The x-position.
-     * @param {number} y The y-position.
-     */
-    setBounds: function(size, x, y) {
-      this.style.width = size + 'px';
-      this.style.height = heightForWidth(size) + 'px';
-
-      this.style.left = x + 'px';
-      this.style.right = x + 'px';
-      this.style.top = y + 'px';
-    },
-
-    /**
-     * Returns whether this element can be 'removed' from chrome (i.e. whether
-     * the user can drag it onto the trash and expect something to happen).
-     * @return {boolean} True, since suggestions pages can always be
-     *     blacklisted.
-     */
-    canBeRemoved: function() {
-      return true;
-    },
-
-    /**
-     * Removes this element from chrome, i.e. blacklists it.
-     */
-    removeFromChrome: function() {
-      this.blacklist_();
-      this.parentNode.classList.add('finishing-drag');
-    },
-
-    /**
-     * Called when a drag of this tile has ended (after all animations have
-     * finished).
-     */
-    finalizeDrag: function() {
-      this.parentNode.classList.remove('finishing-drag');
-    },
-
-    /**
-     * Called when a drag is starting on the tile. Updates dataTransfer with
-     * data for this tile (for dragging outside of the NTP).
-     * @param {DataTransfer} dataTransfer The drag event data store.
-     */
-    setDragData: function(dataTransfer) {
-      dataTransfer.setData('Text', this.data_.title);
-      dataTransfer.setData('URL', this.data_.url);
-    },
-  };
-
-  var suggestionsPageGridValues = {
-    // The fewest tiles we will show in a row.
-    minColCount: 2,
-    // The suggestions we will show in a row.
-    maxColCount: 4,
-
-    // The smallest a tile can be.
-    minTileWidth: 122,
-    // The biggest a tile can be. 212 (max thumbnail width) + 2.
-    maxTileWidth: 214,
-
-    // The padding between tiles, as a fraction of the tile width.
-    tileSpacingFraction: 1 / 8,
-  };
-  TilePage.initGridValues(suggestionsPageGridValues);
-
-  /**
-   * Calculates the height for a Suggestion tile for a given width. The size
-   * is based on the thumbnail, which should have a 212:132 ratio.
-   * @return {number} The height.
-   */
-  function heightForWidth(width) {
-    // The 2s are for borders, the 36 is for the title and score.
-    return (width - 2) * 132 / 212 + 2 + 36;
-  }
-
-  var THUMBNAIL_COUNT = 8;
-
-  /**
-   * Creates a new SuggestionsPage object.
-   * @constructor
-   * @extends {TilePage}
-   */
-  function SuggestionsPage() {
-    var el = new TilePage(suggestionsPageGridValues);
-    el.__proto__ = SuggestionsPage.prototype;
-    el.initialize();
-
-    return el;
-  }
-
-  SuggestionsPage.prototype = {
-    __proto__: TilePage.prototype,
-
-    initialize: function() {
-      this.classList.add('suggestions-page');
-      this.data_ = null;
-      this.suggestionsTiles_ = this.getElementsByClassName('suggestions real');
-
-      this.addEventListener('carddeselected', this.handleCardDeselected_);
-      this.addEventListener('cardselected', this.handleCardSelected_);
-    },
-
-    /**
-     * Create blank (filler) tiles.
-     * @private
-     */
-    createTiles_: function() {
-      for (var i = 0; i < THUMBNAIL_COUNT; i++) {
-        this.appendTile(new Suggestion(), false);
-      }
-    },
-
-    /**
-     * Update the tiles after a change to |this.data_|.
-     */
-    updateTiles_: function() {
-      for (var i = 0; i < THUMBNAIL_COUNT; i++) {
-        var page = this.data_[i];
-        var tile = this.suggestionsTiles_[i];
-
-        if (i >= this.data_.length)
-          tile.reset();
-        else
-          tile.updateForData(page);
-      }
-    },
-
-    /**
-     * Handles the 'card deselected' event (i.e. the user clicked to another
-     * pane).
-     * @param {Event} e The CardChanged event.
-     */
-    handleCardDeselected_: function(e) {
-      if (!document.documentElement.classList.contains('starting-up')) {
-        chrome.send('suggestedSitesAction',
-                    [ntp.NtpFollowAction.CLICKED_OTHER_NTP_PANE]);
-      }
-    },
-
-    /**
-     * Handles the 'card selected' event (i.e. the user clicked to select the
-     * Suggested pane).
-     * @param {Event} e The CardChanged event.
-     */
-    handleCardSelected_: function(e) {
-      if (!document.documentElement.classList.contains('starting-up'))
-        chrome.send('suggestedSitesSelected');
-    },
-
-    /**
-     * Array of suggestions data objects.
-     * @type {Array}
-     */
-    get data() {
-      return this.data_;
-    },
-    set data(data) {
-      var startTime = Date.now();
-
-      // The first time data is set, create the tiles.
-      if (!this.data_) {
-        this.createTiles_();
-        this.data_ = data.slice(0, THUMBNAIL_COUNT);
-      } else {
-        this.data_ = refreshData(this.data_, data);
-      }
-
-      this.updateTiles_();
-      this.updateFocusableElement();
-      logEvent('suggestions.layout: ' + (Date.now() - startTime));
-    },
-
-    /** @override */
-    shouldAcceptDrag: function(e) {
-      return false;
-    },
-
-    /** @override */
-    heightForWidth: heightForWidth,
-  };
-
-  /**
-   * Executed once the NTP has loaded. Checks if the Suggested pane is
-   * shown or not. If it is shown, the 'suggestedSitesSelected' message is sent
-   * to the C++ code, to record the fact that the user has seen this pane.
-   */
-  SuggestionsPage.onLoaded = function() {
-    if (ntp.getCardSlider() &&
-        ntp.getCardSlider().currentCardValue &&
-        ntp.getCardSlider().currentCardValue.classList
-        .contains('suggestions-page')) {
-      chrome.send('suggestedSitesSelected');
-    }
-  };
-
-  /**
-   * We've gotten additional data for Suggestions page. Update our old data with
-   * the new data. The ordering of the new data is not important, except when a
-   * page is pinned. Thus we try to minimize re-ordering.
-   * @param {Array} oldData The current Suggestions page list.
-   * @param {Array} newData The new Suggestions page list.
-   * @return {Array} The merged page list that should replace the current page
-   * list.
-   */
-  function refreshData(oldData, newData) {
-    oldData = oldData.slice(0, THUMBNAIL_COUNT);
-    newData = newData.slice(0, THUMBNAIL_COUNT);
-
-    // Copy over pinned sites directly.
-    for (var i = 0; i < newData.length; i++) {
-      if (newData[i].pinned) {
-        oldData[i] = newData[i];
-        // Mark the entry as 'updated' so we don't try to update again.
-        oldData[i].updated = true;
-        // Mark the newData page as 'used' so we don't try to re-use it.
-        newData[i].used = true;
-      }
-    }
-
-    // Look through old pages; if they exist in the newData list, keep them
-    // where they are.
-    for (var i = 0; i < oldData.length; i++) {
-      if (!oldData[i] || oldData[i].updated)
-        continue;
-
-      for (var j = 0; j < newData.length; j++) {
-        if (newData[j].used)
-          continue;
-
-        if (newData[j].url == oldData[i].url) {
-          // The background image and other data may have changed.
-          oldData[i] = newData[j];
-          oldData[i].updated = true;
-          newData[j].used = true;
-          break;
-        }
-      }
-    }
-
-    // Look through old pages that haven't been updated yet; replace them.
-    for (var i = 0; i < oldData.length; i++) {
-      if (oldData[i] && oldData[i].updated)
-        continue;
-
-      for (var j = 0; j < newData.length; j++) {
-        if (newData[j].used)
-          continue;
-
-        oldData[i] = newData[j];
-        oldData[i].updated = true;
-        newData[j].used = true;
-        break;
-      }
-
-      if (oldData[i] && !oldData[i].updated)
-        oldData[i] = null;
-    }
-
-    // Clear 'updated' flags so this function will work next time it's called.
-    for (var i = 0; i < THUMBNAIL_COUNT; i++) {
-      if (oldData[i])
-        oldData[i].updated = false;
-    }
-
-    return oldData;
-  }
-
-  return {
-    SuggestionsPage: SuggestionsPage,
-    refreshData: refreshData,
-  };
-});
-
-document.addEventListener('ntpLoaded', ntp.SuggestionsPage.onLoaded);