Move themes info from dev.chromium.org into the dev doc.

Glen, please pay special attention to the intro, properties section,
and the start of the tints section. Besides beefing those up,
I also did a bit of reorganizing and reformatting, and I removed
implementation info that didn't seem relevant to developers.

TBR=glen,rafaelw

Review URL: http://codereview.chromium.org/181032

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@25030 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 159 insertions, 2 deletions

diff --git a/chrome/common/extensions/docs/static/manifest.html b/chrome/common/extensions/docs/static/manifest.html
index 5c469f3..4a26258 100755
--- a/chrome/common/extensions/docs/static/manifest.html
+++ b/chrome/common/extensions/docs/static/manifest.html
@@ -31,7 +31,7 @@ are <b>name</b> and <b>version</b>.
   "<a href="pageActions.html">page_actions</a>": [...],
   "<a href="#permissions">permissions</a>": [...],
   "<a href="npapi.html">plugins</a>": [...],
-  "<a href="http://dev.chromium.org/developers/design-documents/themes">theme</a>": [...],
+  "<a href="themes.html">theme</a>": [...],
   "<a href="toolstrip.html">toolstrips</a>": [...],
 }
 </pre>
diff --git a/chrome/common/extensions/docs/static/themes.html b/chrome/common/extensions/docs/static/themes.html
new file mode 100755
index 0000000..b02b073
--- /dev/null
+++ b/chrome/common/extensions/docs/static/themes.html
@@ -0,0 +1,123 @@
+<div id="pageData-showTOC" class="pageData">true</div>
+
+<p>
+A <em>theme</em> is a special kind of extension
+that changes the way the browser looks.
+Themes are <a href="packaging.html">packaged</a> like regular extensions,
+but they don't contain JavaScript or HTML code.
+<span class="comment">
+[PENDING: check]
+</span>
+Once installed, the theme specification is copied
+into the browser preferences,
+allowing users to override individual theme choices.
+</p>
+
+<h2> Field summary </h2>
+<p>
+Here is an example <code>manifest.json</code> file for a theme:
+</p>
+
+<pre>
+{
+&nbsp;&nbsp;"version": "2.6",
+&nbsp;&nbsp;"name": "camo theme",
+<b>&nbsp;&nbsp;"theme": {
+&nbsp;&nbsp; &nbsp;"<a href="#images">images</a>" : {
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_frame" : "images/theme_frame_camo.png",
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_frame_overlay" : "images/theme_frame_stripe.png",
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_toolbar" : "images/theme_toolbar_camo.png",
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_ntp_attribution" : "images/attribution.png"
+&nbsp;&nbsp; &nbsp;},
+&nbsp;&nbsp; &nbsp;"<a href="#colors">colors</a>" : {
+&nbsp;&nbsp; &nbsp; &nbsp;"frame" : [71, 105, 91],
+&nbsp;&nbsp; &nbsp; &nbsp;"toolbar" : [207, 221, 192],
+&nbsp;&nbsp; &nbsp; &nbsp;"ntp_text" : [20, 40, 0],
+&nbsp;&nbsp; &nbsp; &nbsp;"ntp_link" : [36, 70, 0],
+&nbsp;&nbsp; &nbsp; &nbsp;"ntp_section" : [207, 221, 192],
+&nbsp;&nbsp; &nbsp; &nbsp;"button_background" : [255, 255, 255]
+&nbsp;&nbsp; &nbsp;},
+&nbsp;&nbsp; &nbsp;"<a href="#tints">tints</a>" : {
+&nbsp;&nbsp; &nbsp; &nbsp;"buttons" : [0.33, 0.5, 0.47]
+&nbsp;&nbsp; &nbsp;},
+&nbsp;&nbsp; &nbsp;"<a href="#properties">properties</a>" : {
+&nbsp;&nbsp; &nbsp; &nbsp;"ntp_background_alignment" : "bottom"
+&nbsp;&nbsp; &nbsp;}
+&nbsp;&nbsp;}</b>
+}
+</pre>
+
+<h2>Field details</h2>
+
+<h3 id="colors">colors</h3>
+
+<p>
+Colors are in RGB format.
+To find the full range of colors that you can specify, see
+<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>.
+</p>
+
+<h3 id="images">images</h3>
+
+<p>
+Image resources use paths relative to the root of the extension.
+You can override any IDR_THEME_* image specified in
+<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/app/theme/theme_resources.grd"><code>theme_resources.grd</code></a>.
+</p>
+
+<h3 id="properties">properties</h3>
+
+
+<p>
+This field lets you specify
+properties such as background alignment,
+background repeat,
+and an alternate logo.
+<span class="comment"> [PENDING: check] </span>
+To see the properties and the values they can have, see
+<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>.
+<span class="comment"> [PENDING: We should flesh this out.] </span>
+</p>
+
+<h3 id="tints">tints</h3>
+
+<p>
+You can specify tints to be applied to parts of the UI
+such as buttons, the frame, and the background tab.
+Google Chrome supports tints, not images,
+because images don't work across platforms
+and are brittle in the case of adding new buttons.
+To find the full range of tints that you can specify, see
+<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>.
+</p>
+
+<p>
+Tints are in Hue-Saturation-Lightness (HSL) format,
+using floating-point numbers in the range 0 - 1.0:
+</p>
+
+<ul>
+  <li>
+    <b>Hue</b> is an absolute value, with 0 and 1 being red.
+  </li>
+  <li>
+    <b>Saturation</b> is relative to the currently provided image.
+    0.5 is <em>no change</em>,
+    0 is <em>totally desaturated</em>,
+    and 1 is <em>full saturation</em>.
+  </li>
+  <li>
+    <b>Lightness</b> is also relative,
+    with 0.5 being <em>no change</em>,
+    0 as <em>all pixels black</em>,
+    and 1 as <em>all pixels white</em>.
+  </li>
+</ul>
+
+<p>
+You can alternatively use <code>-1.0</code> for any of the HSL values
+to specify <em>no change</em>.
+</p>
+
+
diff --git a/chrome/common/extensions/docs/template/api_template.html b/chrome/common/extensions/docs/template/api_template.html
index 98ad6cb..69db03c 100755
--- a/chrome/common/extensions/docs/template/api_template.html
+++ b/chrome/common/extensions/docs/template/api_template.html
@@ -39,7 +39,7 @@
               <li><a href="tabs.html">Tabs</a></li>
               <li><a href="windows.html">Windows</a></li>
               <li><a href="bookmarks.html">Bookmarks</a></li>
-              <li>Themes</li>
+              <li><a href="themes.html">Themes</a></li>
               <li><a href="npapi.html">NPAPI Plugins</a></li>
               <li><a href="packaging.html">Packaging</a></li>
               <li>Autoupdate</li>
diff --git a/chrome/common/extensions/docs/themes.html b/chrome/common/extensions/docs/themes.html
new file mode 100755
index 0000000..ff45494
--- /dev/null
+++ b/chrome/common/extensions/docs/themes.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- This page is a placeholder for generated extensions api doc. Note:
+    1) The <head> information in this page is significant, should be uniform
+       across api docs and should be edited only with knowledge of the
+       templating mechanism.
+    2) The <body> tag *must* retain id="body"
+    3) All <body>.innerHTML is genereated as an rendering step. If viewed in a
+       browser, it will be re-generated from the template, json schema and
+       authored overview content.
+    4) The <body>.innerHTML is also generated by an offline step so that this
+       page may easily be indexed by search engines.
+       
+    TODO(rafaelw): Abstract this into a "pageshell" that becomes the single
+    version of page template shell and the "instance" pages (bookmarks.html,
+    etc...) can be generated with a build step.
+-->
+<!-- <html> must retain id="template -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <!-- <head> data is significant and loads the needed libraries and styles -->
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title jscontent="getPageTitle()">pageTitle</title>
+    <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css">
+    <script type="text/javascript"
+            src="../../../third_party/jstemplate/jstemplate_compiled.js">
+    </script>
+    <script type="text/javascript" src="js/api_page_generator.js"></script>
+    <script type="text/javascript" src="js/bootstrap.js"></script>
+  </head>
+  <!-- <body> content is completely generated. Do not edit, as it will be
+      and rewritten. -->
+  <body>
+  </body>
+</html>