Show Play Store rating and price in app list

ui/app_list/views/search_result_tile_item_view.cc

Index: ui/app_list/views/search_result_tile_item_view.cc
diff --git a/ui/app_list/views/search_result_tile_item_view.cc b/ui/app_list/views/search_result_tile_item_view.cc
index 088e638b811295a7a463e12ede36f9360a316c4c..f8ff755f34b6371f47c21b9a7d07c44df9458fae 100644
--- a/ui/app_list/views/search_result_tile_item_view.cc
+++ b/ui/app_list/views/search_result_tile_item_view.cc
@@ -4,6 +4,7 @@
 
 #include "ui/app_list/views/search_result_tile_item_view.h"
 
+#include "base/i18n/number_formatting.h"
 #include "ui/app_list/app_list_constants.h"
 #include "ui/app_list/app_list_features.h"
 #include "ui/app_list/app_list_view_delegate.h"
@@ -23,11 +24,17 @@ constexpr int kRecommendationIconTopPadding = 24;
 constexpr int kRecommendationTitleSpacing = 10;
 constexpr int kRecommendationTileMaxWidth = 80;
 
+constexpr int kSearchTileWidth = 80;
+constexpr int kSearchTileHeight = 92;
 constexpr int kSearchTileTopPadding = 4;
 constexpr int kSearchTitleSpacing = 6;
 
 constexpr SkColor kRecommendationTileColor = SK_ColorWHITE;
 
+constexpr SkColor kSearchTitleColor = SkColorSetA(SK_ColorBLACK, 223);
+constexpr SkColor kSearchAppRatingColor = SkColorSetA(SK_ColorBLACK, 143);
+constexpr SkColor kSearchAppPriceColor = SkColorSetRGB(0x0F, 0x9D, 0x58);
+
 }  // namespace
 
 SearchResultTileItemView::SearchResultTileItemView(
@@ -35,12 +42,34 @@ SearchResultTileItemView::SearchResultTileItemView(
     AppListViewDelegate* view_delegate)
     : result_container_(result_container),
       item_(nullptr),
+      rating_(nullptr),
+      price_(nullptr),
       view_delegate_(view_delegate),
       is_fullscreen_app_list_enabled_(features::IsFullscreenAppListEnabled()) {
   // When |item_| is null, the tile is invisible. Calling SetSearchResult with a
   // non-null item makes the tile visible.
   SetVisible(false);
 
+  if (is_fullscreen_app_list_enabled_) {
+    gfx::FontList base_font =

[xiyuan, 2017/06/22 17:07:34]

nit: gfx::FontList -> const gfx::FontList&, to save a copy

[weidongg, 2017/06/22 17:58:29]

Done.

+        ui::ResourceBundle::GetSharedInstance().GetFontList(
+            ui::ResourceBundle::BaseFont);
+
+    rating_ = new views::Label;
+    rating_->SetEnabledColor(kSearchAppRatingColor);
+    rating_->SetFontList(base_font);
+    rating_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+    rating_->SetVisible(false);
+    AddChildView(rating_);
+
+    price_ = new views::Label;
+    price_->SetEnabledColor(kSearchAppPriceColor);
+    price_->SetFontList(base_font);
+    price_->SetHorizontalAlignment(gfx::ALIGN_RIGHT);
+    price_->SetVisible(false);
+    AddChildView(price_);
+  }
+
   set_context_menu_controller(this);
 }
 
@@ -68,14 +97,20 @@ void SearchResultTileItemView::SetSearchResult(SearchResult* item) {
   item_->AddObserver(this);
 
   SetTitle(item_->title());
+  SetRating(item_->rating());
+  SetPrice(item_->price());
 
   // Customize title UI
   gfx::FontList base_font = ui::ResourceBundle::GetSharedInstance().GetFontList(

[xiyuan, 2017/06/22 17:07:34]

nit: ditto, const gfx::FontList&

and move it inside "if (is_fullscreen_app_list_enabled_)" since it is only used
there.

[weidongg, 2017/06/22 17:58:29]

Done.

       ui::ResourceBundle::BaseFont);
-  if (is_fullscreen_app_list_enabled_ &&
-      item_->display_type() == SearchResult::DISPLAY_RECOMMENDATION) {
-    title()->SetFontList(base_font.DeriveWithSizeDelta(1));
-    title()->SetEnabledColor(kRecommendationTileColor);
+  if (is_fullscreen_app_list_enabled_) {
+    if (item_->display_type() == SearchResult::DISPLAY_RECOMMENDATION) {
+      title()->SetFontList(base_font.DeriveWithSizeDelta(1));
+      title()->SetEnabledColor(kRecommendationTileColor);
+    } else if (item_->display_type() == SearchResult::DISPLAY_TILE) {
+      title()->SetFontList(base_font.DeriveWithSizeDelta(1));
+      title()->SetEnabledColor(kSearchTitleColor);
+    }
   }
 
   // Only refresh the icon if it's different from the old one. This prevents
@@ -85,6 +120,32 @@ void SearchResultTileItemView::SetSearchResult(SearchResult* item) {
   }
 }
 
+void SearchResultTileItemView::SetRating(float rating) {
+  if (!rating_)
+    return;
+
+  if (rating < 0) {
+    rating_->SetVisible(false);
+    return;
+  }
+
+  rating_->SetText(base::FormatDouble(rating, 1));
+  rating_->SetVisible(true);
+}
+
+void SearchResultTileItemView::SetPrice(const base::string16& price) {
+  if (!price_)
+    return;
+
+  if (price.empty()) {
+    price_->SetVisible(false);
+    return;
+  }
+
+  price_->SetText(price);
+  price_->SetVisible(true);
+}
+
 void SearchResultTileItemView::ButtonPressed(views::Button* sender,
                                              const ui::Event& event) {
   view_delegate_->OpenSearchResult(item_, false, event.flags());
@@ -107,6 +168,14 @@ void SearchResultTileItemView::OnBadgeIconChanged() {
   SetBadgeIcon(item_->badge_icon());
 }
 
+void SearchResultTileItemView::OnRatingChanged() {
+  SetRating(item_->rating());
+}
+
+void SearchResultTileItemView::OnPriceChanged() {
+  SetPrice(item_->price());
+}
+
 void SearchResultTileItemView::OnResultDestroying() {
   // The menu comes from |item_|. If we're showing a menu we need to cancel it.
   context_menu_runner_.reset();
@@ -173,15 +242,31 @@ void SearchResultTileItemView::Layout() {
     rect.Inset(0, kGridIconDimension + kSearchTitleSpacing, 0, 0);
     rect.set_height(title()->GetPreferredSize().height());
     title()->SetBoundsRect(rect);
+
+    if (rating_) {
+      gfx::Rect rating_rect(rect);
+      rating_rect.Inset(0, title()->GetPreferredSize().height(), 0, 0);
+      rating_rect.set_height(rating_->GetPreferredSize().height());
+      rating_->SetBoundsRect(rating_rect);
+    }
+
+    if (price_) {
+      gfx::Rect price_rect(rect);
+      price_rect.Inset(0, title()->GetPreferredSize().height(), 0, 0);

[xiyuan, 2017/06/22 17:07:34]

Would this overlap with |reating_rect|?

[weidongg, 2017/06/22 17:58:30]

Yes, it is overlapping with rating_rect. I want to find a way to make rating
align left and price align right. But if I set the width of price to preferred
width, then the price ends up aligning left. It seems the
"price_->SetHorizontalAlignment(gfx::ALIGN_RIGHT)" only apply to the alignment
of text inside the label.

[xiyuan, 2017/06/22 18:17:21]

I see.

I would recommend creating a container view and use a horizontal BoxLayout with
a padding view in middle for that. We can revisit this in the future if those
two needs to interact with mouse/touch.

+      price_rect.set_height(price_->GetPreferredSize().height());
+      price_->SetBoundsRect(price_rect);
+    }
   } else {
     TileItemView::Layout();
   }
 }
 
 gfx::Size SearchResultTileItemView::CalculatePreferredSize() const {
-  if (is_fullscreen_app_list_enabled_ && item_ &&
-      item_->display_type() == SearchResult::DISPLAY_RECOMMENDATION) {
-    return gfx::Size(kRecommendationTileWidth, kRecommendationTileHeight);
+  if (is_fullscreen_app_list_enabled_ && item_) {
+    if (item_->display_type() == SearchResult::DISPLAY_RECOMMENDATION)
+      return gfx::Size(kRecommendationTileWidth, kRecommendationTileHeight);
+    if (item_->display_type() == SearchResult::DISPLAY_TILE)
+      return gfx::Size(kSearchTileWidth, kSearchTileHeight);
   }
 
   return TileItemView::CalculatePreferredSize();