Changes pinned tab throbbing indicator to a static image

chrome/browser/ui/views/tabs/tab.cc

 // Copyright (c) 2012 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/ui/views/tabs/tab.h"
 
 #include <stddef.h>
 #include <limits>
 #include <utility>
 
@@ skipping 19 matching lines @@
 #include "grit/theme_resources.h"
 #include "third_party/skia/include/effects/SkGradientShader.h"
 #include "third_party/skia/include/pathops/SkPathOps.h"
 #include "ui/accessibility/ax_view_state.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/material_design/material_design_controller.h"
 #include "ui/base/models/list_selection_model.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/base/theme_provider.h"
 #include "ui/gfx/animation/animation_container.h"
-#include "ui/gfx/animation/multi_animation.h"
 #include "ui/gfx/animation/throb_animation.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_analysis.h"
 #include "ui/gfx/favicon_size.h"
 #include "ui/gfx/geometry/rect_conversions.h"
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/path.h"
 #include "ui/gfx/scoped_canvas.h"
 #include "ui/gfx/skia_util.h"
@@ skipping 31 matching lines @@
 
 // How opaque to make the hover state (out of 1).
 const double kHoverOpacity = 0.33;
 
 // Opacity of the active tab background painted over inactive selected tabs.
 const double kSelectedTabOpacity = 0.3;
 
 // Inactive selected tabs have their throb value scaled by this.
 const double kSelectedTabThrobScale = 0.95 - kSelectedTabOpacity;
 
-// Offset from the right edge for the start of the pinned title change
-// animation.
-const int kPinnedTitleChangeInitialXOffset = 6;
-
 // Max number of images to cache. This has to be at least two since rounding
 // errors may lead to tabs in the same tabstrip having different sizes.
 // 8 = normal/incognito, active/inactive, 2 sizes within tabstrip.
 const size_t kMaxImageCacheSize = 8;
 
 // Height of the miniature tab strip in immersive mode.
 const int kImmersiveTabHeight = 3;
 
 // Height of the small tab indicator rectangles in immersive mode.
 const int kImmersiveBarHeight = 2;
@@ skipping 453 matching lines @@
   // to help avoid mis-clicks.
   close_button_->SetAnimationDuration(0);
   AddChildView(close_button_);
 
   set_context_menu_controller(this);
 
   const int kPulseDurationMs = 200;
   pulse_animation_->SetSlideDuration(kPulseDurationMs);
   pulse_animation_->SetContainer(animation_container_.get());
 
-  const int kPinnedTitleChangeAnimationDuration1MS = 1600;
-  const int kPinnedTitleChangeAnimationStart1MS = 0;
-  const int kPinnedTitleChangeAnimationEnd1MS = 1900;
-  const int kPinnedTitleChangeAnimationDuration2MS = 0;
-  const int kPinnedTitleChangeAnimationDuration3MS = 550;
-  const int kPinnedTitleChangeAnimationStart3MS = 150;
-  const int kPinnedTitleChangeAnimationEnd3MS = 800;
-  const int kPinnedTitleChangeAnimationIntervalMS = 40;
-  gfx::MultiAnimation::Parts parts;
-  parts.push_back(gfx::MultiAnimation::Part(
-      kPinnedTitleChangeAnimationDuration1MS,
-      kPinnedTitleChangeAnimationStart1MS,
-      kPinnedTitleChangeAnimationEnd1MS,
-      gfx::Tween::EASE_OUT));
-  parts.push_back(gfx::MultiAnimation::Part(
-      kPinnedTitleChangeAnimationDuration2MS,
-      gfx::Tween::ZERO));
-  parts.push_back(gfx::MultiAnimation::Part(
-      kPinnedTitleChangeAnimationDuration3MS,
-      kPinnedTitleChangeAnimationStart3MS,
-      kPinnedTitleChangeAnimationEnd3MS,
-      gfx::Tween::EASE_IN));
-  const base::TimeDelta timeout =
-      base::TimeDelta::FromMilliseconds(kPinnedTitleChangeAnimationIntervalMS);
-  pinned_title_change_animation_.reset(new gfx::MultiAnimation(parts, timeout));
-  pinned_title_change_animation_->SetContainer(animation_container_.get());
-  pinned_title_change_animation_->set_delegate(this);
-
   hover_controller_.SetAnimationContainer(animation_container_.get());
 }
 
 Tab::~Tab() {
 }
 
 bool Tab::IsActive() const {
   return controller_->IsActiveTab(this);
 }
 
@@ skipping 38 matching lines @@
   } else if (!should_display_crashed_favicon_ &&
              !crash_icon_animation_->is_animating()) {
     data_.alert_state = TabAlertState::NONE;
     crash_icon_animation_->Start();
   }
 
   if (data_.alert_state != old.alert_state)
     alert_indicator_button_->TransitionToAlertState(data_.alert_state);
 
   if (old.pinned != data_.pinned)
-    StopPinnedTabTitleAnimation();
+    showing_pinned_tab_title_changed_indicator_ = false;
 
   DataChanged(old);
 
   Layout();
   SchedulePaint();
 }
 
 void Tab::UpdateLoadingAnimation(TabRendererData::NetworkState state) {
   if (state == data_.network_state &&
       state == TabRendererData::NETWORK_STATE_NONE) {
     // If the network state is none and hasn't changed, do nothing. Otherwise we
     // need to advance the animation frame.
     return;
   }
 
   data_.network_state = state;
   AdvanceLoadingAnimation();
 }
 
 void Tab::StartPulse() {
   pulse_animation_->StartThrobbing(std::numeric_limits<int>::max());
 }
 
 void Tab::StopPulse() {
   pulse_animation_->Stop();
 }
 
-void Tab::StartPinnedTabTitleAnimation() {
-  if (data().pinned)
-    pinned_title_change_animation_->Start();
-}
+void Tab::SetPinnedTabTitleChangedIndicatorVisible(bool value) {
+  if (value == showing_pinned_tab_title_changed_indicator_)
+    return;
 
-void Tab::StopPinnedTabTitleAnimation() {
-  pinned_title_change_animation_->Stop();
+  DCHECK(!value || data().pinned);
+
+  showing_pinned_tab_title_changed_indicator_ = value;
+  SchedulePaint();
 }
 
 int Tab::GetWidthOfLargestSelectableRegion() const {
   // Assume the entire region to the left of the alert indicator and/or close
   // buttons is available for click-to-select.  If neither are visible, the
   // entire tab region is available.
   const int indicator_left =
       showing_alert_indicator_ ? alert_indicator_button_->x() : width();
   const int close_button_left = showing_close_button_ ?
       close_button_->x() : width();
@@ skipping 558 matching lines @@
 
 void Tab::PaintTabBackground(gfx::Canvas* canvas) {
   const int kActiveTabFillId = IDR_THEME_TOOLBAR;
   const bool has_custom_image =
       GetThemeProvider()->HasCustomImage(kActiveTabFillId);
   const int y_offset = -GetYInsetForActiveTabBackground();
   if (IsActive()) {
     PaintTabBackgroundUsingFillId(canvas, true, kActiveTabFillId,
                                   has_custom_image, y_offset);
   } else {
-    if (pinned_title_change_animation_->is_animating())
-      PaintInactiveTabBackgroundWithTitleChange(canvas);
-    else
-      PaintInactiveTabBackground(canvas);
+    PaintInactiveTabBackground(canvas);
 
     const double throb_value = GetThrobValue();
     if (throb_value > 0) {
       canvas->SaveLayerAlpha(gfx::ToRoundedInt(throb_value * 0xff),
                              GetLocalBounds());
       PaintTabBackgroundUsingFillId(canvas, true, kActiveTabFillId,
                                     has_custom_image, y_offset);
       canvas->Restore();
     }
   }
 }
 
-void Tab::PaintInactiveTabBackgroundWithTitleChange(gfx::Canvas* canvas) {
-  const int kPinnedTitleChangeGradientRadius = 20;
-  const float radius = kPinnedTitleChangeGradientRadius;
-  double x = radius;
-  SkColor hover_color =
-      GetThemeProvider()->GetColor(ThemeProperties::COLOR_TOOLBAR);
-  if (pinned_title_change_animation_->current_part_index() == 0) {
-    x = pinned_title_change_animation_->CurrentValueBetween(
-            width() + radius - kPinnedTitleChangeInitialXOffset, radius);
-  } else if (pinned_title_change_animation_->current_part_index() == 2) {
-    x = pinned_title_change_animation_->CurrentValueBetween(radius, -radius);
-    const int alpha =
-        pinned_title_change_animation_->CurrentValueBetween(255, 0);
-    hover_color = SkColorSetA(hover_color, static_cast<SkAlpha>(alpha));
-  }
-  SkPoint p;
-  p.set(SkDoubleToScalar(x), 0);
-  if (ui::MaterialDesignController::IsModeMaterial()) {
-    PaintInactiveTabBackground(canvas);
-    gfx::ScopedCanvas scoped_canvas(canvas);
-    const float scale = canvas->UndoDeviceScaleFactor();
-    SkPath fill;
-    GetFillPath(scale, &fill);
-    canvas->ClipPath(fill, true);
-    p.scale(SkFloatToScalar(scale));
-    DrawHighlight(canvas, p, SkFloatToScalar(radius * scale), hover_color);
-  } else {
-    gfx::Canvas background_canvas(size(), canvas->image_scale(), false);
-    PaintInactiveTabBackground(&background_canvas);
-    gfx::ImageSkia background_image(background_canvas.ExtractImageRep());
-    canvas->DrawImageInt(background_image, 0, 0);
-    gfx::Canvas hover_canvas(size(), canvas->image_scale(), false);
-    DrawHighlight(&hover_canvas, p, SkFloatToScalar(radius), hover_color);
-    gfx::ImageSkia hover_image = gfx::ImageSkiaOperations::CreateMaskedImage(
-        gfx::ImageSkia(hover_canvas.ExtractImageRep()), background_image);
-    canvas->DrawImageInt(hover_image, 0, 0);
-  }
-}
-
 void Tab::PaintInactiveTabBackground(gfx::Canvas* canvas) {
   bool has_custom_image;
   int fill_id = controller_->GetBackgroundResourceId(&has_custom_image);
 
   // If the theme is providing a custom background image, then its top edge
   // should be at the top of the tab. Otherwise, we assume that the background
   // image is a composited foreground + frame image.  Note that if the theme is
   // only providing a custom frame image, |has_custom_image| will be true, but
   // we should use the |background_offset_| here.
   const ui::ThemeProvider* tp = GetThemeProvider();
@@ skipping 162 matching lines @@
 void Tab::PaintIcon(gfx::Canvas* canvas) {
   gfx::Rect bounds = favicon_bounds_;
   bounds.set_x(GetMirroredXForRect(bounds));
   bounds.Offset(0, favicon_hiding_offset_);
   bounds.Intersect(GetContentsBounds());
   if (bounds.IsEmpty())
     return;
 
   if (data().network_state != TabRendererData::NETWORK_STATE_NONE) {
     // Throbber will do its own painting.
-  } else {
-    const gfx::ImageSkia& favicon = should_display_crashed_favicon_ ?
-        *ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
-            IDR_CRASH_SAD_FAVICON) :
-        data().favicon;
-    if (!favicon.isNull()) {
-      canvas->DrawImageInt(favicon, 0, 0, bounds.width(), bounds.height(),
-                           bounds.x(), bounds.y(), bounds.width(),
-                           bounds.height(), false);
+    return;
+  }
+  gfx::ImageSkia favicon =
+      should_display_crashed_favicon_
+          ? *ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
+                IDR_CRASH_SAD_FAVICON)
+          : data().favicon;
+
+  // The pinned tab title changed indicator consists of two parts:
+  // . a clear (totally transparent) part over the bottom right (or left in rtl)
+  //   of the favicon. This is done by drawing the favicon to a canvas, then
+  //   drawing the clear part on top of the favicon.
+  // . a circle in the bottom right (or left in rtl) of the favicon.
+  if (!favicon.isNull()) {
+    if (showing_pinned_tab_title_changed_indicator_ &&
+        !should_display_crashed_favicon_) {
+      const float kIndicatorCropRadius = 4.5;
+      gfx::Canvas icon_canvas(gfx::Size(gfx::kFaviconSize, gfx::kFaviconSize),
+                              canvas->image_scale(), false);
+      icon_canvas.DrawImageInt(favicon, 0, 0);
+      SkPaint clear_paint;
+      clear_paint.setAntiAlias(true);
+      clear_paint.setStyle(SkPaint::kFill_Style);
+      clear_paint.setXfermodeMode(SkXfermode::kClear_Mode);
+      const int circle_x = base::i18n::IsRTL() ? 0 : gfx::kFaviconSize;

[Evan Stade, 2016/06/24 17:09:39]

the spec makes me think the indicator/crop area should actually be centered at
15.5 rather than 16

[sky, 2016/06/24 17:41:15]

I sent Sebastien images of what this code looks like and he liked it.

+      icon_canvas.DrawCircle(gfx::PointF(circle_x, gfx::kFaviconSize),
+                             kIndicatorCropRadius, clear_paint);
+      favicon = gfx::ImageSkia(icon_canvas.ExtractImageRep());

[Evan Stade, 2016/06/24 17:09:39]

I think it would be a little simpler (slightly fewer LOC, fewer conditional
blocks) to do

if (showing_pinned[...]) {
  DrawFavicon
  ClearArea
  DrawIndicator
} else {
  DrawFavicon
}

You don't get to share DrawFavicon but that's only one line anyway.

[sky, 2016/06/24 17:41:15]

Only one line, but a long one:) I moved the indicator drawing into a separate
function. Better?

[Evan Stade, 2016/06/24 17:58:13]

yes, thanks

     }
+    canvas->DrawImageInt(favicon, 0, 0, bounds.width(), bounds.height(),
+                         bounds.x(), bounds.y(), bounds.width(),
+                         bounds.height(), false);
+  }
+
+  // Draws the actual pinned tab title changed indicator.
+  if (showing_pinned_tab_title_changed_indicator_ &&
+      !should_display_crashed_favicon_) {
+    const int kIndicatorRadius = 3;
+    const SkColor kIndicatorColor = SkColorSetRGB(0x42, 0x85, 0xF4);

[Evan Stade, 2016/06/24 17:09:39]

I suspect you want NativeTheme::kColorId_CallToActionColor (which is this value
on the normal theme but differs in incognito or in GTK theme contexts)

[sky, 2016/06/24 17:41:15]

Done.

+    SkPaint indicator_paint;
+    indicator_paint.setColor(kIndicatorColor);
+    indicator_paint.setAntiAlias(true);
+    indicator_paint.setStyle(SkPaint::kFill_Style);
+    indicator_paint.setXfermodeMode(SkXfermode::kSrcOver_Mode);
+    const int indicator_x = GetMirroredXWithWidthInView(
+        favicon_bounds_.right() - kIndicatorRadius, kIndicatorRadius * 2);
+    const int indicator_y = favicon_bounds_.bottom() - kIndicatorRadius;
+    canvas->DrawCircle(gfx::Point(indicator_x + kIndicatorRadius,
+                                  indicator_y + kIndicatorRadius),
+                       kIndicatorRadius, indicator_paint);
   }
 }
 
 void Tab::AdvanceLoadingAnimation() {
   const TabRendererData::NetworkState state = data().network_state;
   if (controller_->IsImmersiveStyle()) {
     throbber_->SetVisible(false);
     if (state == TabRendererData::NETWORK_STATE_WAITING) {
       // Waiting steps backwards.
       immersive_loading_step_ =
@@ skipping 84 matching lines @@
   return !data().pinned ||
       (width() >= (GetPinnedWidth() + kPinnedTabExtraWidthToRenderAsNormal));
 }
 
 double Tab::GetThrobValue() {
   const bool is_selected = IsSelected();
   double val = is_selected ? kSelectedTabOpacity : 0;
   const double offset =
       is_selected ? (kSelectedTabThrobScale * kHoverOpacity) : kHoverOpacity;
 
-  // Showing both the pulse and title change animation at the same time is too
-  // much.
-  if (pulse_animation_->is_animating() &&
-      !pinned_title_change_animation_->is_animating()) {
+  if (pulse_animation_->is_animating())
     val += pulse_animation_->GetCurrentValue() * offset;
-  } else if (hover_controller_.ShouldDraw()) {
+  else if (hover_controller_.ShouldDraw())
     val += hover_controller_.GetAnimationValue() * offset;
-  }
   return val;
 }
 
 void Tab::SetFaviconHidingOffset(int offset) {
   favicon_hiding_offset_ = offset;
   ScheduleIconPaint();
 }
 
 void Tab::OnButtonColorMaybeChanged() {
   // The theme provider may be null if we're not currently in a widget
@@ skipping 137 matching lines @@
   inactive_images_.image_c = rb.GetImageSkiaNamed(IDR_TAB_INACTIVE_CENTER);
   inactive_images_.image_r = rb.GetImageSkiaNamed(IDR_TAB_INACTIVE_RIGHT);
   inactive_images_.l_width = inactive_images_.image_l->width();
   inactive_images_.r_width = inactive_images_.image_r->width();
 
   mask_images_.image_l = rb.GetImageSkiaNamed(IDR_TAB_ALPHA_LEFT);
   mask_images_.image_r = rb.GetImageSkiaNamed(IDR_TAB_ALPHA_RIGHT);
   mask_images_.l_width = mask_images_.image_l->width();
   mask_images_.r_width = mask_images_.image_r->width();
 }