[vr] Use correct sizes for WebVR timeout UI

This CL formats the WebVR timeout UI to match the design. It also
contains an update to the button API to propagate size changes to its
constituent elements.

Bug: None
Cq-Include-Trybots: master.tryserver.chromium.android:android_optional_gpu_tests_rel;master.tryserver.chromium.linux:linux_optional_gpu_tests_rel;master.tryserver.chromium.mac:mac_optional_gpu_tests_rel;master.tryserver.chromium.win:win_optional_gpu_tests_rel
Change-Id: Ied5d8c85c6c2e5439c64cc1056d021474c7eeedb
Reviewed-on: https://chromium-review.googlesource.com/789418Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Christopher Grant <cjgrant@chromium.org>
Reviewed-by: Biao She <bshe@chromium.org>
Commit-Queue: Ian Vollick <vollick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#519436}

chrome/browser/vr/elements/button.cc

@@ -18,53 +18,36 @@ namespace vr {
 
 namespace {
 
-constexpr float kIconScaleFactor = 0.5;
-constexpr float kHitPlaneScaleFactorHovered = 1.2;
-
+constexpr float kIconScaleFactor = 0.5f;
+constexpr float kHitPlaneScaleFactorHovered = 1.2f;
+constexpr float kDefaultHoverOffsetDMM = 0.048f;
 }  // namespace
 
 Button::Button(base::Callback<void()> click_handler,
-               DrawPhase draw_phase,
-               float width,
-               float height,
-               float hover_offset,
                const gfx::VectorIcon& icon)
-    : click_handler_(click_handler), hover_offset_(hover_offset) {
-  set_draw_phase(draw_phase);
+    : click_handler_(click_handler), hover_offset_(kDefaultHoverOffsetDMM) {
   set_hit_testable(false);
-  SetSize(width, height);
 
   auto background = base::MakeUnique<Rect>();
-  background->set_name(kNone);
   background->set_type(kTypeButtonBackground);
-  background->set_draw_phase(draw_phase);
   background->set_bubble_events(true);
-  background->SetSize(width, height);
   background->SetTransitionedProperties({TRANSFORM});
-  background->set_corner_radius(width / 2);
   background->set_hit_testable(false);
   background_ = background.get();
   AddChild(std::move(background));
 
   auto vector_icon = base::MakeUnique<VectorIcon>(512);
-  vector_icon->set_name(kNone);
   vector_icon->set_type(kTypeButtonForeground);
   vector_icon->SetIcon(icon);
-  vector_icon->set_draw_phase(draw_phase);
   vector_icon->set_bubble_events(true);
-  vector_icon->SetSize(width * kIconScaleFactor, height * kIconScaleFactor);
   vector_icon->SetTransitionedProperties({TRANSFORM});
   vector_icon->set_hit_testable(false);
   foreground_ = vector_icon.get();
   AddChild(std::move(vector_icon));
 
   auto hit_plane = base::MakeUnique<InvisibleHitTarget>();
-  hit_plane->set_name(kNone);
   hit_plane->set_type(kTypeButtonHitTarget);
-  hit_plane->set_draw_phase(draw_phase);
   hit_plane->set_bubble_events(true);
-  hit_plane->SetSize(width, height);
-  hit_plane->set_corner_radius(width / 2);
   hit_plane_ = hit_plane.get();
   foreground_->AddChild(std::move(hit_plane));
 
@@ -137,4 +120,24 @@ void Button::OnStateUpdated() {
   foreground_->SetColor(colors_.GetForegroundColor(disabled_));
 }
 
+void Button::OnSetDrawPhase() {
+  background_->set_draw_phase(draw_phase());
+  foreground_->set_draw_phase(draw_phase());
+  hit_plane_->set_draw_phase(draw_phase());
+}
+
+void Button::NotifyClientSizeAnimated(const gfx::SizeF& size,
+                                      int target_property_id,
+                                      cc::Animation* animation) {
+  if (target_property_id == BOUNDS) {
+    background_->SetSize(size.width(), size.height());
+    background_->set_corner_radius(size.width() * 0.5f);
+    foreground_->SetSize(size.width() * kIconScaleFactor,
+                         size.height() * kIconScaleFactor);
+    hit_plane_->SetSize(size.width(), size.height());
+    hit_plane_->set_corner_radius(size.width() * 0.5f);
+  }
+  UiElement::NotifyClientSizeAnimated(size, target_property_id, animation);
+}
+
 }  // namespace vr

chrome/browser/vr/elements/button.h

@@ -28,12 +28,7 @@ class VectorIcon;
 // When hovered, background and foreground both move forward on Z axis.
 class Button : public UiElement {
  public:
-  Button(base::Callback<void()> click_handler,
-         DrawPhase draw_phase,
-         float width,
-         float height,
-         float hover_offset,
-         const gfx::VectorIcon& icon);
+  Button(base::Callback<void()> click_handler, const gfx::VectorIcon& icon);
   ~Button() override;
 
   void Render(UiElementRenderer* renderer,
@@ -44,6 +39,11 @@ class Button : public UiElement {
   UiElement* hit_plane() const { return hit_plane_; }
   void SetButtonColors(const ButtonColors& colors);
 
+  // TODO(vollick): once all elements are scaled by a ScaledDepthAdjuster, we
+  // will never have to change the button hover offset from the default and this
+  // method and the associated field can be removed.
+  void set_hover_offset(float hover_offset) { hover_offset_ = hover_offset; }
+
  private:
   void HandleHoverEnter();
   void HandleHoverMove(const gfx::PointF& position);
@@ -52,6 +52,10 @@ class Button : public UiElement {
   void HandleButtonUp();
   void OnStateUpdated();
 
+  void OnSetDrawPhase() override;
+  void NotifyClientSizeAnimated(const gfx::SizeF& size,
+                                int target_property_id,
+                                cc::Animation* animation) override;
   bool down_ = false;
 
   bool hovered_ = false;

chrome/browser/vr/elements/button_unittest.cc

@@ -4,9 +4,9 @@
 
 #include "chrome/browser/vr/elements/button.h"
 
-#include "base/memory/ptr_util.h"
 #include "cc/animation/transform_operation.h"
 #include "cc/animation/transform_operations.h"
+#include "cc/test/geometry_test_utils.h"
 #include "chrome/browser/vr/elements/rect.h"
 #include "chrome/browser/vr/elements/ui_element.h"
 #include "chrome/browser/vr/elements/vector_icon.h"
@@ -18,24 +18,24 @@
 namespace vr {
 
 TEST(Button, HoverTest) {
-  auto button =
-      base::MakeUnique<Button>(base::Callback<void()>(), kPhaseForeground, 1.0,
-                               1.0, 0.5, vector_icons::kMicrophoneIcon);
+  Button button(base::Callback<void()>(), vector_icons::kMicrophoneIcon);
+  button.SetSize(1.0f, 1.0f);
+  button.set_hover_offset(0.5f);
 
   cc::TransformOperation foreground_op =
-      button->foreground()->GetTargetTransform().at(UiElement::kTranslateIndex);
+      button.foreground()->GetTargetTransform().at(UiElement::kTranslateIndex);
   cc::TransformOperation background_op =
-      button->background()->GetTargetTransform().at(UiElement::kTranslateIndex);
+      button.background()->GetTargetTransform().at(UiElement::kTranslateIndex);
   cc::TransformOperation hit_plane_op =
-      button->hit_plane()->GetTargetTransform().at(UiElement::kScaleIndex);
+      button.hit_plane()->GetTargetTransform().at(UiElement::kScaleIndex);
 
-  button->OnHoverEnter(gfx::PointF(0.5f, 0.5f));
+  button.OnHoverEnter(gfx::PointF(0.5f, 0.5f));
   cc::TransformOperation foreground_op_hover =
-      button->foreground()->GetTargetTransform().at(UiElement::kTranslateIndex);
+      button.foreground()->GetTargetTransform().at(UiElement::kTranslateIndex);
   cc::TransformOperation background_op_hover =
-      button->background()->GetTargetTransform().at(UiElement::kTranslateIndex);
+      button.background()->GetTargetTransform().at(UiElement::kTranslateIndex);
   cc::TransformOperation hit_plane_op_hover =
-      button->hit_plane()->GetTargetTransform().at(UiElement::kScaleIndex);
+      button.hit_plane()->GetTargetTransform().at(UiElement::kScaleIndex);
 
   EXPECT_TRUE(foreground_op_hover.translate.z - foreground_op.translate.z >
               0.f);
@@ -44,4 +44,37 @@ TEST(Button, HoverTest) {
   EXPECT_TRUE(hit_plane_op_hover.scale.x - hit_plane_op.scale.x > 0.f);
 }
 
+TEST(Button, SizePropagatesToSubElements) {
+  Button button(base::Callback<void()>(), vector_icons::kMicrophoneIcon);
+  gfx::SizeF size(1000.0f, 1000.0f);
+  gfx::SizeF icon_size = size;
+  icon_size.Scale(0.5f);
+  button.SetSize(size.width(), size.height());
+
+  for (auto& child : button.children()) {
+    switch (child->type()) {
+      case kTypeButtonBackground:
+      case kTypeButtonHitTarget:
+        EXPECT_SIZE_EQ(size, child->size());
+        EXPECT_FLOAT_EQ(size.width() * 0.5f, child->corner_radius());
+        break;
+      case kTypeButtonForeground:
+        EXPECT_SIZE_EQ(icon_size, child->size());
+        break;
+      default:
+        NOTREACHED();
+        break;
+    }
+  }
+}
+
+TEST(Button, DrawPhasePropagatesToSubElements) {
+  Button button(base::Callback<void()>(), vector_icons::kMicrophoneIcon);
+  button.set_draw_phase(kPhaseOverlayForeground);
+
+  for (auto& child : button.children()) {
+    EXPECT_EQ(kPhaseOverlayForeground, child->draw_phase());
+  }
+}
+
 }  // namespace vr

chrome/browser/vr/elements/ui_element.cc

@@ -72,6 +72,13 @@ void UiElement::set_type(UiElementType type) {
 
 void UiElement::OnSetType() {}
 
+void UiElement::set_draw_phase(DrawPhase draw_phase) {
+  draw_phase_ = draw_phase;
+  OnSetDrawPhase();
+}
+
+void UiElement::OnSetDrawPhase() {}
+
 void UiElement::Render(UiElementRenderer* renderer,
                        const CameraModel& model) const {
   // Elements without an overridden implementation of Render should have their
@@ -550,7 +557,7 @@ void UiElement::DoLayOutChildren() {
   gfx::RectF bounds;
   bool first = false;
   for (auto& child : children_) {
-    if (!child->IsVisible()) {
+    if (!child->IsVisible() || child->size().IsEmpty()) {
       continue;
     }
     gfx::Point3F child_center(child->local_origin());
@@ -606,7 +613,9 @@ void UiElement::UpdateComputedOpacity() {
 void UiElement::UpdateWorldSpaceTransformRecursive() {
   gfx::Transform transform;
   transform.Translate(local_origin_.x(), local_origin_.y());
-  transform.Scale(size_.width(), size_.height());
+  if (!size_.IsEmpty()) {
+    transform.Scale(size_.width(), size_.height());
+  }
 
   // Compute an inheritable transformation that can be applied to this element,
   // and it's children, if applicable.

chrome/browser/vr/elements/ui_element.h

@@ -119,6 +119,10 @@ class UiElement : public cc::AnimationTarget {
   void set_type(UiElementType type);
   virtual void OnSetType();
 
+  DrawPhase draw_phase() const { return draw_phase_; }
+  void set_draw_phase(DrawPhase draw_phase);
+  virtual void OnSetDrawPhase();
+
   // Returns true if the element needs to be re-drawn.
   virtual bool PrepareToDraw();
 
@@ -259,9 +263,6 @@ class UiElement : public cc::AnimationTarget {
     y_padding_ = y_padding;
   }
 
-  DrawPhase draw_phase() const { return draw_phase_; }
-  void set_draw_phase(DrawPhase draw_phase) { draw_phase_ = draw_phase; }
-
   const gfx::Transform& inheritable_transform() const {
     return inheritable_transform_;
   }
@@ -419,7 +420,7 @@ class UiElement : public cc::AnimationTarget {
   bool bubble_events_ = false;
 
   // The size of the object.  This does not affect children.
-  gfx::SizeF size_ = {1.0f, 1.0f};
+  gfx::SizeF size_;
 
   // The local orgin of the element. This can be updated, say, so that an
   // element can contain its children, even if they are not centered about its

chrome/browser/vr/ui_scene_constants.h

@@ -149,35 +149,27 @@ static constexpr float kSpinnerHeight = kCloseButtonHeight;
 static constexpr float kSpinnerVerticalOffset = kSplashScreenTextVerticalOffset;
 static constexpr float kSpinnerDistance = kSplashScreenTextDistance;
 
-static constexpr float kTimeoutMessageBackgroundWidthM =
-    kUnderDevelopmentNoticeWidthM;
-static constexpr float kTimeoutMessageBackgroundHeightM =
-    kUnderDevelopmentNoticeHeightM * 0.85;
-static constexpr float kTimeoutMessageCornerRadius = kContentCornerRadius * 1.5;
+static constexpr float kTimeoutMessageHorizontalPaddingDMM = 0.04f;
+static constexpr float kTimeoutMessageVerticalPaddingDMM = 0.024f;
 
-static constexpr float kTimeoutMessageLayoutGap = kIndicatorGap * 0.5;
+static constexpr float kTimeoutMessageCornerRadiusDMM = 0.008f;
 
-static constexpr float kTimeoutMessageIconWidth = kCloseButtonWidth * 0.6;
-static constexpr float kTimeoutMessageIconHeight = kCloseButtonHeight * 0.6;
-
-static constexpr float kTimeoutMessageTextFontHeightM =
-    kUnderDevelopmentNoticeFontHeightM;
-
-static constexpr float kTimeoutMessageTextHeightM =
-    kUnderDevelopmentNoticeHeightM;
-static constexpr float kTimeoutMessageTextWidthM =
-    kUnderDevelopmentNoticeWidthM * 0.7;
+static constexpr float kTimeoutMessageLayoutGapDMM = 0.024f;
+static constexpr float kTimeoutMessageIconWidthDMM = 0.056f;
+static constexpr float kTimeoutMessageIconHeightDMM = 0.056f;
+static constexpr float kTimeoutMessageTextFontHeightDMM = 0.022f;
+static constexpr float kTimeoutMessageTextHeightDMM = 0.056f;
+static constexpr float kTimeoutMessageTextWidthDMM = 0.4f;
 
 static constexpr float kTimeoutButtonVerticalOffset = kUrlBarVerticalOffset;
 static constexpr float kTimeoutButtonDistance = kUrlBarDistance;
+static constexpr float kTimeoutButtonDepthOffset = -0.1f;
 static constexpr float kTimeoutButtonRotationRad = kUrlBarRotationRad;
-static constexpr float kTimeoutButtonWidth = kCloseButtonWidth;
-static constexpr float kTimeoutButtonHeight = kCloseButtonHeight;
+static constexpr float kWebVrTimeoutMessageButtonDiameterDMM = 0.096f;
 
-static constexpr float kTimeoutButtonTextWidth = kCloseButtonWidth;
-static constexpr float kTimeoutButtonTextHeight = kCloseButtonHeight * 0.25;
-static constexpr float kTimeoutButtonTextVerticalOffset =
-    kTimeoutButtonTextHeight;
+static constexpr float kTimeoutButtonTextWidthDMM = 0.058f;
+static constexpr float kTimeoutButtonTextHeightDMM = 0.024f;
+static constexpr float kTimeoutButtonTextVerticalOffsetDMM = 0.024f;
 
 static constexpr float kScreenDimmerOpacity = 0.9f;
 

chrome/browser/vr/ui_scene_unittest.cc

@@ -238,6 +238,7 @@ TEST_P(AlignmentTest, VerifyCorrectPosition) {
   // Add a child to the parent, with anchoring.
   element = base::MakeUnique<UiElement>();
   UiElement* child = element.get();
+  element->SetSize(1, 1);
   element->set_x_anchoring(GetParam().x_anchoring);
   element->set_y_anchoring(GetParam().y_anchoring);
   element->set_x_centering(GetParam().x_centering);