Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (242736 => 242737)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-03-11 20:35:21 UTC (rev 242737)
@@ -1,3 +1,41 @@
+2019-03-11 Devin Rousso <[email protected]>
+
+ Web Inspector: eliminate manual syncing of numeric constants used by _javascript_ and CSS
+ https://bugs.webkit.org/show_bug.cgi?id=194883
+ <rdar://problem/48257785>
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Views/CanvasOverviewContentView.js:
+ (WI.CanvasOverviewContentView):
+ (WI.CanvasOverviewContentView.static get recordingAutoCaptureInputMargin): Added.
+ (WI.CanvasOverviewContentView.prototype._updateRecordingAutoCaptureInputElementSize):
+ * UserInterface/Views/CanvasOverviewContentView.css:
+ (.navigation-bar > .item.canvas-recording-auto-capture > label > input):
+
+ * UserInterface/Views/MemoryTimelineView.js:
+ (WI.MemoryTimelineView.static get memoryCategoryViewHeight): Added.
+ (WI.MemoryTimelineView.prototype.initialLayout): Added.
+ (WI.MemoryTimelineView.prototype.layout):
+ * UserInterface/Views/MemoryCategoryView.css:
+ (.memory-category-view):
+
+ * UserInterface/Views/NetworkTableContentView.js:
+ (WI.NetworkTableContentView.static get nodeWaterfallDOMEventSize): Added.
+ (WI.NetworkTableContentView.prototype.initialLayout):
+ * UserInterface/Views/NetworkTableContentView.css:
+ (.content-view.network .network-table): Deleted.
+
+ * UserInterface/Views/TreeOutline.js:
+ (WI.TreeOutline._generateStyleRulesIfNeeded):
+ * UserInterface/Views/TreeOutline.css:
+ (.tree-outline, .tree-outline .children):
+ (.tree-outline .item):
+
+ * UserInterface/Controllers/CanvasManager.js:
+ (WI.CanvasManager.supportsRecordingAutoCapture):
+ Drive-by: fix usage of InspectorBackend.domains.{CanvasAgent => Canvas}
+
2019-03-11 Nikita Vasilyev <[email protected]>
REGRESSION(r242622): Web Inspector: Fix asserts "Overridden property is missing overridingProperty"
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js 2019-03-11 20:35:21 UTC (rev 242737)
@@ -54,7 +54,7 @@
static supportsRecordingAutoCapture()
{
- return InspectorBackend.domains.CanvasAgent && InspectorBackend.domains.CanvasAgent.setRecordingAutoCaptureFrameCount;
+ return InspectorBackend.domains.Canvas && InspectorBackend.domains.Canvas.setRecordingAutoCaptureFrameCount;
}
// Public
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css 2019-03-11 20:35:21 UTC (rev 242737)
@@ -183,8 +183,6 @@
min-width: 1.5em;
margin: 0 var(--recording-auto-capture-input-margin);
text-align: center;
-
- --recording-auto-capture-input-margin: 4px; /* Keep this in sync with `recordingAutoCaptureInputMargin`. */
}
.navigation-bar > .item.canvas-recording-auto-capture > label > input::-webkit-inner-spin-button {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js 2019-03-11 20:35:21 UTC (rev 242737)
@@ -48,6 +48,7 @@
this._recordingAutoCaptureFrameCountInputElement = document.createElement("input");
this._recordingAutoCaptureFrameCountInputElement.type = "number";
this._recordingAutoCaptureFrameCountInputElement.min = 0;
+ this._recordingAutoCaptureFrameCountInputElement.style.setProperty("--recording-auto-capture-input-margin", CanvasOverviewContentView.recordingAutoCaptureInputMargin + "px");
this._recordingAutoCaptureFrameCountInputElement.addEventListener("input", this._handleRecordingAutoCaptureInput.bind(this));
this._recordingAutoCaptureFrameCountInputElementValue = WI.settings.canvasRecordingAutoCaptureFrameCount.value;
@@ -78,6 +79,10 @@
this._importButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleImportButtonNavigationItemClicked, this);
}
+ // Static
+
+ static get recordingAutoCaptureInputMargin() { return 4; }
+
// Public
get navigationItems()
@@ -248,11 +253,9 @@
this._recordingAutoCaptureFrameCountInputElement.__cachedFont = computedStyle.font;
}
- const recordingAutoCaptureInputMargin = 8; // Keep this in sync with `--recording-auto-capture-input-margin`.
-
context.font = this._recordingAutoCaptureFrameCountInputElement.__cachedFont;
let textMetrics = context.measureText(this._recordingAutoCaptureFrameCountInputElement.value || this._recordingAutoCaptureFrameCountInputElement.placeholder);
- this._recordingAutoCaptureFrameCountInputElement.style.setProperty("width", (textMetrics.width + recordingAutoCaptureInputMargin) + "px");
+ this._recordingAutoCaptureFrameCountInputElement.style.setProperty("width", (textMetrics.width + (2 * CanvasOverviewContentView.recordingAutoCaptureInputMargin)) + "px");
});
return frameCount;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css 2019-03-11 20:35:21 UTC (rev 242737)
@@ -26,7 +26,7 @@
.memory-category-view {
display: flex;
width: 100%;
- height: 76px; /* Keep this in sync with memoryCategoryViewHeight + 1 (for border-bottom) */
+ height: calc(var(--memory-category-view-height) + 1px);
border-bottom: 1px solid var(--border-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js 2019-03-11 20:35:21 UTC (rev 242737)
@@ -114,6 +114,8 @@
}
}
+ static get memoryCategoryViewHeight() { return 75; }
+
// Public
shown()
@@ -165,6 +167,13 @@
get showsFilterBar() { return false; }
+ initialLayout()
+ {
+ super.initialLayout();
+
+ this.element.style.setProperty("--memory-category-view-height", MemoryTimelineView.memoryCategoryViewHeight + "px");
+ }
+
layout()
{
if (this.layoutReason === WI.View.LayoutReason.Resize)
@@ -178,8 +187,6 @@
if (!this._didInitializeCategories)
return;
- const memoryCategoryViewHeight = 75; // Keep this in sync with .memory-category-view
-
let graphStartTime = this.startTime;
let graphEndTime = this.endTime;
let secondsPerPixel = this._timelineRuler.secondsPerPixel;
@@ -265,7 +272,7 @@
return (time - graphStartTime) / secondsPerPixel;
}
- let size = new WI.Size(xScale(graphEndTime), memoryCategoryViewHeight);
+ let size = new WI.Size(xScale(graphEndTime), MemoryTimelineView.memoryCategoryViewHeight);
function yScale(value) {
return size.height - (((value - graphMin) / graphMax) * size.height);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css 2019-03-11 20:35:21 UTC (rev 242737)
@@ -23,10 +23,6 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.content-view.network .network-table {
- --node-waterfall-dom-event-size: 8px; /* Keep this in sync with `domEventElementSize`. */
-}
-
.content-view.network .navigation-bar .filter-bar {
background: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2019-03-11 20:35:21 UTC (rev 242737)
@@ -198,6 +198,8 @@
}
}
+ static get nodeWaterfallDOMEventSize() { return 8; }
+
// Public
get selectionPathComponents()
@@ -677,14 +679,12 @@
let domNode = entry.domNode;
if (domNode) {
- const domEventElementSize = 8; // Keep this in sync with `--node-waterfall-dom-event-size`.
-
let groupedDOMEvents = [];
for (let domEvent of domNode.domEvents) {
if (domEvent.originator)
continue;
- if (!groupedDOMEvents.length || (domEvent.timestamp - groupedDOMEvents.lastValue.endTimestamp) >= (domEventElementSize * secondsPerPixel)) {
+ if (!groupedDOMEvents.length || (domEvent.timestamp - groupedDOMEvents.lastValue.endTimestamp) >= (NetworkTableContentView.nodeWaterfallDOMEventSize * secondsPerPixel)) {
groupedDOMEvents.push({
startTimestamp: domEvent.timestamp,
domEvents: [],
@@ -762,7 +762,7 @@
createDOMEventLine(groupedDOMEvents.lastValue.domEvents, groupedDOMEvents.lastValue.endTimestamp, this._waterfallEndTime);
for (let {startTimestamp, endTimestamp, domEvents} of groupedDOMEvents) {
- let paddingForCentering = domEventElementSize * secondsPerPixel / 2;
+ let paddingForCentering = NetworkTableContentView.nodeWaterfallDOMEventSize * secondsPerPixel / 2;
let eventElement = container.appendChild(document.createElement("div"));
eventElement.classList.add("dom-event");
@@ -972,6 +972,10 @@
initialLayout()
{
+ super.initialLayout();
+
+ this.element.style.setProperty("--node-waterfall-dom-event-size", NetworkTableContentView.nodeWaterfallDOMEventSize + "px");
+
this._waterfallTimelineRuler = new WI.TimelineRuler;
this._waterfallTimelineRuler.allowsClippedLabels = true;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2019-03-11 20:35:21 UTC (rev 242737)
@@ -30,6 +30,8 @@
list-style: none;
outline: none;
+ --tree-outline-item-padding: 5px;
+
--tree-outline-icon-margin-start: 16px;
--tree-outline-icon-margin-end: 3px;
@@ -47,7 +49,7 @@
.tree-outline .item {
height: 20px;
- padding: 0 5px;
+ padding: 0 var(--tree-outline-item-padding);
border-top: 1px solid transparent;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (242736 => 242737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2019-03-11 20:22:09 UTC (rev 242736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2019-03-11 20:35:21 UTC (rev 242737)
@@ -946,7 +946,6 @@
WI.TreeOutline._styleElement = document.createElement("style");
let maximumTreeDepth = 32;
- let baseLeftPadding = 5; // Matches the padding in TreeOutline.css for the item class. Keep in sync.
let depthPadding = 10;
let styleText = "";
@@ -955,13 +954,8 @@
// Keep all the elements at the same depth once the maximum is reached.
childrenSubstring += i === maximumTreeDepth ? " .children" : " > .children";
styleText += `.${WI.TreeOutline.ElementStyleClassName}:not(.${WI.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} > .item { `;
-
- if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
- styleText += "padding-right: ";
- else
- styleText += "padding-left: ";
-
- styleText += (baseLeftPadding + (depthPadding * i)) + "px; }\n";
+ styleText += `-webkit-padding-start: calc(var(--tree-outline-item-padding) + ${depthPadding * i}px);`;
+ styleText += ` };\n`;
}
WI.TreeOutline._styleElement.textContent = styleText;
