[Contextual Search] Animate thumbnail appearance

chrome/browser/android/compositor/layer/contextual_search_layer.cc

 // Copyright 2014 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/android/compositor/layer/contextual_search_layer.h"
 
 #include "cc/layers/layer.h"
 #include "cc/layers/nine_patch_layer.h"
 #include "cc/layers/solid_color_layer.h"
 #include "cc/layers/ui_resource_layer.h"
@@ skipping 20 matching lines @@
 
 namespace chrome {
 namespace android {
 
 // static
 scoped_refptr<ContextualSearchLayer> ContextualSearchLayer::Create(
     ui::ResourceManager* resource_manager) {
   return make_scoped_refptr(new ContextualSearchLayer(resource_manager));
 }
 
-scoped_refptr<cc::Layer> ContextualSearchLayer::GetIconLayer() {
-  scoped_refptr<cc::Layer> icon = nullptr;
-
-  // Thumbnail.
-  if (thumbnail_visible_) {
-    if (thumbnail_layer_->parent() != layer_)
-          layer_->AddChild(thumbnail_layer_);
-
-    icon = thumbnail_layer_;
-  } else if (thumbnail_layer_->parent()) {
-    thumbnail_layer_->RemoveFromParent();
-  }
-
-  // Search Provider Icon Sprite (Animated).
-  if (search_provider_icon_sprite_visible_) {
-    if (search_provider_icon_sprite_->layer()->parent() != layer_)
-      layer_->AddChild(search_provider_icon_sprite_->layer().get());
-
-    search_provider_icon_sprite_->DrawSpriteFrame(
-        resource_manager_,
-        panel_icon_resource_id_,
-        search_provider_icon_sprite_metadata_resource_id_,
-        search_provider_icon_sprite_completion_percentage_);
-    icon = search_provider_icon_sprite_->layer();
-  } else if (search_provider_icon_sprite_->layer().get() &&
-      search_provider_icon_sprite_->layer()->parent()) {
-    search_provider_icon_sprite_->layer()->RemoveFromParent();
-  }
-
-  return icon;
-}
-
 void ContextualSearchLayer::SetProperties(
     int panel_shadow_resource_id,
     int search_context_resource_id,
     int search_term_resource_id,
     int search_caption_resource_id,
     int search_bar_shadow_resource_id,
     int panel_icon_resource_id,
     int search_provider_icon_sprite_metadata_resource_id,
     int arrow_up_resource_id,
     int close_icon_resource_id,
@@ skipping 23 matching lines @@
     float search_term_opacity,
     float search_caption_animation_percentage,
     bool search_caption_visible,
     bool search_bar_border_visible,
     float search_bar_border_height,
     bool search_bar_shadow_visible,
     float search_bar_shadow_opacity,
     bool search_provider_icon_sprite_visible,
     float search_provider_icon_sprite_completion_percentage,
     bool thumbnail_visible,
+    float thumbnail_visibility_percentage,
     int thumbnail_size,
     float arrow_icon_opacity,
     float arrow_icon_rotation,
     float close_icon_opacity,
     bool progress_bar_visible,
     float progress_bar_height,
     float progress_bar_opacity,
     int progress_bar_completion) {
 
-  search_provider_icon_sprite_visible_ = search_provider_icon_sprite_visible;
-  search_provider_icon_sprite_metadata_resource_id_ =
-      search_provider_icon_sprite_metadata_resource_id;
-  search_provider_icon_sprite_completion_percentage_ =
-      search_provider_icon_sprite_completion_percentage;
-
-  thumbnail_visible_ = thumbnail_visible;
-  thumbnail_size_ = thumbnail_size;
-
   // Grabs the dynamic Search Context resource.
   ui::ResourceManager::Resource* search_context_resource =
       resource_manager_->GetResource(ui::ANDROID_RESOURCE_TYPE_DYNAMIC,
                                      search_context_resource_id);
 
   // Round values to avoid pixel gap between layers.
   search_bar_height = floor(search_bar_height);
 
   float search_bar_top = search_peek_promo_height;
   float search_bar_bottom = search_bar_top + search_bar_height;
@@ skipping 318 matching lines @@
     progress_bar_->SetPosition(gfx::PointF(0.f, progress_bar_y));
     progress_bar_->SetOpacity(progress_bar_opacity);
   } else {
     // Removes Progress Bar and its Background from the Layer Tree.
     if (progress_bar_background_.get() && progress_bar_background_->parent())
       progress_bar_background_->RemoveFromParent();
 
     if (progress_bar_.get() && progress_bar_->parent())
       progress_bar_->RemoveFromParent();
   }
+
+  // ---------------------------------------------------------------------------
+  // Icon Layer
+  // ---------------------------------------------------------------------------
+  thumbnail_size_ = thumbnail_size;
+  SetupIconLayer(search_provider_icon_sprite_visible,
+                 search_provider_icon_sprite_metadata_resource_id,
+                 search_provider_icon_sprite_completion_percentage,
+                 thumbnail_visible,
+                 thumbnail_visibility_percentage);
+}
+
+scoped_refptr<cc::Layer> ContextualSearchLayer::GetIconLayer() {
+  return icon_layer_;
+}
+
+void ContextualSearchLayer::SetupIconLayer(
+    bool search_provider_icon_sprite_visible,
+    int search_provider_icon_sprite_metadata_resource_id,
+    float search_provider_icon_sprite_completion_percentage,
+    bool thumbnail_visible,
+    float thumbnail_visibility_percentage) {
+  icon_layer_->SetBounds(gfx::Size(thumbnail_size_, thumbnail_size_));
+  icon_layer_->SetMasksToBounds(true);
+
+  // Thumbnail
+  if (thumbnail_visible) {
+    if (thumbnail_layer_->parent() != icon_layer_)
+          icon_layer_->AddChild(thumbnail_layer_);
+
+    thumbnail_layer_->SetOpacity(thumbnail_visibility_percentage);
+
+    float thumbnail_y_offset =
+        thumbnail_size_ * (1.f - thumbnail_visibility_percentage);

[Donn Denman, 2016/09/23 04:05:23]

Why is the thumbnail_size_ involved here?

[Donn Denman, 2016/09/23 04:08:21]

Elaborating my question ... maybe the available space instead, e.g. bar height
would be better?  I'm worried that a small or large image might affect the
positioning and where it animates to/from. 

[Theresa, 2016/09/23 04:39:57]

Good question.

The thumbnail and 'G' icon slide through their parent container, which acts as a
36dp x 36dp window. thumbnail_size_ (36dp) is used to set bounds on the
container and is therefore the available space. There's a video linked in the
bug of what this looks like. 

The thumbnail itself is bounded to 36dp x 36dp, so it can't be larger than the
available space. If it takes up the full space, the top offset for the thumbnail
should change from 36dp to 0dp.

I do need to modify this for smaller images, though, since the code below
vertically or horizontally centers images that have a minimum side < 36dp. I'll
use two variables to keep track of the thumbnail top and side margin. This code
will animate the y-position from (36dp + top_margin) to (top_margin). The side
margin will be applied instead of 0.f for the x-position

[Theresa, 2016/09/23 15:45:46]

Done. I also added some comments so hopefully this is more clear.

+    thumbnail_layer_->SetPosition(gfx::PointF(0.f, thumbnail_y_offset));
+  } else if (thumbnail_layer_->parent()) {
+    thumbnail_layer_->RemoveFromParent();
+  }
+
+  // Search Provider Icon Sprite
+  if (search_provider_icon_sprite_visible) {
+    if (search_provider_icon_sprite_->layer()->parent() != icon_layer_)
+      icon_layer_->AddChild(search_provider_icon_sprite_->layer().get());
+
+    search_provider_icon_sprite_->DrawSpriteFrame(
+        resource_manager_,
+        panel_icon_resource_id_,
+        search_provider_icon_sprite_metadata_resource_id,
+        search_provider_icon_sprite_completion_percentage);
+
+    if (thumbnail_visibility_percentage > 0.f) {
+      search_provider_icon_sprite_->layer()->SetOpacity(
+          1.f - thumbnail_visibility_percentage);
+
+      float icon_y_offset =
+          -(thumbnail_size_ * thumbnail_visibility_percentage);
+      search_provider_icon_sprite_->layer()->SetPosition(
+          gfx::PointF(0.f, icon_y_offset));
+    } else {

[Donn Denman, 2016/09/23 04:05:23]

Nit suggestion: I would think that this else clause wouldn't be needed, because
all the calculations would just pin to these hard-coded values.  Then you
wouldn't need the "If" either.  You could replace them with DCHECKS if you want
to be sure.

[Theresa, 2016/09/23 15:45:46]

Done.

+      search_provider_icon_sprite_->layer()->SetOpacity(1.f);
+      search_provider_icon_sprite_->layer()->SetPosition(
+          gfx::PointF(0.f, 0.f));
+    }
+
+  } else if (search_provider_icon_sprite_->layer().get() &&
+      search_provider_icon_sprite_->layer()->parent()) {
+    search_provider_icon_sprite_->layer()->RemoveFromParent();
+  }
 }
 
 void ContextualSearchLayer::SetThumbnail(const SkBitmap* thumbnail) {
   // Determine the scaled thumbnail width and height. If both the height and
   // width of |thumbnail| are larger than |thumbnail_size_|, the thumbnail will
   // be scaled down by a call to Layer::SetBounds() below.
   int min_dimension = std::min(thumbnail->width(), thumbnail->height());
   int scaled_thumbnail_width = thumbnail->width();
   int scaled_thumbnail_height = thumbnail->height();
   if (min_dimension > thumbnail_size_) {
@@ skipping 61 matching lines @@
   thumbnail_layer_->SetBounds(gfx::Size(layer_width, layer_height));
   thumbnail_layer_->SetPosition(gfx::PointF(x_pos, y_pos));
   thumbnail_layer_->SetUV(gfx::PointF(top_left_x, top_left_y),
                           gfx::PointF(bottom_right_x, bottom_right_y));
 }
 
 ContextualSearchLayer::ContextualSearchLayer(
     ui::ResourceManager* resource_manager)
     : OverlayPanelLayer(resource_manager),
       search_context_(cc::UIResourceLayer::Create()),
+      icon_layer_(cc::Layer::Create()),
       search_provider_icon_sprite_(CrushedSpriteLayer::Create()),
       thumbnail_layer_(cc::UIResourceLayer::Create()),
       arrow_icon_(cc::UIResourceLayer::Create()),
       search_promo_(cc::UIResourceLayer::Create()),
       search_promo_container_(cc::SolidColorLayer::Create()),
       peek_promo_container_(cc::SolidColorLayer::Create()),
       peek_promo_ripple_(cc::NinePatchLayer::Create()),
       peek_promo_text_(cc::UIResourceLayer::Create()),
       progress_bar_(cc::NinePatchLayer::Create()),
       progress_bar_background_(cc::NinePatchLayer::Create()),
@@ skipping 25 matching lines @@
   search_promo_->SetIsDrawable(true);
 
   // Progress Bar Background
   progress_bar_background_->SetIsDrawable(true);
   progress_bar_background_->SetFillCenter(true);
 
   // Progress Bar
   progress_bar_->SetIsDrawable(true);
   progress_bar_->SetFillCenter(true);
 
+  // Icon
+  icon_layer_->SetIsDrawable(true);
+  layer_->AddChild(icon_layer_);
+
   // Thumbnail
   thumbnail_layer_->SetIsDrawable(true);
 }
 
 ContextualSearchLayer::~ContextualSearchLayer() {
 }
 
 }  //  namespace android
 }  //  namespace chrome