Changeset 230618 in webkit

Timestamp:

Apr 12, 2018 6:09:50 PM (6 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: Refactoring: move popover styles from JS to CSS
​https://bugs.webkit.org/show_bug.cgi?id=184558

Reviewed by Brian Burg.

Introduce several CSS variables to customize popover appearance in CSS
and not JavaScript.

• UserInterface/Views/NetworkTableContentView.js:

(WI.NetworkTableContentView.prototype._waterfallPopoverContentForResource):
(WI.NetworkTableContentView.prototype._handleMousedownWaterfall):

• UserInterface/Views/Popover.css:

(.popover):

• UserInterface/Views/Popover.js:

(WI.Popover):
(WI.Popover.prototype._drawBackground):
Replace var with let.

(WI.Popover.prototype.get backgroundStyle): Deleted.
(WI.Popover.prototype.set backgroundStyle): Deleted.

• UserInterface/Views/ResourceTimingBreakdownView.css:

(.popover.waterfall-popover):
(.waterfall-popover-content .resource-timing-breakdown):
(.waterfall-popover .resource-timing-breakdown): Deleted.

• UserInterface/Views/NetworkTableContentView.js:

(WI.NetworkTableContentView.prototype._waterfallPopoverContentForResource):
(WI.NetworkTableContentView.prototype._handleMousedownWaterfall):

• UserInterface/Views/Popover.css:

(.popover):

• UserInterface/Views/Popover.js:

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

• UserInterface/Views/ResourceTimingBreakdownView.css:

(.popover.waterfall-popover):
(.waterfall-popover-content .resource-timing-breakdown):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/NetworkTableContentView.js (modified) (2 diffs)
• UserInterface/Views/Popover.css (modified) (1 diff)
• UserInterface/Views/Popover.js (modified) (6 diffs)
• UserInterface/Views/ResourceTimingBreakdownView.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-04-12  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Refactoring: move popover styles from JS to CSS
+        https://bugs.webkit.org/show_bug.cgi?id=184558
+
+        Reviewed by Brian Burg.
+
+        Introduce several CSS variables to customize popover appearance in CSS
+        and not JavaScript.
+
+        * UserInterface/Views/NetworkTableContentView.js:
+        (WI.NetworkTableContentView.prototype._waterfallPopoverContentForResource):
+        (WI.NetworkTableContentView.prototype._handleMousedownWaterfall):
+        * UserInterface/Views/Popover.css:
+        (.popover):
+        * UserInterface/Views/Popover.js:
+        (WI.Popover):
+        (WI.Popover.prototype._drawBackground):
+        Replace `var` with `let`.
+
+        (WI.Popover.prototype.get backgroundStyle): Deleted.
+        (WI.Popover.prototype.set backgroundStyle): Deleted.
+        * UserInterface/Views/ResourceTimingBreakdownView.css:
+        (.popover.waterfall-popover):
+        (.waterfall-popover-content .resource-timing-breakdown):
+        (.waterfall-popover .resource-timing-breakdown): Deleted.
+
+        * UserInterface/Views/NetworkTableContentView.js:
+        (WI.NetworkTableContentView.prototype._waterfallPopoverContentForResource):
+        (WI.NetworkTableContentView.prototype._handleMousedownWaterfall):
+        * UserInterface/Views/Popover.css:
+        (.popover):
+        * UserInterface/Views/Popover.js:
+        (WI.Popover):
+        (WI.Popover.prototype._drawBackground):
+        * UserInterface/Views/ResourceTimingBreakdownView.css:
+        (.popover.waterfall-popover):
+        (.waterfall-popover-content .resource-timing-breakdown):
+
 2018-04-07  Nikita Vasilyev  <nvasilyev@apple.com>
 

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

@@ -1405 +1405 @@
     {
         let contentElement = document.createElement("div");
-        contentElement.className = "waterfall-popover";
+        contentElement.className = "waterfall-popover-content";
 
         if (!resource.hasResponse() || !resource.timingData.startTime || !resource.timingData.responseEnd) {
@@ -1423 +1423 @@
         if (!this._waterfallPopover) {
             this._waterfallPopover = new WI.Popover;
-            this._waterfallPopover.backgroundStyle = WI.Popover.BackgroundStyle.White;
+            this._waterfallPopover.element.classList.add("waterfall-popover");
         }
 

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

@@ -29 +29 @@
     min-height: 20px;
     box-sizing: border-box;
-    background-image: -webkit-canvas(popover);
     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);
+
+    background-image: -webkit-canvas(popover);
 }
 

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

@@ -38 +38 @@
         this._preferredEdges = null;
         this._resizeHandler = null;
-        this._backgroundStyle = WI.Popover.BackgroundStyle.Default;
 
         this._contentNeedsUpdate = false;
@@ -73 +72 @@
         this._element.style.backgroundSize = frame.size.width + "px " + frame.size.height + "px";
         this._frame = frame;
-    }
-
-    get backgroundStyle()
-    {
-        return this._backgroundStyle;
-    }
-
-    set backgroundStyle(style)
-    {
-        console.assert(Object.values(WI.Popover.BackgroundStyle).includes(style));
-
-        this._backgroundStyle = style;
     }
 
@@ -392 +379 @@
     _drawBackground()
     {
-        var scaleFactor = window.devicePixelRatio;
-
-        var width = this._frame.size.width;
-        var height = this._frame.size.height;
-        var scaledWidth = width * scaleFactor;
-        var scaledHeight = height * scaleFactor;
+        let scaleFactor = window.devicePixelRatio;
+
+        let width = this._frame.size.width;
+        let height = this._frame.size.height;
+        let scaledWidth = width * scaleFactor;
+        let scaledHeight = height * scaleFactor;
 
         // Create a scratch canvas so we can draw the popover that will later be drawn into
         // the final context with a shadow.
-        var scratchCanvas = document.createElement("canvas");
+        let scratchCanvas = document.createElement("canvas");
         scratchCanvas.width = scaledWidth;
         scratchCanvas.height = scaledHeight;
 
-        var ctx = scratchCanvas.getContext("2d");
+        let ctx = scratchCanvas.getContext("2d");
         ctx.scale(scaleFactor, scaleFactor);
 
         // Bounds of the path don't take into account the arrow, but really only the tight bounding box
         // of the content contained within the frame.
-        var bounds;
-        var arrowHeight = WI.Popover.AnchorSize.height;
+        let bounds;
+        let arrowHeight = WI.Popover.AnchorSize.height;
         switch (this._edge) {
         case WI.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
@@ -428 +415 @@
 
         bounds = bounds.inset(WI.Popover.ShadowEdgeInsets);
+        let computedStyle = window.getComputedStyle(this._element, null);
 
         // Clip the frame.
-        ctx.fillStyle = "black";
+        ctx.fillStyle = computedStyle.getPropertyValue("--popover-text-color").trim();
         this._drawFrame(ctx, bounds, this._edge, this._anchorPoint);
         ctx.clip();
 
         // Panel background color fill.
-        ctx.fillStyle = this._backgroundStyle === WI.Popover.BackgroundStyle.White ? "white" : "rgb(236, 236, 236)";
+        ctx.fillStyle = computedStyle.getPropertyValue("--popover-background-color").trim();
+
         ctx.fillRect(0, 0, width, height);
 
         // Stroke.
-        ctx.strokeStyle = "rgba(0, 0, 0, 0.25)";
+        ctx.strokeStyle = computedStyle.getPropertyValue("--popover-border-color").trim();
         ctx.lineWidth = 2;
         this._drawFrame(ctx, bounds, this._edge, this._anchorPoint);
@@ -450 +439 @@
         finalContext.shadowOffsetY = 1;
         finalContext.shadowBlur = 5;
-        finalContext.shadowColor = "rgba(0, 0, 0, 0.5)";
+        finalContext.shadowColor = computedStyle.getPropertyValue("--popover-shadow-color").trim();
         finalContext.drawImage(scratchCanvas, 0, 0, scaledWidth, scaledHeight);
     }
@@ -593 +582 @@
 };
 
-WI.Popover.BackgroundStyle = {
-    Default: "popover-background-default",
-    White: "popover-background-white",
-};
-
 WI.Popover.FadeOutClassName = "fade-out";
 WI.Popover.CornerRadius = 5;

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

@@ -24 +24 @@
  */
 
-.waterfall-popover .resource-timing-breakdown {
+.popover.waterfall-popover {
+    --popover-background-color: white;
+}
+
+.waterfall-popover-content .resource-timing-breakdown {
     margin: 5px;
 }