chrome/browser/resources/local_ntp/local_ntp_design.js

   1 // Copyright 2014 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 Specifications for NTP design, and an accessor to presets.
   8  */
   9
  10  var THUMBNAIL_FALLBACK = {
  11    DOT: 'dot'  // Draw single dot.
  12  };
  13
  14 /**
  15  * Specifications for an NTP design (not comprehensive).
  16  *
  17  * name: A unique identifier for the style.
  18  * fontFamily: Font family to use for title and thumbnail <iframe>s.
  19  * fontSize: Font size to use for the <iframe>s, in px.
  20  * tileWidth: The width of each suggestion tile, in px.
  21  * tileMargin: Spacing between successive tiles, in px.
  22  * titleColor: The RRGGBBAA color of title text.
  23  * titleColorAgainstDark: The RRGGBBAA color of title text against a dark theme.
  24  * titleTextAlign: (Optional) The alignment of title text. If unspecified, the
  25  *   default value is 'center'.
  26  * titleTextFade: (Optional) The number of pixels beyond which title
  27  *   text begins to fade. This overrides the default ellipsis style.
  28  * thumbnailTextColor: The RRGGBBAA color that thumbnail <iframe> may use to
  29  *   display text message in place of missing thumbnail.
  30  * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the
  31  *   thumbnail fallback strategy. If unassigned, then the thumbnail.html
  32  *   <iframe> would handle the fallback.
  33  * showFakeboxHint: Whether to display text in the fakebox.
  34  *
  35  * @typedef {{
  36  *   name: string,
  37  *   fontFamily: string,
  38  *   fontSize: number,
  39  *   tileWidth: number,
  40  *   tileMargin: number,
  41  *   titleColor: string,
  42  *   titleColorAgainstDark: string,
  43  *   titleTextAlign: string|null|undefined,
  44  *   titleTextFade: string|null|undefined,
  45  *   thumbnailTextColor: string,
  46  *   thumbnailFallback: string|null|undefined
  47  *   showFakeboxHint: string|null|undefined
  48  * }}
  49  */
  50 var NtpDesign;
  51
  52 /**
  53  * Returns an NTP design corresponding to the given name.
  54  * @param {string|undefined} opt_name The name of the design. If undefined, then
  55  *   the default design is specified.
  56  * @return {NtpDesign} The NTP design corresponding to name.
  57  */
  58 function getNtpDesign(opt_name) {
  59   var ntpDesign = null;
  60
  61   if (opt_name === 'md') {
  62     ntpDesign = {
  63       name: opt_name,
  64       fontFamily: 'arial, sans-serif',
  65       fontSize: 12,
  66       tileWidth: 156,
  67       tileMargin: 16,
  68       titleColor: '323232ff',
  69       titleColorAgainstDark: 'd2d2d2ff',
  70       titleTextAlign: 'inherit',
  71       titleTextFade: 122 - 36,  // 112px wide title with 32 pixel fade at end.
  72       thumbnailTextColor: '323232ff',  // Unused.
  73       thumbnailFallback: THUMBNAIL_FALLBACK.DOT,
  74       showFakeboxHint: true
  75     };
  76   } else {
  77     ntpDesign = {
  78       name: 'classical',
  79       fontFamily: 'arial, sans-serif',
  80       fontSize: 11,
  81       tileWidth: 140,
  82       tileMargin: 20,
  83       titleColor: '777777ff',
  84       titleColorAgainstDark: '777777ff',
  85       titleTextAlign: 'center',
  86       titleTextFade: null,  // Default to ellipsis.
  87       thumbnailTextColor: '777777ff',
  88       thumbnailFallback: null,  // Default to false.
  89       showFakeboxHint: false
  90     };
  91   }
  92   return ntpDesign;
  93 }