Update voice interaction icon shadow
Use MD style shadow, also refactored how MD shadow values
are created.
BUG=b:35624617
TEST=build and flash locally, saw the shadow changes
Review-Url: https://codereview.chromium.org/2951583002
Cr-Commit-Position: refs/heads/master@{#481330}
diff --git a/ash/shelf/voice_interaction_overlay.cc b/ash/shelf/voice_interaction_overlay.cc
index caecc575..2160238 100644
--- a/ash/shelf/voice_interaction_overlay.cc
+++ b/ash/shelf/voice_interaction_overlay.cc
@@ -39,6 +39,7 @@
#include "ui/gfx/image/image_skia_operations.h"
#include "ui/gfx/paint_vector_icon.h"
#include "ui/gfx/scoped_canvas.h"
+#include "ui/gfx/skia_paint_util.h"
#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
#include "ui/views/animation/ink_drop_impl.h"
#include "ui/views/animation/ink_drop_mask.h"
@@ -73,55 +74,29 @@
constexpr float kBackgroundSizeDip = 48.f;
constexpr int kBackgroundStartDelayMs = 100;
constexpr int kBackgroundOpacityDurationMs = 200;
-constexpr float kBackgroundShadowSizeDip = 12;
-
-class CircleImageSource : public gfx::CanvasImageSource {
- public:
- CircleImageSource(float radius, float padding)
- : CanvasImageSource(
- gfx::Size((radius + padding) * 2, (radius + padding) * 2),
- false),
- radius_(radius),
- padding_(padding) {}
- ~CircleImageSource() override {}
-
- private:
- void Draw(gfx::Canvas* canvas) override {
- cc::PaintFlags flags;
- flags.setColor(SK_ColorWHITE);
- flags.setAntiAlias(true);
- flags.setStyle(cc::PaintFlags::kFill_Style);
- canvas->DrawCircle(gfx::PointF(radius_ + padding_, radius_ + padding_),
- radius_, flags);
- }
-
- float radius_;
- float padding_;
-
- DISALLOW_COPY_AND_ASSIGN(CircleImageSource);
-};
+constexpr float kBackgroundShadowElevationDip = 24.f;
class VoiceInteractionIconBackground : public ui::Layer,
public ui::LayerDelegate {
public:
- VoiceInteractionIconBackground()
- : Layer(ui::LAYER_NOT_DRAWN),
- shadow_values_(1,
- gfx::ShadowValue(gfx::Vector2d(0, 0),
- kBackgroundShadowSizeDip,
- SkColorSetARGB(0x54, 0, 0, 0))) {
+ VoiceInteractionIconBackground() : Layer(ui::LAYER_NOT_DRAWN) {
set_name("VoiceInteractionOverlay:BACKGROUND_LAYER");
SetBounds(gfx::Rect(0, 0, kBackgroundInitSizeDip, kBackgroundInitSizeDip));
SetFillsBoundsOpaquely(false);
SetMasksToBounds(false);
+ shadow_values_ =
+ gfx::ShadowValue::MakeMdShadowValues(kBackgroundShadowElevationDip);
+ const gfx::Insets shadow_margin =
+ gfx::ShadowValue::GetMargin(shadow_values_);
+
shadow_layer_.reset(new ui::Layer());
shadow_layer_->set_delegate(this);
shadow_layer_->SetFillsBoundsOpaquely(false);
shadow_layer_->SetBounds(
- gfx::Rect(-kBackgroundShadowSizeDip, -kBackgroundShadowSizeDip,
- kBackgroundInitSizeDip + kBackgroundShadowSizeDip * 2,
- kBackgroundInitSizeDip + kBackgroundShadowSizeDip * 2));
+ gfx::Rect(shadow_margin.left(), shadow_margin.top(),
+ kBackgroundInitSizeDip - shadow_margin.width(),
+ kBackgroundInitSizeDip - shadow_margin.height()));
Add(shadow_layer_.get());
}
~VoiceInteractionIconBackground() override{};
@@ -131,17 +106,18 @@
// Radius is based on the parent layer size, the shadow layer is expanded
// to make room for the shadow.
float radius = size().width() / 2.f;
- CircleImageSource* circle_image =
- new CircleImageSource(radius, kBackgroundShadowSizeDip);
- gfx::ImageSkia background_with_shadow =
- gfx::ImageSkiaOperations::CreateImageWithDropShadow(
- gfx::ImageSkia(circle_image, circle_image->size()), shadow_values_);
- ui::PaintRecorder recorder(context, background_with_shadow.size());
+ ui::PaintRecorder recorder(context, shadow_layer_->size());
gfx::Canvas* canvas = recorder.canvas();
- float shadow_offset =
- (shadow_layer_->size().width() - background_with_shadow.width()) / 2.f;
- canvas->DrawImageInt(background_with_shadow, shadow_offset, shadow_offset);
+
+ cc::PaintFlags flags;
+ flags.setColor(SK_ColorWHITE);
+ flags.setAntiAlias(true);
+ flags.setStyle(cc::PaintFlags::kFill_Style);
+ flags.setLooper(gfx::CreateShadowDrawLooper(shadow_values_));
+ gfx::Rect shadow_bounds = shadow_layer_->bounds();
+ canvas->DrawCircle({radius - shadow_bounds.x(), radius - shadow_bounds.y()},
+ radius, flags);
}
void OnDelegatedFrameDamage(const gfx::Rect& damage_rect_in_dip) override {}
diff --git a/ui/gfx/shadow_util.cc b/ui/gfx/shadow_util.cc
index 1d98204..cc1d7ad 100644
--- a/ui/gfx/shadow_util.cc
+++ b/ui/gfx/shadow_util.cc
@@ -93,20 +93,7 @@
std::make_pair(elevation, corner_radius), ShadowDetails()));
DCHECK(insertion.second);
ShadowDetails* shadow = &insertion.first->second;
- // To match the CSS notion of blur (spread outside the bounding box) to the
- // Skia notion of blur (spread outside and inside the bounding box), we have
- // to double the designer-provided blur values.
- const int kBlurCorrection = 2;
- // "Key shadow": y offset is elevation and blur is twice the elevation.
- shadow->values.emplace_back(gfx::Vector2d(0, elevation),
- kBlurCorrection * elevation * 2,
- SkColorSetA(SK_ColorBLACK, 0x3d));
- // "Ambient shadow": no offset and blur matches the elevation.
- shadow->values.emplace_back(gfx::Vector2d(), kBlurCorrection * elevation,
- SkColorSetA(SK_ColorBLACK, 0x1f));
- // To see what this looks like for elevation 24, try this CSS:
- // box-shadow: 0 24px 48px rgba(0, 0, 0, .24),
- // 0 0 24px rgba(0, 0, 0, .12);
+ shadow->values = ShadowValue::MakeMdShadowValues(elevation);
auto* source = new ShadowNineboxSource(shadow->values, corner_radius);
shadow->ninebox_image = ImageSkia(source, source->size());
return *shadow;
diff --git a/ui/gfx/shadow_value.cc b/ui/gfx/shadow_value.cc
index a8ab3f8..9f17797 100644
--- a/ui/gfx/shadow_value.cc
+++ b/ui/gfx/shadow_value.cc
@@ -80,4 +80,24 @@
return GetInsets(shadows, true);
}
+// static
+ShadowValues ShadowValue::MakeMdShadowValues(int elevation) {
+ ShadowValues shadow_values;
+ // To match the CSS notion of blur (spread outside the bounding box) to the
+ // Skia notion of blur (spread outside and inside the bounding box), we have
+ // to double the designer-provided blur values.
+ const int kBlurCorrection = 2;
+ // "Key shadow": y offset is elevation and blur is twice the elevation.
+ shadow_values.emplace_back(gfx::Vector2d(0, elevation),
+ kBlurCorrection * elevation * 2,
+ SkColorSetA(SK_ColorBLACK, 0x3d));
+ // "Ambient shadow": no offset and blur matches the elevation.
+ shadow_values.emplace_back(gfx::Vector2d(), kBlurCorrection * elevation,
+ SkColorSetA(SK_ColorBLACK, 0x1f));
+ // To see what this looks like for elevation 24, try this CSS:
+ // box-shadow: 0 24px 48px rgba(0, 0, 0, .24),
+ // 0 0 24px rgba(0, 0, 0, .12);
+ return shadow_values;
+}
+
} // namespace gfx
diff --git a/ui/gfx/shadow_value.h b/ui/gfx/shadow_value.h
index 2362600f..7723a8b 100644
--- a/ui/gfx/shadow_value.h
+++ b/ui/gfx/shadow_value.h
@@ -48,6 +48,10 @@
// a uniform color.
static Insets GetBlurRegion(const ShadowValues& shadows);
+ // Makes ShadowValues that should match MD style shadows for the given
+ // elevation.
+ static ShadowValues MakeMdShadowValues(int elevation);
+
private:
gfx::Vector2d offset_;
