Changeset 285839 in webkit

Timestamp:

Nov 15, 2021 4:07:03 PM (8 months ago)

Author:

Fujii Hironori

Message:

Web Inspector: Layers Tab: the position of composited layer with box-shadow is wrong
​https://bugs.webkit.org/show_bug.cgi?id=233026

Reviewed by Devin Rousso.

If an element has box-shadow, Layers Tab showed the composited
layer positioned wrongly. It assumed the composited layer position
was same with its element position. This isn't true. If an element
has box-shadow, its composited layer includes the surrounding
box-shadow.

• UserInterface/Models/Layer.js:

(WI.Layer):

• UserInterface/Views/Layers3DContentView.js:

(WI.Layers3DContentView.prototype._updateLayers):
(WI.Layers3DContentView.prototype._createLayerMesh):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Models/Layer.js (modified) (1 diff)
• UserInterface/Views/Layers3DContentView.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-11-15  Fujii Hironori  <Hironori.Fujii@sony.com>
+
+        Web Inspector: Layers Tab: the position of composited layer with box-shadow is wrong
+        https://bugs.webkit.org/show_bug.cgi?id=233026
+
+        Reviewed by Devin Rousso.
+
+        If an element has box-shadow, Layers Tab showed the composited
+        layer positioned wrongly. It assumed the composited layer position
+        was same with its element position. This isn't true. If an element
+        has box-shadow, its composited layer includes the surrounding
+        box-shadow.
+
+        * UserInterface/Models/Layer.js:
+        (WI.Layer):
+        * UserInterface/Views/Layers3DContentView.js:
+        (WI.Layers3DContentView.prototype._updateLayers):
+        (WI.Layers3DContentView.prototype._createLayerMesh):
+
 2021-11-12  Razvan Caliman  <rcaliman@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Models/Layer.js

@@ -42 +42 @@
         this._pseudoElement = pseudoElement;
 
-        // FIXME: This should probably be moved to the backend.
-        this._compositedBounds.x = this._bounds.x;
-        this._compositedBounds.y = this._bounds.y;
+        // Transform compositedBounds to the global position
+        this._compositedBounds.x += this._bounds.x;
+        this._compositedBounds.y += this._bounds.y;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js

@@ -270 +270 @@
         newLayers.forEach((layer, index) => {
             let layerGroup = this._layerGroupsById.get(layer.layerId);
-            layerGroup.position.set(layer.bounds.x, -layer.bounds.y, index * zInterval);
+            layerGroup.position.set(0, 0, index * zInterval);
         });
 
@@ -287 +287 @@
     }
 
-    _createLayerMesh({width, height}, isOutline = false)
+    _createLayerMesh({x, y, width, height}, isOutline = false)
     {
         let geometry = new THREE.Geometry;
         geometry.vertices.push(
-            new THREE.Vector3(0,     0,       0),
-            new THREE.Vector3(0,     -height, 0),
-            new THREE.Vector3(width, -height, 0),
-            new THREE.Vector3(width, 0,       0),
+            new THREE.Vector3(x, -y, 0),
+            new THREE.Vector3(x, -y - height, 0),
+            new THREE.Vector3(x + width, -y - height, 0),
+            new THREE.Vector3(x + width, -y, 0),
         );