Web Inspector: element details hanger in inspector overlay should have better placeme...
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 16 May 2018 05:30:09 +0000 (05:30 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 16 May 2018 05:30:09 +0000 (05:30 +0000)
https://bugs.webkit.org/show_bug.cgi?id=128482
<rdar://problem/16020709>

Reviewed by Timothy Hatcher.

When determining the best position for the hovered element details "tooltip",
perform placement tests in view space, not canvas space, and account for the
top content inset.

* inspector/InspectorOverlayPage.js:
(reset): Drive by fix: added missing `.height`.
(_drawElementTitle):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@231838 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorOverlayPage.js

index e3fe716..beb4ae9 100644 (file)
@@ -1,3 +1,19 @@
+2018-05-15  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: element details hanger in inspector overlay should have better placement logic
+        https://bugs.webkit.org/show_bug.cgi?id=128482
+        <rdar://problem/16020709>
+
+        Reviewed by Timothy Hatcher.
+
+        When determining the best position for the hovered element details "tooltip",
+        perform placement tests in view space, not canvas space, and account for the
+        top content inset.
+
+        * inspector/InspectorOverlayPage.js:
+        (reset): Drive by fix: added missing `.height`.
+        (_drawElementTitle):
+
 2018-05-15  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r231765.
index bf7d56d..d9215fe 100644 (file)
@@ -137,7 +137,7 @@ function reset(payload)
     document.getElementById("element-title-container").textContent = "";
     document.body.classList.remove("dimmed");
 
-    document.getElementById("log").style.setProperty("top", DATA.contentInset + "px");
+    document.getElementById("log").style.setProperty("top", DATA.contentInset.height + "px");
 }
 
 function DOMBuilder(tagName, className)
@@ -338,20 +338,24 @@ function _drawElementTitle(elementData, fragmentHighlight, scroll)
     anchorTop -= scroll.y;
     anchorBottom -= scroll.y;
 
-    if (boxX + titleWidth > canvas.width)
-        boxX = canvas.width - titleWidth - 2;
+    var viewportWidth = DATA.viewportSize.width;
+    if (boxX + titleWidth > viewportWidth)
+        boxX = viewportWidth - titleWidth - 2;
+
+    var viewportHeight = DATA.viewportSize.height;
+    var viewportTop = DATA.contentInset.height;
 
     var boxY;
-    if (anchorTop > canvas.height) {
+    if (anchorTop > viewportHeight) {
         boxY = canvas.height - titleHeight - arrowHeight;
         renderArrowDown = true;
-    } else if (anchorBottom < 0) {
+    } else if (anchorBottom < viewportTop) {
         boxY = arrowHeight;
         renderArrowUp = true;
-    } else if (anchorBottom + titleHeight + arrowHeight < canvas.height) {
+    } else if (anchorBottom + titleHeight + arrowHeight < viewportHeight) {
         boxY = anchorBottom + arrowHeight - 4;
         renderArrowUp = true;
-    } else if (anchorTop - titleHeight - arrowHeight > 0) {
+    } else if (anchorTop - titleHeight - arrowHeight > viewportTop) {
         boxY = anchorTop - titleHeight - arrowHeight + 3;
         renderArrowDown = true;
     } else