chrome/browser/resources/local_ntp/most_visited_util.js

   1 // Copyright 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5
   6 /**
   7  * @fileoverview Utilities for rendering most visited thumbnails and titles.
   8  */
   9
  10 <include src="instant_iframe_validation.js">
  11
  12 /**
  13  * Enum for the different types of events that are logged from the NTP.
  14  * @enum {number}
  15  * @const
  16  */
  17 var NTP_LOGGING_EVENT_TYPE = {
  18   // The user moused over an NTP tile or title.
  19   NTP_MOUSEOVER: 0,
  20   // The page attempted to load a thumbnail image.
  21   NTP_THUMBNAIL_ATTEMPT: 1,
  22   // There was an error in loading both the thumbnail image and the fallback
  23   // (if it was provided), resulting in a grey tile.
  24   NTP_THUMBNAIL_ERROR: 2,
  25   // The page attempted to load a thumbnail URL while a fallback thumbnail was
  26   // provided.
  27   NTP_FALLBACK_THUMBNAIL_REQUESTED: 3,
  28   // The primary thumbnail image failed to load and caused us to use the
  29   // secondary thumbnail as a fallback.
  30   NTP_FALLBACK_THUMBNAIL_USED: 4,
  31   // The suggestion is coming from the server.
  32   NTP_SERVER_SIDE_SUGGESTION: 5,
  33   // The suggestion is coming from the client.
  34   NTP_CLIENT_SIDE_SUGGESTION: 6,
  35   // The visuals of that tile are handled externally by the page itself.
  36   NTP_EXTERNAL_TILE: 7
  37 };
  38
  39 /**
  40  * Parses query parameters from Location.
  41  * @param {string} location The URL to generate the CSS url for.
  42  * @return {Object} Dictionary containing name value pairs for URL.
  43  */
  44 function parseQueryParams(location) {
  45   var params = Object.create(null);
  46   var query = location.search.substring(1);
  47   var vars = query.split('&');
  48   for (var i = 0; i < vars.length; i++) {
  49     var pair = vars[i].split('=');
  50     var k = decodeURIComponent(pair[0]);
  51     if (k in params) {
  52       // Duplicate parameters are not allowed to prevent attackers who can
  53       // append things to |location| from getting their parameter values to
  54       // override legitimate ones.
  55       return Object.create(null);
  56     } else {
  57       params[k] = decodeURIComponent(pair[1]);
  58     }
  59   }
  60   return params;
  61 }
  62
  63
  64 /**
  65  * Creates a new most visited link element.
  66  * @param {Object} params URL parameters containing styles for the link.
  67  * @param {string} href The destination for the link.
  68  * @param {string} title The title for the link.
  69  * @param {string|undefined} text The text for the link or none.
  70  * @param {string|undefined} ping If specified, a location relative to the
  71  *     referrer of this iframe, to ping when the link is clicked. Only works if
  72  *     the referrer is HTTPS.
  73  * @return {HTMLAnchorElement} A new link element.
  74  */
  75 function createMostVisitedLink(params, href, title, text, ping) {
  76   var styles = getMostVisitedStyles(params, !!text);
  77   var link = document.createElement('a');
  78   link.style.color = styles.color;
  79   link.style.fontSize = styles.fontSize + 'px';
  80   if (styles.fontFamily)
  81     link.style.fontFamily = styles.fontFamily;
  82   link.href = href;
  83   if ('pos' in params && isFinite(params.pos)) {
  84     link.ping = '/log.html?pos=' + params.pos;
  85     // If a ping parameter was specified, add it to the list of pings, relative
  86     // to the referrer of this iframe, which is the default search provider.
  87     if (ping) {
  88       var parentUrl = document.createElement('a');
  89       parentUrl.href = document.referrer;
  90       if (parentUrl.protocol == 'https:') {
  91         link.ping += ' ' + parentUrl.origin + '/' + ping;
  92       }
  93     }
  94   }
  95   link.title = title;
  96   link.target = '_top';
  97   // Exclude links from the tab order.  The tabIndex is added to the thumbnail
  98   // parent container instead.
  99   link.tabIndex = '-1';
 100   if (text)
 101     link.textContent = text;
 102   link.addEventListener('mouseover', function() {
 103     var ntpApiHandle = chrome.embeddedSearch.newTabPage;
 104     ntpApiHandle.logEvent(NTP_LOGGING_EVENT_TYPE.NTP_MOUSEOVER);
 105   });
 106   return link;
 107 }
 108
 109
 110 /**
 111  * Decodes most visited styles from URL parameters.
 112  * - f: font-family
 113  * - fs: font-size as a number in pixels.
 114  * - c: A hexadecimal number interpreted as a hex color code.
 115  * @param {Object.<string, string>} params URL parameters specifying style.
 116  * @param {boolean} isTitle if the style is for the Most Visited Title.
 117  * @return {Object} Styles suitable for CSS interpolation.
 118  */
 119 function getMostVisitedStyles(params, isTitle) {
 120   var styles = {
 121     color: '#777',
 122     fontFamily: '',
 123     fontSize: 11
 124   };
 125   var apiHandle = chrome.embeddedSearch.newTabPage;
 126   var themeInfo = apiHandle.themeBackgroundInfo;
 127   if (isTitle && themeInfo && !themeInfo.usingDefaultTheme) {
 128     styles.color = convertArrayToRGBAColor(themeInfo.textColorRgba) ||
 129         styles.color;
 130   } else if ('c' in params) {
 131     styles.color = convertToHexColor(parseInt(params.c, 16)) || styles.color;
 132   }
 133   if ('f' in params && /^[-0-9a-zA-Z ,]+$/.test(params.f))
 134     styles.fontFamily = params.f;
 135   if ('fs' in params && isFinite(parseInt(params.fs, 10)))
 136     styles.fontSize = parseInt(params.fs, 10);
 137   return styles;
 138 }
 139
 140
 141 /**
 142  * @param {string} location A location containing URL parameters.
 143  * @param {function(Object, Object)} fill A function called with styles and
 144  *     data to fill.
 145  */
 146 function fillMostVisited(location, fill) {
 147   var params = parseQueryParams(document.location);
 148   params.rid = parseInt(params.rid, 10);
 149   if (!isFinite(params.rid) && !params.url)
 150     return;
 151   // Log whether the suggestion was obtained from the server or the client.
 152   chrome.embeddedSearch.newTabPage.logEvent(params.url ?
 153       NTP_LOGGING_EVENT_TYPE.NTP_SERVER_SIDE_SUGGESTION :
 154       NTP_LOGGING_EVENT_TYPE.NTP_CLIENT_SIDE_SUGGESTION);
 155   var data = {};
 156   if (params.url) {
 157     // Means that the suggestion data comes from the server. Create data object.
 158     data.url = params.url;
 159     data.thumbnailUrl = params.tu || '';
 160     data.thumbnailUrl2 = params.tu2 || '';
 161     data.title = params.ti || '';
 162     data.direction = params.di || '';
 163     data.domain = params.dom || '';
 164     data.ping = params.ping || '';
 165     // Log the fact that suggestion was obtained from the server.
 166     var ntpApiHandle = chrome.embeddedSearch.newTabPage;
 167     ntpApiHandle.logEvent(NTP_LOGGING_EVENT_TYPE.NTP_SERVER_SIDE_SUGGESTION);
 168   } else {
 169     var apiHandle = chrome.embeddedSearch.searchBox;
 170     data = apiHandle.getMostVisitedItemData(params.rid);
 171     if (!data)
 172       return;
 173     delete data.ping;
 174   }
 175   if (/^javascript:/i.test(data.url) ||
 176       /^javascript:/i.test(data.thumbnailUrl) ||
 177       /^javascript:/i.test(data.thumbnailUrl2))
 178     return;
 179   if (data.direction)
 180     document.body.dir = data.direction;
 181   fill(params, data);
 182 }