Modified: trunk/Source/WebInspectorUI/ChangeLog (230617 => 230618)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-04-13 00:33:26 UTC (rev 230617)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-04-13 01:09:50 UTC (rev 230618)
@@ -1,3 +1,42 @@
+2018-04-12 Nikita Vasilyev <nvasil...@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 <nvasil...@apple.com>
Web Inspector: Errors glyph doesn't fully change to blue when active
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js (230617 => 230618)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2018-04-13 00:33:26 UTC (rev 230617)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2018-04-13 01:09:50 UTC (rev 230618)
@@ -1404,7 +1404,7 @@
_waterfallPopoverContentForResource(resource)
{
let contentElement = document.createElement("div");
- contentElement.className = "waterfall-popover";
+ contentElement.className = "waterfall-popover-content";
if (!resource.hasResponse() || !resource.timingData.startTime || !resource.timingData.responseEnd) {
contentElement.textContent = WI.UIString("Resource has no timing data");
@@ -1422,7 +1422,7 @@
{
if (!this._waterfallPopover) {
this._waterfallPopover = new WI.Popover;
- this._waterfallPopover.backgroundStyle = WI.Popover.BackgroundStyle.White;
+ this._waterfallPopover.element.classList.add("waterfall-popover");
}
if (this._waterfallPopover.visible)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css (230617 => 230618)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css 2018-04-13 00:33:26 UTC (rev 230617)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css 2018-04-13 01:09:50 UTC (rev 230618)
@@ -28,9 +28,15 @@
min-width: 20px;
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);
}
.popover.arrow-up {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js (230617 => 230618)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js 2018-04-13 00:33:26 UTC (rev 230617)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js 2018-04-13 01:09:50 UTC (rev 230618)
@@ -37,7 +37,6 @@
this._anchorPoint = new WI.Point;
this._preferredEdges = null;
this._resizeHandler = null;
- this._backgroundStyle = WI.Popover.BackgroundStyle.Default;
this._contentNeedsUpdate = false;
this._dismissing = false;
@@ -74,18 +73,6 @@
this._frame = frame;
}
- get backgroundStyle()
- {
- return this._backgroundStyle;
- }
-
- set backgroundStyle(style)
- {
- console.assert(Object.values(WI.Popover.BackgroundStyle).includes(style));
-
- this._backgroundStyle = style;
- }
-
set content(content)
{
if (content === this._content)
@@ -391,26 +378,26 @@
_drawBackground()
{
- var scaleFactor = window.devicePixelRatio;
+ let scaleFactor = window.devicePixelRatio;
- var width = this._frame.size.width;
- var height = this._frame.size.height;
- var scaledWidth = width * scaleFactor;
- var scaledHeight = height * scaleFactor;
+ 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.
bounds = new WI.Rect(0, 0, width - arrowHeight, height);
@@ -427,18 +414,20 @@
}
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);
ctx.stroke();
@@ -449,7 +438,7 @@
finalContext.shadowOffsetX = 1;
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);
}
@@ -592,11 +581,6 @@
}
};
-WI.Popover.BackgroundStyle = {
- Default: "popover-background-default",
- White: "popover-background-white",
-};
-
WI.Popover.FadeOutClassName = "fade-out";
WI.Popover.CornerRadius = 5;
WI.Popover.MinWidth = 40;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css (230617 => 230618)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css 2018-04-13 00:33:26 UTC (rev 230617)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css 2018-04-13 01:09:50 UTC (rev 230618)
@@ -23,7 +23,11 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.waterfall-popover .resource-timing-breakdown {
+.popover.waterfall-popover {
+ --popover-background-color: white;
+}
+
+.waterfall-popover-content .resource-timing-breakdown {
margin: 5px;
}
