Changeset 241981 in webkit

Timestamp:

Feb 22, 2019 8:10:00 PM (5 years ago)

Author:

Devin Rousso

Message:

REGRESSION(r?): Web Inspector: Popovers have inset shadows
​https://bugs.webkit.org/show_bug.cgi?id=192963
<rdar://problem/46888679>

Reviewed by Brian Burg.

• UserInterface/Views/Popover.js:

(WI.Popover.prototype._drawBackground):
(WI.Popover.prototype._drawBackground.isolate): Added.

• UserInterface/Views/Popover.css:

(.popover):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/Popover.css (modified) (1 diff)
• UserInterface/Views/Popover.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-02-22  Devin Rousso  <drousso@apple.com>
+
+        REGRESSION(r?): Web Inspector: Popovers have inset shadows
+        https://bugs.webkit.org/show_bug.cgi?id=192963
+        <rdar://problem/46888679>
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/Popover.js:
+        (WI.Popover.prototype._drawBackground):
+        (WI.Popover.prototype._drawBackground.isolate): Added.
+        * UserInterface/Views/Popover.css:
+        (.popover):
+
 2019-02-22  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css

@@ -32 +32 @@
     z-index: var(--z-index-popover);
 
-    --popover-text-color: black;
     --popover-background-color: var(--panel-background-color);
     --popover-border-color: hsla(0, 0%, 0%, 0.25);

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

@@ -422 +422 @@
 
         let context = document.getCSSCanvasContext("2d", "popover", scaledWidth, scaledHeight);
-        context.save();
         context.clearRect(0, 0, scaledWidth, scaledHeight);
-        context.shadowOffsetX = 1;
-        context.shadowOffsetY = 1;
-        context.shadowBlur = 5;
-        context.shadowColor = computedStyle.getPropertyValue("--popover-shadow-color").trim();
-        context.scale(scaleFactor, scaleFactor);
-
-        // Clip the frame.
-        context.fillStyle = computedStyle.getPropertyValue("--popover-text-color").trim();
-        this._drawFrame(context, bounds, this._edge, this._anchorPoint);
-        context.clip();
-
-        // Panel background color fill.
-        context.fillStyle = computedStyle.getPropertyValue("--popover-background-color").trim();
-
-        context.fillRect(0, 0, width, height);
-
-        // Stroke.
-        context.strokeStyle = computedStyle.getPropertyValue("--popover-border-color").trim();
-        context.lineWidth = 2;
-        this._drawFrame(context, bounds, this._edge, this._anchorPoint);
-        context.stroke();
-        context.restore();
+
+        function isolate(callback) {
+            context.save();
+            callback();
+            context.restore();
+        }
+
+        isolate(() => {
+            context.scale(scaleFactor, scaleFactor);
+            this._drawFrame(context, bounds, this._edge, this._anchorPoint);
+
+            isolate(() => {
+                context.shadowBlur = 4;
+                context.shadowColor = computedStyle.getPropertyValue("--popover-shadow-color").trim();
+
+                context.strokeStyle = computedStyle.getPropertyValue("--popover-border-color").trim();
+                context.lineWidth = 2;
+                context.stroke();
+            });
+
+            isolate(() => {
+                context.fillStyle = computedStyle.getPropertyValue("--popover-background-color").trim();
+                context.fill();
+            });
+        });
     }