Show horizontal and vertical distances when a pinned UIElement is at

the bottom left of and non-overlapping with a hovered UIElement.

In Chrome UI Devtools, users enter the inspection mode and pin an
element by left-clicking on a window/widget or view on the Chrome UI.
When user moves the cursor outside of the current UIElement, if the
pinned UIElement is at the bottom left of and doesn't overlap with the
hovered UIElement rectangle, the layout will display horizontal and
vertical distances between the pinned UIElement and the UIElement under
cursor as shown in picture below. This case refers to
R1_BOTTOM_FULL_LEFT_R2.

Bug: 750096
Change-Id: Ibdfed83e240f85e5557bb32c52b5f7168f493205
Reviewed-on: https://chromium-review.googlesource.com/591770Reviewed-by: Sadrul Chowdhury <sadrul@chromium.org>
Commit-Queue: Thanh Pham <thanhph@chromium.org>
Cr-Commit-Position: refs/heads/master@{#504418}

components/ui_devtools/views/ui_devtools_dom_agent.cc

@@ -276,6 +276,32 @@ void DrawR1TopFullLeftR2(const gfx::RectF& pinned_rect_f,
                         render_text);
 }
 
+void DrawR1BottomFullLeftR2(const gfx::RectF& pinned_rect_f,
+                            const gfx::RectF& hovered_rect_f,
+                            const cc::PaintFlags& flags,
+                            gfx::Canvas* canvas,
+                            gfx::RenderText* render_text) {
+  float x1 = hovered_rect_f.right();
+  float y1 = hovered_rect_f.y() + hovered_rect_f.height() / 2;
+  float x2 = pinned_rect_f.x();
+  float y2 = y1;
+
+  // Horizontal left distance line.
+  canvas->DrawLine(gfx::PointF(x1, y1), gfx::PointF(x2, y2), flags);
+  DrawTextWithAnyBounds(x1, y1, x2, y2, RectSide::BOTTOM_SIDE, canvas,
+                        render_text);
+
+  x1 = hovered_rect_f.x() + hovered_rect_f.width() / 2;
+  y1 = pinned_rect_f.bottom();
+  x2 = x1;
+  y2 = hovered_rect_f.y();
+
+  // Vertical left distance line.
+  canvas->DrawLine(gfx::PointF(x1, y1), gfx::PointF(x2, y2), flags);
+  DrawTextWithAnyBounds(x1, y1, x2, y2, RectSide::LEFT_SIDE, canvas,
+                        render_text);
+}
+
 }  // namespace
 
 UIDevToolsDOMAgent::UIDevToolsDOMAgent()
@@ -575,7 +601,21 @@ void UIDevToolsDOMAgent::OnPaintLayer(const ui::PaintContext& context) {
                        flags);
       return;
     case HighlightRectsConfiguration::R1_BOTTOM_FULL_LEFT_R2:
-      NOTIMPLEMENTED();
+      DrawR1BottomFullLeftR2(pinned_rect_f, hovered_rect_f, flags, canvas,
+                             render_text_.get());
+
+      // Draw 2 guide lines along distance lines.
+      flags.setPathEffect(SkDashPathEffect::Make(intervals, 2, 0));
+
+      // Top horizontal dotted line from left to right.
+      canvas->DrawLine(
+          gfx::PointF(0.0f, pinned_rect_f.bottom()),
+          gfx::PointF(screen_bounds.right(), pinned_rect_f.bottom()), flags);
+
+      // Left vertical dotted line from top to bottom.
+      canvas->DrawLine(gfx::PointF(pinned_rect_f.x(), 0.0f),
+                       gfx::PointF(pinned_rect_f.x(), screen_bounds.bottom()),
+                       flags);
       return;
     case HighlightRectsConfiguration::R1_TOP_PARTIAL_LEFT_R2:
       NOTIMPLEMENTED();

components/ui_devtools/views/ui_devtools_unittest.cc

@@ -518,6 +518,50 @@ TEST_F(UIDevToolsTest, OneUIElementStaysFullyTopLeftOfAnother) {
             HighlightRectsConfiguration::R1_TOP_FULL_LEFT_R2);
 }
 
+// Test case R1_BOTTOM_FULL_LEFT_R2.
+TEST_F(UIDevToolsTest, OneUIElementStaysFullyBottomLeftOfAnother) {
+  const gfx::Rect bottom_left_rect(100, 100, 50, 50);
+  std::unique_ptr<views::Widget> widget_bottom_left(
+      CreateTestWidget(bottom_left_rect));
+
+  const gfx::Rect top_right_rect(200, 50, 40, 40);
+  std::unique_ptr<views::Widget> widget_top_right(
+      CreateTestWidget(top_right_rect));
+
+  std::unique_ptr<ui_devtools::protocol::DOM::Node> root;
+  dom_agent()->getDocument(&root);
+
+  int bottom_left_rect_id = dom_agent()->FindElementIdTargetedByPoint(
+      bottom_left_rect.origin(), GetPrimaryRootWindow());
+  int top_right_rect_id = dom_agent()->FindElementIdTargetedByPoint(
+      top_right_rect.origin(), GetPrimaryRootWindow());
+  dom_agent()->ShowDistancesInHighlightOverlay(bottom_left_rect_id,
+                                               top_right_rect_id);
+
+  HighlightRectsConfiguration highlight_rect_config =
+      dom_agent()->highlight_rect_config();
+
+  // Swapping R1 and R2 shouldn't change |highlight_rect_config|.
+  dom_agent()->ShowDistancesInHighlightOverlay(top_right_rect_id,
+                                               bottom_left_rect_id);
+  DCHECK_EQ(highlight_rect_config, dom_agent()->highlight_rect_config());
+
+  const std::pair<aura::Window*, gfx::Rect> element_top_left(
+      dom_agent()
+          ->GetElementFromNodeId(bottom_left_rect_id)
+          ->GetNodeWindowAndBounds());
+
+  const std::pair<aura::Window*, gfx::Rect> element_bottom_right(
+      dom_agent()
+          ->GetElementFromNodeId(top_right_rect_id)
+          ->GetNodeWindowAndBounds());
+
+  EXPECT_EQ(element_top_left.second, bottom_left_rect);
+  EXPECT_EQ(element_bottom_right.second, top_right_rect);
+  DCHECK_EQ(dom_agent()->highlight_rect_config(),
+            HighlightRectsConfiguration::R1_BOTTOM_FULL_LEFT_R2);
+}
+
 // Tests that the correct Overlay events are dispatched to the frontend when
 // hovering and clicking over a UI element in inspect mode.
 TEST_F(UIDevToolsTest, MouseEventsGenerateFEEventsInInspectMode) {