[Local NTP] Adding NtpDesign class to parametrizing NTP design specs

chrome/browser/resources/local_ntp/local_ntp_design.js

+// Copyright 2013 The Chromium Authors. All rights reserved.

[Mathieu, 2014/08/07 18:07:06]

2014

[huangs, 2014/08/07 20:15:20]

Done.

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+

[Mathieu, 2014/08/07 18:07:05]

Probably don't need these 2 extra lines

[huangs, 2014/08/07 20:15:20]

Done.

[Mathieu, 2014/08/07 20:50:24]

I meant the two extra newlines, not the 2 lines of the license :)

+
+/**
+ * @fileoverview Specifications for NTP design, and an acessor to presets.

[Mathieu, 2014/08/07 18:07:06]

*accessor

[huangs, 2014/08/07 20:15:19]

Done.

+ */
+
+
+/**
+ * Specifications for an NTP design (not comprehensive).
+ *
+ * name: A unique identifier for the style.
+ * classToAdd: A list of classes to be added to #ntp-contents, so the
+ *   appropriate CSS will take effect.
+ * fontFamily: Font family to use for title and thumbnail <iframe>s.
+ * fontSize: Font size to use for the <iframe>s, in px.
+ * tileWidth: The width of each suggestion tile, in px.
+ * tileMargin: Spacing between successive tiles, in px.
+ * titleWidth: The width of each title <iframe>, in px.
+ * titleHeight: The height of each title <iframe>, in px.
+ * titleColor: The RRGGBB color of title text.
+ * titleTextAlign: The alignment of title text.
+ * titleTextFade: (Optional) The number of pixels beyond which title
+ *   text begins to fade. This overrides the default ellipsis style.
+ * thumbnailWidth: The width of each thumbnail <iframe>, in px.
+ * thumbnailHeight: The height of each thumbnail <iframe>, in px.
+ * thumbnailTextColor: The RRGGBB color that thumbnail <iframe> may use to
+ *   display text message in place of missing thumbnail.
+ *
+ * @typedef {{
+ *   name: string,
+ *   classToAdd: Array.{string},
+ *   fontFamily: string,
+ *   fontSize: number,
+ *   tileWidth: number,
+ *   tileMargin: number,
+ *   titleWidth: number,
+ *   titleHeight: number,
+ *   titleColor: string,
+ *   titleTextAlign: string,
+ *   titleTextFade: string|null|undefined,
+ *   thumbnailWidth: number,
+ *   thumbnailHeight: number,
+ *   thumbnailTextColor: string
+ * }}
+ */
+var NtpDesign;
+
+/**
+ * Returns an NTP design corresponding to the given name.
+ * @param {string|undefined} opt_name The name of the design. If undefined, then
+ *   the default design is specified.
+ * @return {NtpDesign} The NTP design corresponding to name.
+ */
+function getNtpDesign(opt_name) {
+  // TODO(huangs): Add new style.
+  var ntpDesign = {

[Mathieu, 2014/08/07 18:07:05]

why not have this style defined above as a @const {NtpDesign} and then return
the constant here?

[huangs, 2014/08/07 20:15:20]

I'm going to return this directly.  Not assigning to a variable because later we
will have different cases, and pre-allocating unused @const is inefficient.

+    name: 'classical',
+    classToAdd: [],
+    fontFamily: 'arial, sans-serif',
+    fontSize: 11,
+    tileWidth: 140,
+    tileMargin: 20,
+    titleWidth: 138,
+    titleHeight: 18,
+    titleColor: '777777',
+    titleTextAlign: 'center',

[Mathieu, 2014/08/07 18:07:06]

As mentioned, since center is the default I would suggest making it optional but
could see if you want to keep it here.

[huangs, 2014/08/07 20:15:20]

Made default center.
Also, not going to initialize these variables, but using comment as stub.

+    titleTextFade: null,  // Default to ellipsis.
+    thumbnailWidth: 138,
+    thumbnailHeight: 83,
+    thumbnailTextColor: '777777'
+  };
+  return ntpDesign;
+}