REGRESSION(r?): Web Inspector: Popovers have inset shadows
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 23 Feb 2019 04:10:00 +0000 (04:10 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 23 Feb 2019 04:10:00 +0000 (04:10 +0000)
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):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/Popover.css
Source/WebInspectorUI/UserInterface/Views/Popover.js

index 1062b64..3737ba6 100644 (file)
@@ -1,5 +1,19 @@
 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>
+
         Web Inspector: Styles Redesign: clicking CSS property or selector should always select its text
         https://bugs.webkit.org/show_bug.cgi?id=180791
         <rdar://problem/36038366>
index 0431803..e08b2a7 100644 (file)
@@ -31,7 +31,6 @@
     pointer-events: none;
     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);
     --popover-shadow-color: hsla(0, 0%, 0%, 0.5);
index 876f15b..2618f1b 100644 (file)
@@ -421,30 +421,32 @@ WI.Popover = class Popover extends WI.Object
         let computedStyle = window.getComputedStyle(this._element, null);
 
         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();
+            });
+        });
     }
 
     _bestMetricsForEdge(preferredSize, targetFrame, containerFrame, edge)