Fixed the colour and layout logic of the App Info dialog heading

Added a colour to the version number and updated the font size to better
match the mocks. Also fixed a small bug in the logic that lays out the
name and version to place the version number on the next line if there
are no links (no webstore or license links) for the app.

Based off CL 335523002.

BUG=385423, 383720

Review URL: https://codereview.chromium.org/336333002

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

chrome/browser/ui/views/apps/app_info_dialog/app_info_header_panel.cc

@@ -23,6 +23,7 @@
 #include "grit/generated_resources.h"
 #include "net/base/url_util.h"
 #include "third_party/skia/include/core/SkBitmap.h"
+#include "ui/app_list/app_list_constants.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/geometry/size.h"
@@ -40,9 +41,17 @@
 #include "ui/views/view.h"
 #include "url/gurl.h"
 
+namespace {
+
 // Size of extension icon in top left of dialog.
 const int kIconSize = 64;
 
+// The number of pixels spacing between the app's title and version in the
+// dialog, when both are available.
+const int kSpacingBetweenAppTitleAndVersion = 4;
+
+}  // namespace
+
 AppInfoHeaderPanel::AppInfoHeaderPanel(Profile* profile,
                                        const extensions::Extension* app)
     : AppInfoPanel(profile, app),
@@ -70,14 +79,17 @@ void AppInfoHeaderPanel::CreateControls() {
   app_name_label_ =
       new views::Label(base::UTF8ToUTF16(app_->name()),
                        ui::ResourceBundle::GetSharedInstance().GetFontList(
-                           ui::ResourceBundle::BoldFont));
+                           ui::ResourceBundle::MediumFont));
   app_name_label_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
 
   // The version number doesn't make sense for bookmarked apps.
   if (!app_->from_bookmark()) {
     app_version_label_ =
-        new views::Label(base::UTF8ToUTF16(app_->VersionString()));
+        new views::Label(base::UTF8ToUTF16(app_->VersionString()),
+                         ui::ResourceBundle::GetSharedInstance().GetFontList(
+                             ui::ResourceBundle::MediumFont));
     app_version_label_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+    app_version_label_->SetEnabledColor(app_list::kDialogSubtitleColor);
   }
 
   app_icon_ = new views::ImageView();
@@ -114,14 +126,14 @@ void AppInfoHeaderPanel::LayoutAppNameAndVersionInto(views::View* parent_view) {
   static const int kColumnId = 1;
   views::ColumnSet* column_set = layout->AddColumnSet(kColumnId);
   column_set->AddColumn(views::GridLayout::LEADING,
-                        views::GridLayout::LEADING,
+                        views::GridLayout::TRAILING,
                         1,  // Stretch the title to as wide as needed
                         views::GridLayout::USE_PREF,
                         0,
                         0);
-  column_set->AddPaddingColumn(0, views::kRelatedControlSmallHorizontalSpacing);
+  column_set->AddPaddingColumn(0, kSpacingBetweenAppTitleAndVersion);
   column_set->AddColumn(views::GridLayout::LEADING,
-                        views::GridLayout::LEADING,
+                        views::GridLayout::TRAILING,
                         0,  // Do not stretch the version
                         views::GridLayout::USE_PREF,
                         0,
@@ -137,9 +149,10 @@ void AppInfoHeaderPanel::LayoutAppNameAndVersionInto(views::View* parent_view) {
 
 void AppInfoHeaderPanel::LayoutControls() {
   AddChildView(app_icon_);
-  if (!app_version_label_ && !view_in_store_link_) {
-    // If there's no link to the webstore _and_ no version, allow the app's name
-    // to take up multiple lines.
+  if (!app_version_label_ && !view_in_store_link_ && !licenses_link_) {
+    // If there's no version _and_ no links, allow the app's name to take up
+    // multiple lines.
+    // TODO(sashab): Limit the number of lines to 2.
     app_name_label_->SetMultiLine(true);
     AddChildView(app_name_label_);
   } else {
@@ -150,22 +163,23 @@ void AppInfoHeaderPanel::LayoutControls() {
     vertical_container_layout->set_main_axis_alignment(
         views::BoxLayout::MAIN_AXIS_ALIGNMENT_CENTER);
     vertical_info_container->SetLayoutManager(vertical_container_layout);
-    // Create a horizontal container to store the app's links.
-    views::View* horizontal_links_container = new views::View();
-    horizontal_links_container->SetLayoutManager(
-        new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0, 3));
-    if (view_in_store_link_)
-      horizontal_links_container->AddChildView(view_in_store_link_);
-    if (licenses_link_)
-      horizontal_links_container->AddChildView(licenses_link_);
-    // First line: title and (possibly) version. Second line: links (if any).
-    if (app_version_label_) {
-      LayoutAppNameAndVersionInto(vertical_info_container);
-    } else {
+
+    if (!view_in_store_link_ && !licenses_link_) {
+      // If there are no links, display the version on the second line.
       vertical_info_container->AddChildView(app_name_label_);
-    }
-    if (vertical_info_container->child_count() > 0)
+      vertical_info_container->AddChildView(app_version_label_);
+    } else {
+      LayoutAppNameAndVersionInto(vertical_info_container);
+      // Create a horizontal container to store the app's links.
+      views::View* horizontal_links_container = new views::View();
+      horizontal_links_container->SetLayoutManager(
+          new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0, 3));
+      if (view_in_store_link_)
+        horizontal_links_container->AddChildView(view_in_store_link_);
+      if (licenses_link_)
+        horizontal_links_container->AddChildView(licenses_link_);
       vertical_info_container->AddChildView(horizontal_links_container);
+    }
     AddChildView(vertical_info_container);
   }
 }

ui/app_list/app_list_constants.cc

@@ -14,6 +14,7 @@ const SkColor kBottomSeparatorColor = SkColorSetRGB(0xE5, 0xE5, 0xE5);
 
 // The color of the separator used inside dialogs in the app list.
 const SkColor kDialogSeparatorColor = SkColorSetRGB(0xD1, 0xD1, 0xD1);
+const SkColor kDialogSubtitleColor = SkColorSetRGB(0x77, 0x77, 0x77);
 
 // 6% black over kContentsBackgroundColor
 const SkColor kHighlightedColor = SkColorSetRGB(0xE6, 0xE6, 0xE6);

ui/app_list/app_list_constants.h

@@ -17,7 +17,9 @@ APP_LIST_EXPORT extern const SkColor kContentsSwitcherBackgroundColor;
 APP_LIST_EXPORT extern const SkColor kSearchBoxBackground;
 APP_LIST_EXPORT extern const SkColor kTopSeparatorColor;
 APP_LIST_EXPORT extern const SkColor kBottomSeparatorColor;
+
 APP_LIST_EXPORT extern const SkColor kDialogSeparatorColor;
+APP_LIST_EXPORT extern const SkColor kDialogSubtitleColor;
 
 APP_LIST_EXPORT extern const SkColor kHighlightedColor;
 APP_LIST_EXPORT extern const SkColor kSelectedColor;