First draft of DOM UI for about box. See chromium-os:5161 for details on what

is not part of this cl.

BUG=chromium-os:5161
TEST=select About Chromium in the menu.

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

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

12 files changed, 645 insertions, 6 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index b7dd171..cfae607 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -5535,6 +5535,33 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_OPTIONS_LEARN_MORE_LABEL" desc="In the options dialog, we have links to the support web pages where the user can learn more about a feature.">
         Learn more
       </message>
+      
+      <!-- The About page is now part of options. -->
+      <message name="IDS_ABOUT_PAGE_TITLE" desc="Title used for about options panel">
+      	About
+      </message>
+      <message name="IDS_ABOUT_PAGE_LOADING" desc="Label used for async data before data is available. Example is Chrome OS version.">
+      	Loading&#x2026;
+      </message>
+      <message name="IDS_ABOUT_PAGE_MORE_INFO" desc="Title for _More_info_ link.">
+      	More Info
+      </message>
+      <message name="IDS_ABOUT_PAGE_CHANNEL" desc="The channel label under _More_Info_.">
+      	Channel
+      </message>
+      <message name="IDS_ABOUT_PAGE_CHANNEL_RELEASE" desc="The release option in the channel select.">
+      	Release
+      </message>
+      <message name="IDS_ABOUT_PAGE_CHANNEL_BETA" desc="The beta option in the channel select.">
+      	Beta
+      </message>
+      <message name="IDS_ABOUT_PAGE_CHANNEL_DEVELOPMENT" desc="The development option in the channel select.">
+      	Development
+      </message>
+      <message name="IDS_ABOUT_PAGE_CHECK_NOW" desc="Button title for checking for updates now.">
+      	Check For Update
+      </message>
+      
 
       <!-- Views displays group titles and their contents side-by-side -->
       <!-- and includes a colon as a result (Mac needs this too).  GTK -->
diff --git a/chrome/browser/browser.cc b/chrome/browser/browser.cc
index 4956195..7c24f74 100644
--- a/chrome/browser/browser.cc
+++ b/chrome/browser/browser.cc
@@ -1852,7 +1852,11 @@ void Browser::OpenRemotingSetupDialog() {
 
 void Browser::OpenAboutChromeDialog() {
   UserMetrics::RecordAction(UserMetricsAction("AboutChrome"), profile_);
+#if defined(OS_CHROMEOS)
+  ShowSingletonTab(GURL(chrome::kChromeUIAboutURL));
+#else
   window_->ShowAboutChromeDialog();
+#endif
 }
 
 void Browser::OpenUpdateChromeDialog() {
diff --git a/chrome/browser/dom_ui/about_page_handler.cc b/chrome/browser/dom_ui/about_page_handler.cc
new file mode 100644
index 0000000..1246f31
--- /dev/null
+++ b/chrome/browser/dom_ui/about_page_handler.cc
@@ -0,0 +1,347 @@
+// Copyright (c) 2010 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.
+
+#include "chrome/browser/dom_ui/about_page_handler.h"
+
+#include "app/l10n_util.h"
+#include "app/resource_bundle.h"
+#include "base/basictypes.h"
+#include "base/callback.h"
+#include "base/command_line.h"
+#include "base/file_version_info.h"
+#include "base/i18n/time_formatting.h"
+#include "base/string_number_conversions.h"
+#include "base/time.h"
+#include "base/utf_string_conversions.h"
+#include "base/values.h"
+#include "chrome/browser/platform_util.h"
+#include "chrome/common/notification_service.h"
+#include "chrome/common/url_constants.h"
+#include "chrome/common/chrome_version_info.h"
+#include "googleurl/src/gurl.h"
+#include "grit/browser_resources.h"
+#include "grit/chromium_strings.h"
+#include "grit/generated_resources.h"
+#include "grit/locale_settings.h"
+#include "grit/theme_resources.h"
+#include "webkit/glue/webkit_glue.h"
+
+#if defined(CHROME_V8)
+#include "v8/include/v8.h"
+#endif
+
+#if defined(OS_CHROMEOS)
+#include "chrome/browser/chromeos/cros/cros_library.h"
+#include "chrome/browser/chromeos/cros/update_library.h"
+#endif
+
+namespace {
+
+// These are used as placeholder text around the links in the text in the
+// license.
+const wchar_t kBeginLink[] = L"BEGIN_LINK";
+const wchar_t kEndLink[] = L"END_LINK";
+const wchar_t kBeginLinkChr[] = L"BEGIN_LINK_CHR";
+const wchar_t kBeginLinkOss[] = L"BEGIN_LINK_OSS";
+const wchar_t kEndLinkChr[] = L"END_LINK_CHR";
+const wchar_t kEndLinkOss[] = L"END_LINK_OSS";
+
+// Returns a substring [start, end) from |text|.
+std::wstring StringSubRange(const std::wstring& text, size_t start,
+                            size_t end) {
+  DCHECK(end > start);
+  return text.substr(start, end - start);
+}
+
+struct LocalizeEntry {
+  const wchar_t* identifier;
+  int            resource;
+};
+
+const LocalizeEntry localize_table[] = {
+#if defined (OS_CHROMEOS)
+    { L"product", IDS_PRODUCT_OS_NAME },
+    { L"os", IDS_PRODUCT_OS_NAME },
+    { L"loading", IDS_ABOUT_PAGE_LOADING },
+    { L"check_now", IDS_ABOUT_PAGE_CHECK_NOW },
+    { L"update_status", IDS_UPGRADE_CHECK_STARTED },
+#else
+    { L"product", IDS_PRODUCT_NAME },
+    { L"check_now", IDS_ABOUT_CHROME_UPDATE_CHECK },
+#endif
+    { L"browser", IDS_PRODUCT_NAME },
+    { L"more_info", IDS_ABOUT_PAGE_MORE_INFO },
+    { L"copyright", IDS_ABOUT_VERSION_COPYRIGHT },
+    { L"channel", IDS_ABOUT_PAGE_CHANNEL },
+    { L"release", IDS_ABOUT_PAGE_CHANNEL_RELEASE },
+    { L"beta", IDS_ABOUT_PAGE_CHANNEL_BETA },
+    { L"development", IDS_ABOUT_PAGE_CHANNEL_DEVELOPMENT },
+    { L"user_agent", IDS_ABOUT_VERSION_USER_AGENT },
+    { L"command_line", IDS_ABOUT_VERSION_COMMAND_LINE },
+    { L"aboutPage", IDS_ABOUT_PAGE_TITLE }
+};
+
+void LocalizedStrings(DictionaryValue* localized_strings) {
+  for (size_t n = 0; n != arraysize(localize_table); ++n) {
+    localized_strings->SetString(localize_table[n].identifier,
+        l10n_util::GetString(localize_table[n].resource));
+  }
+}
+
+}  // namespace
+
+#if defined(OS_CHROMEOS)
+
+class AboutPageHandler::UpdateObserver
+    : public chromeos::UpdateLibrary::Observer {
+ public:
+  explicit UpdateObserver(AboutPageHandler* handler) : page_handler_(handler) {}
+  virtual ~UpdateObserver() {}
+
+ private:
+  virtual void UpdateStatusChanged(chromeos::UpdateLibrary* object) {
+    page_handler_->UpdateStatus(object->status());
+  }
+
+  AboutPageHandler* page_handler_;
+
+  DISALLOW_COPY_AND_ASSIGN(UpdateObserver);
+};
+
+#endif
+
+AboutPageHandler::AboutPageHandler()
+#if defined(OS_CHROMEOS)
+    : progress_(-1),
+      sticky_(false),
+      started_(false)
+#endif
+{}
+
+AboutPageHandler::~AboutPageHandler() {
+#if defined(OS_CHROMEOS)
+  if (update_observer_.get()) {
+    chromeos::CrosLibrary::Get()->GetUpdateLibrary()->
+        RemoveObserver(update_observer_.get());
+  }
+#endif
+}
+
+void AboutPageHandler::GetLocalizedValues(DictionaryValue* localized_strings) {
+  DCHECK(localized_strings);
+
+  LocalizedStrings(localized_strings);
+
+  // browser version
+
+  scoped_ptr<FileVersionInfo> version_info(chrome::GetChromeVersionInfo());
+  DCHECK(version_info.get() != NULL);
+
+  std::wstring browser_version = version_info->file_version();
+
+  string16 version_modifier = platform_util::GetVersionStringModifier();
+  if (version_modifier.length()) {
+    browser_version += L" ";
+    browser_version += UTF16ToWide(version_modifier);
+  }
+
+#if !defined(GOOGLE_CHROME_BUILD)
+  browser_version += L" (";
+  browser_version += version_info->last_change();
+  browser_version += L")";
+#endif
+
+  localized_strings->SetString(L"browser_version", browser_version);
+
+  // license
+
+  std::wstring text = l10n_util::GetString(IDS_ABOUT_VERSION_LICENSE);
+
+  bool chromium_url_appears_first =
+      text.find(kBeginLinkChr) < text.find(kBeginLinkOss);
+
+  size_t link1 = text.find(kBeginLink);
+  DCHECK(link1 != std::wstring::npos);
+  size_t link1_end = text.find(kEndLink, link1);
+  DCHECK(link1_end != std::wstring::npos);
+  size_t link2 = text.find(kBeginLink, link1_end);
+  DCHECK(link2 != std::wstring::npos);
+  size_t link2_end = text.find(kEndLink, link2);
+  DCHECK(link1_end != std::wstring::npos);
+
+  localized_strings->SetString(L"license_content_0", text.substr(0, link1));
+  localized_strings->SetString(L"license_content_1", StringSubRange(text,
+      link1_end + wcslen(kEndLinkOss), link2));
+  localized_strings->SetString(L"license_content_2",
+                              text.substr(link2_end + wcslen(kEndLinkOss)));
+
+  // The Chromium link within the main text of the dialog.
+  localized_strings->SetString(chromium_url_appears_first ?
+      L"license_link_content_0" : L"license_link_content_1",
+      StringSubRange(text, text.find(kBeginLinkChr) + wcslen(kBeginLinkChr),
+                     text.find(kEndLinkChr)));
+  localized_strings->SetString(chromium_url_appears_first ?
+      L"license_link_0" : L"license_link_1",
+      l10n_util::GetString(IDS_CHROMIUM_PROJECT_URL));
+
+  // The Open Source link within the main text of the dialog.
+  localized_strings->SetString(chromium_url_appears_first ?
+      L"license_link_content_1" : L"license_link_content_0",
+      StringSubRange(text, text.find(kBeginLinkOss) + wcslen(kBeginLinkOss),
+                     text.find(kEndLinkOss)));
+  localized_strings->SetString(chromium_url_appears_first ?
+      L"license_link_1" : L"license_link_0", chrome::kAboutCreditsURL);
+
+  // webkit
+
+  localized_strings->SetString(L"webkit_version",
+                               webkit_glue::GetWebKitVersion());
+
+  // javascript
+
+#if defined(CHROME_V8)
+  localized_strings->SetString(L"js_engine", "V8");
+  localized_strings->SetString(L"js_engine_version", v8::V8::GetVersion());
+#else
+  localized_strings->SetString(L"js_engine", "JavaScriptCore");
+  localized_strings->SetString(L"js_engine_version",
+                               webkit_glue::GetWebKitVersion());
+#endif
+
+  // user agent
+
+  localized_strings->SetString(L"user_agent_info",
+                               webkit_glue::GetUserAgent(GURL()));
+
+  // command line
+
+#if defined(OS_WIN)
+  localized_strings->SetString(L"command_line_info",
+      CommandLine::ForCurrentProcess()->command_line_string());
+#elif defined(OS_POSIX)
+  std::string command_line = "";
+  typedef std::vector<std::string> ArgvList;
+  const ArgvList& argv = CommandLine::ForCurrentProcess()->argv();
+  for (ArgvList::const_iterator iter = argv.begin(); iter != argv.end(); iter++)
+    command_line += " " + *iter;
+  localized_strings->SetString(L"command_line_info", command_line);
+#endif
+}
+
+void AboutPageHandler::RegisterMessages() {
+  dom_ui_->RegisterMessageCallback("PageReady",
+      NewCallback(this, &AboutPageHandler::PageReady));
+
+#if defined(OS_CHROMEOS)
+  dom_ui_->RegisterMessageCallback("CheckNow",
+      NewCallback(this, &AboutPageHandler::CheckNow));
+#endif
+}
+
+void AboutPageHandler::PageReady(const Value* value) {
+#if defined(OS_CHROMEOS)
+  // Version information is loaded from a callback
+  loader_.GetVersion(&consumer_,
+                     NewCallback(this, &AboutPageHandler::OnOSVersion));
+
+  update_observer_.reset(new UpdateObserver(this));
+  chromeos::CrosLibrary::Get()->GetUpdateLibrary()->
+      AddObserver(update_observer_.get());
+
+  CheckNow(NULL);
+#endif
+}
+
+#if defined(OS_CHROMEOS)
+
+void AboutPageHandler::CheckNow(const Value* value) {
+  if (chromeos::InitiateUpdateCheck)
+    chromeos::InitiateUpdateCheck();
+}
+
+void AboutPageHandler::UpdateStatus(
+    const chromeos::UpdateLibrary::Status& status) {
+  std::wstring message;
+  std::string image = "up-to-date";
+  bool enabled = false;
+
+  switch (status.status) {
+    case chromeos::UPDATE_STATUS_IDLE:
+      if (!sticky_) {
+        message = l10n_util::GetStringF(IDS_UPGRADE_ALREADY_UP_TO_DATE,
+            l10n_util::GetString(IDS_PRODUCT_OS_NAME));
+        enabled = true;
+      }
+      break;
+    case chromeos::UPDATE_STATUS_CHECKING_FOR_UPDATE:
+      message = l10n_util::GetString(IDS_UPGRADE_CHECK_STARTED);
+      sticky_ = false;
+      break;
+    case chromeos::UPDATE_STATUS_UPDATE_AVAILABLE:
+      message = l10n_util::GetString(IDS_UPDATE_AVAILABLE);
+      started_ = true;
+      break;
+    case chromeos::UPDATE_STATUS_DOWNLOADING:
+    {
+      int progress = static_cast<int>(status.download_progress * 100.0);
+      if (progress != progress_) {
+        progress_ = progress;
+        message = l10n_util::GetStringF(IDS_UPDATE_DOWNLOADING, progress_);
+      }
+      started_ = true;
+    }
+      break;
+    case chromeos::UPDATE_STATUS_VERIFYING:
+      message = l10n_util::GetString(IDS_UPDATE_VERIFYING);
+      started_ = true;
+      break;
+    case chromeos::UPDATE_STATUS_FINALIZING:
+      message = l10n_util::GetString(IDS_UPDATE_FINALIZING);
+      started_ = true;
+      break;
+    case chromeos::UPDATE_STATUS_UPDATED_NEED_REBOOT:
+      message = l10n_util::GetString(IDS_UPDATE_COMPLETED);
+      image = "available";
+      sticky_ = true;
+      break;
+    default:
+    // case UPDATE_STATUS_ERROR:
+    // case UPDATE_STATUS_REPORTING_ERROR_EVENT:
+
+    // The error is only displayed if we were able to determine an
+    // update was available.
+      if (started_) {
+        message = l10n_util::GetString(IDS_UPDATE_ERROR);
+        image = "fail";
+        enabled = true;
+        sticky_ = true;
+        started_ = false;
+      }
+      break;
+  }
+  if (message.size()) {
+    scoped_ptr<Value> version_string(Value::CreateStringValue(message));
+    dom_ui_->CallJavascriptFunction(L"AboutPage.updateStatusCallback",
+                                    *version_string);
+
+    scoped_ptr<Value> enabled_value(Value::CreateBooleanValue(enabled));
+    dom_ui_->CallJavascriptFunction(L"AboutPage.updateEnableCallback",
+                                    *enabled_value);
+
+    scoped_ptr<Value> image_string(Value::CreateStringValue(image));
+    dom_ui_->CallJavascriptFunction(L"AboutPage.setUpdateImage",
+                                    *image_string);
+  }
+}
+
+void AboutPageHandler::OnOSVersion(chromeos::VersionLoader::Handle handle,
+                                   std::string version) {
+  if (version.size()) {
+    scoped_ptr<Value> version_string(Value::CreateStringValue(version));
+    dom_ui_->CallJavascriptFunction(L"AboutPage.updateOSVersionCallback",
+                                    *version_string);
+  }
+}
+#endif
+
diff --git a/chrome/browser/dom_ui/about_page_handler.h b/chrome/browser/dom_ui/about_page_handler.h
new file mode 100644
index 0000000..06417a8
--- /dev/null
+++ b/chrome/browser/dom_ui/about_page_handler.h
@@ -0,0 +1,57 @@
+// Copyright (c) 2010 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.
+
+#ifndef CHROME_BROWSER_DOM_UI_ABOUT_PAGE_HANDLER_H_
+#define CHROME_BROWSER_DOM_UI_ABOUT_PAGE_HANDLER_H_
+
+#include <string>
+
+#include "chrome/browser/dom_ui/options_ui.h"
+
+#if defined(OS_CHROMEOS)
+#include "chrome/browser/chromeos/cros/update_library.h"
+#include "chrome/browser/chromeos/version_loader.h"
+#endif
+
+// ChromeOS about page UI handler.
+class AboutPageHandler : public OptionsPageUIHandler {
+ public:
+  AboutPageHandler();
+  virtual ~AboutPageHandler();
+
+  // OptionsUIHandler implementation.
+  virtual void GetLocalizedValues(DictionaryValue* localized_strings);
+  virtual void RegisterMessages();
+
+ private:
+
+  void PageReady(const Value* value);
+
+#if defined(OS_CHROMEOS)
+  void CheckNow(const Value* value);
+  // Callback from chromeos::VersionLoader giving the version.
+  void OnOSVersion(chromeos::VersionLoader::Handle handle,
+                   std::string version);
+  void UpdateStatus(const chromeos::UpdateLibrary::Status& status);
+
+  // Handles asynchronously loading the version.
+  chromeos::VersionLoader loader_;
+
+  // Used to request the version.
+  CancelableRequestConsumer consumer_;
+
+  // Update Observer
+  class UpdateObserver;
+  scoped_ptr<UpdateObserver> update_observer_;
+
+  int progress_;
+  bool sticky_;
+  bool started_;
+#endif
+
+  DISALLOW_COPY_AND_ASSIGN(AboutPageHandler);
+};
+
+#endif  // CHROME_BROWSER_DOM_UI_ABOUT_PAGE_HANDLER_H_
+
diff --git a/chrome/browser/dom_ui/options_ui.cc b/chrome/browser/dom_ui/options_ui.cc
index 8cd48fc..7708cac 100644
--- a/chrome/browser/dom_ui/options_ui.cc
+++ b/chrome/browser/dom_ui/options_ui.cc
@@ -16,6 +16,7 @@
 #include "base/time.h"
 #include "base/values.h"
 #include "chrome/browser/chrome_thread.h"
+#include "chrome/browser/dom_ui/about_page_handler.h"
 #include "chrome/browser/dom_ui/add_startup_page_handler.h"
 #include "chrome/browser/dom_ui/advanced_options_handler.h"
 #include "chrome/browser/dom_ui/autofill_options_handler.h"
@@ -142,6 +143,7 @@ OptionsUI::OptionsUI(TabContents* contents) : DOMUI(contents) {
   AddOptionsPageUIHandler(localized_strings, new StopSyncingHandler());
   AddOptionsPageUIHandler(localized_strings, new SyncOptionsHandler());
 #if defined(OS_CHROMEOS)
+  AddOptionsPageUIHandler(localized_strings, new AboutPageHandler());
   AddOptionsPageUIHandler(localized_strings,
                           new chromeos::AccountsOptionsHandler());
   AddOptionsPageUIHandler(localized_strings, new InternetOptionsHandler());
diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index 49c659a..f9835e0 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -40,6 +40,7 @@
     var SystemOptions = options.SystemOptions;
   </script>
 </if>
+<script src="options/about_page.js"></script>
 <script src="options/add_startup_page_overlay.js"></script>
 <script src="options/advanced_options.js"></script>
 <script src="options/autofill_options.js"></script>
@@ -56,6 +57,7 @@
 <script src="options/stop_syncing_overlay.js"></script>
 <script>
 
+var AboutPage = options.AboutPage;
 var AddStartupPageOverlay = options.AddStartupPageOverlay;
 var AdvancedOptions = options.AdvancedOptions;
 var AutoFillOptions = options.AutoFillOptions;
@@ -82,6 +84,7 @@ function load() {
     OptionsPage.register(InternetOptions.getInstance());
   }
 
+  OptionsPage.registerSubPage(AboutPage.getInstance());
   OptionsPage.register(BrowserOptions.getInstance());
   OptionsPage.register(PersonalOptions.getInstance());
   OptionsPage.register(AdvancedOptions.getInstance());
@@ -131,12 +134,18 @@ function load() {
 
   Preferences.getInstance().initialize();
   OptionsPage.initialize();
-
-  // TODO(csilv): Save/restore last selected page.
-  if (cr.isChromeOS) {
-    OptionsPage.showPageByName(SystemOptions.getInstance().name);
+  
+  var path = document.location.pathname;
+    
+  if (path.length > 1) {
+    OptionsPage.showPageByName(path.slice(1));
   } else {
-    OptionsPage.showPageByName(BrowserOptions.getInstance().name);
+    // TODO(csilv): Save/restore last selected page.
+    if (cr.isChromeOS) {
+      OptionsPage.showPageByName(SystemOptions.getInstance().name);
+    } else {
+      OptionsPage.showPageByName(BrowserOptions.getInstance().name);
+    }
   }
 
   var subpagesNavTabs = document.querySelectorAll('.subpages-nav-tabs');
@@ -156,7 +165,7 @@ window.onpopstate = function(e) {
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="dom_ui.css">
 <link rel="stylesheet" href="options/options_page.css">
-
+<link rel="stylesheet" href="options/about_page.css">
 <link rel="stylesheet" href="options/add_startup_page_overlay.css">
 <link rel="stylesheet" href="options/autofill_options_page.css">
 <link rel="stylesheet" href="options/browser_options_page.css">
@@ -213,6 +222,7 @@ window.onpopstate = function(e) {
      <include src="options/personal_options.html">
      <include src="options/search_engine_manager.html">
      <include src="options/sync_options.html">
+     <include src="options/about_page.html">
   </div>
 </div>
 
diff --git a/chrome/browser/resources/options/about_page.css b/chrome/browser/resources/options/about_page.css
new file mode 100644
index 0000000..c66bbc7
--- /dev/null
+++ b/chrome/browser/resources/options/about_page.css
@@ -0,0 +1,21 @@
+.loading {
+  font-style: italic;
+}
+
+.update-icon {
+    width: 17px;
+    height: 17px;
+    display: inline-block;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+}
+
+.update-icon.fail {
+  background-image: url('../../../app/theme/update_fail.png');
+}
+.update-icon.available {
+  background-image: url('../../../app/theme/update_available.png');
+}
+.update-icon.up-to-date {
+  background-image: url('../../../app/theme/update_uptodate.png');
+}
diff --git a/chrome/browser/resources/options/about_page.html b/chrome/browser/resources/options/about_page.html
new file mode 100644
index 0000000..fa2a71d
--- /dev/null
+++ b/chrome/browser/resources/options/about_page.html
@@ -0,0 +1,91 @@
+<div class="page hidden" id="aboutPage">
+  <h1 i18n-content="product"></h1>
+  <div id="aboutPageLessInfo">
+    <section>
+      <div>
+        <!-- White space is significant between spans. -->
+        <if expr="pp_ifdef('chromeos')">
+          <div><span i18n-content="os"></span> <span id="osVersion0">
+            <span class="loading" i18n-content="loading"></span></span></div>
+        </if>
+        <div>
+          <span i18n-content="browser"></span>
+          <span i18n-content="browser_version"></span>
+        </div>
+        <div>
+          <button class="link-button" id="moreInfoButton"
+                  i18n-content="more_info"></button>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div class="hidden" id="aboutPageMoreInfo">
+    <section>
+      <h3 i18n-content="channel"></h3>
+      <!-- TODO seanparent: wire to channel API when available. -->
+      <select disabled>
+        <option value="release" i18n-content="release"></option>
+        <option value="beta" i18n-content="beta"></option>
+        <option selected value="development"
+                i18n-content="development"></option>
+      </select>
+    </section>
+    <if expr="pp_ifdef('chromeos')">
+      <section>
+        <h3 i18n-content="os"></h3>
+        <div id="osVersion1">
+          <span class="loading" i18n-content="loading"></span>
+        </div>
+      </section>
+    </if>
+    <section>
+      <h3 i18n-content="browser"></h3>
+      <div i18n-content="browser_version"></div>
+    </section>
+    <section>
+      <h3>WebKit</h3>
+      <div i18n-content="webkit_version"></div>
+    </section>
+    <section>
+      <h3 i18n-content="js_engine"></h3>
+      <div i18n-content="js_engine_version"></div>
+    </section>
+    <section>
+      <h3 i18n-content="user_agent"></h3>
+      <div i18n-content="user_agent_info"></div>
+    </section>
+    <section>
+      <h3 i18n-content="command_line"></h3>
+      <div i18n-content="command_line_info"></div>
+    </section>
+  </div>
+  <section>
+    <div>
+      <div i18n-content="copyright"></div>
+      <div>
+        <!-- Odd formatting to avoid unwanted spaces between elements. -->
+        <span i18n-content="license_content_0">
+        </span><a i18n-values="href:license_link_0"
+                  i18n-content="license_link_content_0">
+        </a><span i18n-content="license_content_1">
+        </span><a i18n-values="href:license_link_1"
+                  i18n-content="license_link_content_1">
+        </a><span i18n-content="license_content_2">
+        </span>
+       </div>
+    </div>
+  </section>
+  <section>
+    <div>
+      <div>
+        <div id="updateIcon" class="update-icon up-to-date"></div>
+        <span id="updateStatus" i18n-content="update_status"></span>
+      </div>
+      <div>
+        <!-- TODO seanparent: fill in last checked. -->
+        <!-- <span i18n-content="last_check"></span> -->
+        <button disabled id="checkNow" i18n-content="check_now"></button>
+      </div>
+    </div>
+  </section>
+</div>
diff --git a/chrome/browser/resources/options/about_page.js b/chrome/browser/resources/options/about_page.js
new file mode 100644
index 0000000..a6490a3
--- /dev/null
+++ b/chrome/browser/resources/options/about_page.js
@@ -0,0 +1,75 @@
+// Copyright (c) 2010 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('options', function() {
+  const OptionsPage = options.OptionsPage;
+
+  /**
+   * Encapsulated handling of about page.
+   */
+  function AboutPage() {
+    OptionsPage.call(this, 'about', templateData.aboutPage, 'aboutPage');
+  }
+
+  cr.addSingletonGetter(AboutPage);
+
+  AboutPage.prototype = {
+    // Inherit AboutPage from OptionsPage.
+    __proto__: OptionsPage.prototype,
+
+    // Initialize AboutPage.
+    initializePage: function() {
+      // Call base class implementation to start preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
+
+      $('checkNow').onclick = function(event) {
+        chrome.send('CheckNow');
+      };
+
+      $('moreInfoButton').onclick = function(event) {
+        $('aboutPageLessInfo').classList.add('hidden');
+        $('aboutPageMoreInfo').classList.remove('hidden');
+      };
+
+      // Notify the handler that the page is ready.
+      chrome.send('PageReady');
+    },
+
+    // Update the Default Browsers section based on the current state.
+    updateOSVersion_: function(versionString) {
+      $('osVersion0').textContent = versionString;
+      $('osVersion1').textContent = versionString;
+    },
+
+    updateStatus_: function(message) {
+      $('updateStatus').textContent = message;
+    },
+
+    updateEnable_: function(enable) {
+      $('checkNow').disabled = !enable;
+    },
+  };
+
+  AboutPage.updateOSVersionCallback = function(versionString) {
+    AboutPage.getInstance().updateOSVersion_(versionString);
+  };
+
+  AboutPage.updateStatusCallback = function(message) {
+    AboutPage.getInstance().updateStatus_(message);
+  };
+
+  AboutPage.updateEnableCallback = function(enable) {
+    AboutPage.getInstance().updateEnable_(enable);
+  };
+
+  AboutPage.setUpdateImage = function(state) {
+    $('updateIcon').className= 'update-icon ' + state;
+  };
+
+  // Export
+  return {
+    AboutPage: AboutPage
+  };
+
+});
diff --git a/chrome/chrome_browser.gypi b/chrome/chrome_browser.gypi
index acaa5db..b42fa73 100644
--- a/chrome/chrome_browser.gypi
+++ b/chrome/chrome_browser.gypi
@@ -1132,6 +1132,8 @@
         'browser/dom_ui/bookmarks_ui.h',
         'browser/dom_ui/chrome_url_data_manager.cc',
         'browser/dom_ui/chrome_url_data_manager.h',
+        'browser/dom_ui/about_page_handler.cc',
+        'browser/dom_ui/about_page_handler.h',
         'browser/dom_ui/add_startup_page_handler.cc',
         'browser/dom_ui/add_startup_page_handler.h',
         'browser/dom_ui/advanced_options_handler.cc',
@@ -2978,6 +2980,7 @@
         ['chromeos==0', {
           'sources/': [
             ['exclude', '^browser/chromeos'],
+            ['exclude', 'browser/dom_ui/chrome_about_ui.cc'],
             ['exclude', 'browser/dom_ui/filebrowse_ui.cc'],
             ['exclude', 'browser/dom_ui/mediaplayer_ui.cc'],
             ['exclude', 'browser/dom_ui/slideshow_ui.cc'],
diff --git a/chrome/common/url_constants.cc b/chrome/common/url_constants.cc
index a2a32bd..5c391a8 100644
--- a/chrome/common/url_constants.cc
+++ b/chrome/common/url_constants.cc
@@ -62,6 +62,7 @@ const char kAboutVersionURL[] = "about:version";
 // to be used for testing.
 const char kAboutBrowserCrash[] = "about:inducebrowsercrashforrealz";
 
+const char kChromeUIAboutURL[] = "chrome://options/about";
 const char kChromeUIAppLauncherURL[] = "chrome://newtab/#mode=app-launcher";
 const char kChromeUIBookmarksURL[] = "chrome://bookmarks/";
 const char kChromeUIDevToolsURL[] = "chrome://devtools/";
diff --git a/chrome/common/url_constants.h b/chrome/common/url_constants.h
index f8c6fd4..732cc01 100644
--- a/chrome/common/url_constants.h
+++ b/chrome/common/url_constants.h
@@ -55,6 +55,7 @@ extern const char kAboutVersionURL[];
 
 // chrome: URLs (including schemes). Should be kept in sync with the
 // components below.
+extern const char kChromeUIAboutURL[];
 extern const char kChromeUIAppLauncherURL[];
 extern const char kChromeUIBookmarksURL[];
 extern const char kChromeUIDevToolsURL[];