- Revision
- 240884
- Author
- drou...@apple.com
- Date
- 2019-02-01 15:29:36 -0800 (Fri, 01 Feb 2019)
Log Message
Web Inspector: create icons for media event types instead of using a blue circle
https://bugs.webkit.org/show_bug.cgi?id=190381
<rdar://problem/45507995>
Reviewed by Brian Burg.
* UserInterface/Models/DOMNode.js:
(WI.DOMNode.isPlayEvent): Added.
(WI.DOMNode.isPauseEvent): Added.
(WI.DOMNode.isStopEvent): Added.
* UserInterface/Views/DOMEventsBreakdownView.js:
(WI.DOMEventsBreakdownView.prototype.layout):
* UserInterface/Views/DOMEventsBreakdownView.css:
(.dom-events-breakdown tr > :matches(th, td)):
(.dom-events-breakdown .graph):
(.dom-events-breakdown .graph > :matches(img, .area)): Added.
(.dom-events-breakdown .graph > img): Added.
(.dom-events-breakdown .inherited > .name, .dom-events-breakdown .inherited > .graph > img): Added.
(.dom-events-breakdown .graph > :matches(.point, .area)): Deleted.
(.dom-events-breakdown .graph > .point): Deleted.
(.dom-events-breakdown .inherited > .name, .dom-events-breakdown .inherited > .graph > .point): Deleted.
* UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView.prototype._populateWaterfallGraph.createDOMEventLine):
* UserInterface/Images/EventPause.svg: Added.
* UserInterface/Images/EventPlay.svg: Added.
* UserInterface/Images/EventProcessing.svg: Added.
* UserInterface/Images/EventStop.svg: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (240883 => 240884)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-02-01 23:27:30 UTC (rev 240883)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-02-01 23:29:36 UTC (rev 240884)
@@ -1,3 +1,36 @@
+2019-02-01 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: create icons for media event types instead of using a blue circle
+ https://bugs.webkit.org/show_bug.cgi?id=190381
+ <rdar://problem/45507995>
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Models/DOMNode.js:
+ (WI.DOMNode.isPlayEvent): Added.
+ (WI.DOMNode.isPauseEvent): Added.
+ (WI.DOMNode.isStopEvent): Added.
+
+ * UserInterface/Views/DOMEventsBreakdownView.js:
+ (WI.DOMEventsBreakdownView.prototype.layout):
+ * UserInterface/Views/DOMEventsBreakdownView.css:
+ (.dom-events-breakdown tr > :matches(th, td)):
+ (.dom-events-breakdown .graph):
+ (.dom-events-breakdown .graph > :matches(img, .area)): Added.
+ (.dom-events-breakdown .graph > img): Added.
+ (.dom-events-breakdown .inherited > .name, .dom-events-breakdown .inherited > .graph > img): Added.
+ (.dom-events-breakdown .graph > :matches(.point, .area)): Deleted.
+ (.dom-events-breakdown .graph > .point): Deleted.
+ (.dom-events-breakdown .inherited > .name, .dom-events-breakdown .inherited > .graph > .point): Deleted.
+
+ * UserInterface/Views/NetworkTableContentView.js:
+ (WI.NetworkTableContentView.prototype._populateWaterfallGraph.createDOMEventLine):
+
+ * UserInterface/Images/EventPause.svg: Added.
+ * UserInterface/Images/EventPlay.svg: Added.
+ * UserInterface/Images/EventProcessing.svg: Added.
+ * UserInterface/Images/EventStop.svg: Added.
+
2019-02-01 Joseph Pecoraro <pecor...@apple.com>
Web Inspector: Make WI.ColumnChart a WI.View subclass
Added: trunk/Source/WebInspectorUI/UserInterface/Images/EventPause.svg (0 => 240884)
--- trunk/Source/WebInspectorUI/UserInterface/Images/EventPause.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/EventPause.svg 2019-02-01 23:29:36 UTC (rev 240884)
@@ -0,0 +1,5 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 14 14" xml:space="preserve">
+ <circle fill="rgb(191, 222, 255)" cx="7" cy="7" r="6.75"/>
+ <path fill="white" d="M 7 0.5 c 3.584 0 6.5 2.916 6.5 6.5 s -2.916 6.5 -6.5 6.5 S 0.5 10.584 0.5 7 3.416 0.5 7 0.5 M 7 0 a 7 7 0 1 0 0 14 A 7 7 0 0 0 7 0 z"/>
+ <path fill="rgb(0, 122, 255)" d="M 5.8 10 H 4.2 a 0.2 0.2 0 0 1 -0.2 -0.2 V 4.2 c 0 -0.11 0.09 -0.2 0.2 -0.2 h 1.6 c 0.11 0 0.2 0.09 0.2 0.2 v 5.6 a 0.2 0.2 0 0 1 -0.2 0.2 z M 9.8 10 H 8.2 a 0.2 0.2 0 0 1 -0.2 -0.2 V 4.2 c 0 -0.11 0.09 -0.2 0.2 -0.2 h 1.6 c 0.11 0 0.2 0.09 0.2 0.2 v 5.6 a 0.2 0.2 0 0 1 -0.2 0.2 z"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/EventPlay.svg (0 => 240884)
--- trunk/Source/WebInspectorUI/UserInterface/Images/EventPlay.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/EventPlay.svg 2019-02-01 23:29:36 UTC (rev 240884)
@@ -0,0 +1,5 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 14 14" xml:space="preserve">
+ <circle fill="rgb(191, 222, 255)" cx="7" cy="7" r="6.75"/>
+ <path fill="white" d="M 7 0.5 c 3.584 0 6.5 2.916 6.5 6.5 s -2.916 6.5 -6.5 6.5 S 0.5 10.584 0.5 7 3.416 0.5 7 0.5 M 7 0 a 7 7 0 1 0 0 14 A 7 7 0 0 0 7 0 z"/>
+ <path fill="rgb(0, 122, 255)" d="M 10.704 6.827 L 5.3 3.676 A 0.2 0.2 0 0 0 5 3.848 v 6.304 a 0.2 0.2 0 0 0 0.3 0.173 l 5.404 -3.152 a 0.2 0.2 0 0 0 0 -0.346 z"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/EventProcessing.svg (0 => 240884)
--- trunk/Source/WebInspectorUI/UserInterface/Images/EventProcessing.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/EventProcessing.svg 2019-02-01 23:29:36 UTC (rev 240884)
@@ -0,0 +1,5 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 14 14" xml:space="preserve">
+ <circle fill="rgb(191, 222, 255)" cx="7" cy="7" r="6.75"/>
+ <path fill="white" d="M 7 0.5 c 3.584 0 6.5 2.916 6.5 6.5 s -2.916 6.5 -6.5 6.5 S 0.5 10.584 0.5 7 3.416 0.5 7 0.5 M 7 0 a 7 7 0 1 0 0 14 A 7 7 0 0 0 7 0 z"/>
+ <path fill="rgb(0, 122, 255)" d="M 7 8.5 a 1.5 1.5 0 0 1 0 -3 1.5 1.5 0 0 1 0 3 z M 3 8.5 a 1.5 1.5 0 0 1 0 -3 1.5 1.5 0 0 1 0 3 z M 11 8.5 a 1.5 1.5 0 0 1 0 -3 1.5 1.5 0 0 1 0 3 z"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/EventStop.svg (0 => 240884)
--- trunk/Source/WebInspectorUI/UserInterface/Images/EventStop.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/EventStop.svg 2019-02-01 23:29:36 UTC (rev 240884)
@@ -0,0 +1,5 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 14 14" xml:space="preserve">
+ <circle fill="rgb(191, 222, 255)" cx="7" cy="7" r="6.75"/>
+ <path fill="white" d="M 7 0.5 c 3.584 0 6.5 2.916 6.5 6.5 s -2.916 6.5 -6.5 6.5 S 0.5 10.584 0.5 7 3.416 0.5 7 0.5 M 7 0 a 7 7 0 1 0 0 14 A 7 7 0 0 0 7 0 z"/>
+ <path fill="rgb(0, 122, 255)" d="M 9.8 10 H 4.2 a 0.2 0.2 0 0 1 -0.2 -0.2 V 4.2 c 0 -0.11 0.09 -0.2 0.2 -0.2 h 5.6 c 0.11 0 0.2 0.09 0.2 0.2 v 5.6 a 0.2 0.2 0 0 1 -0.2 0.2 z"/>
+</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js (240883 => 240884)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2019-02-01 23:27:30 UTC (rev 240883)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2019-02-01 23:29:36 UTC (rev 240884)
@@ -156,6 +156,26 @@
}, []);
}
+ static isPlayEvent(eventName)
+ {
+ return eventName === "play"
+ || eventName === "playing";
+ }
+
+ static isPauseEvent(eventName)
+ {
+ return eventName === "pause"
+ || eventName === "stall";
+ }
+
+ static isStopEvent(eventName)
+ {
+ return eventName === "emptied"
+ || eventName === "ended"
+ || eventName === "suspend";
+ }
+
+
// Public
get domEvents() { return this._domEvents; }
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css (240883 => 240884)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css 2019-02-01 23:27:30 UTC (rev 240883)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css 2019-02-01 23:29:36 UTC (rev 240884)
@@ -39,7 +39,7 @@
}
.dom-events-breakdown tr > :matches(th, td) {
- padding: 2px 4px;
+ padding: 4px;
text-align: start;
}
@@ -51,22 +51,20 @@
.dom-events-breakdown .graph {
position: relative;
width: 100%;
- border-right: var(--point-size) solid transparent;
- border-left: var(--point-size) solid transparent;
+ border-right: var(--img-size) solid transparent;
+ border-left: var(--img-size) solid transparent;
- --point-size: 8px;
+ --img-size: 14px;
}
-.dom-events-breakdown .graph > :matches(.point, .area) {
+.dom-events-breakdown .graph > :matches(img, .area) {
position: absolute;
}
-.dom-events-breakdown .graph > .point {
- top: calc(50% - (var(--point-size) / 2));
- width: var(--point-size);
- height: var(--point-size);
- background-color: var(--selected-background-color);
- border-radius: 50%;
+.dom-events-breakdown .graph > img {
+ top: calc(50% - (var(--img-size) / 2));
+ width: var(--img-size);
+ height: var(--img-size);
}
.dom-events-breakdown .graph > .area {
@@ -87,7 +85,7 @@
}
.dom-events-breakdown .inherited > .name,
-.dom-events-breakdown .inherited > .graph > .point {
+.dom-events-breakdown .inherited > .graph > img {
opacity: 0.5;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.js (240883 => 240884)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.js 2019-02-01 23:27:30 UTC (rev 240883)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.js 2019-02-01 23:29:36 UTC (rev 240884)
@@ -147,9 +147,16 @@
lowPowerArea.style.setProperty("width", percentOfTotalTime(lowPowerRange.endTimestamp - lowPowerRange.startTimestamp) + "%");
}
- let graphPoint = graphCell.appendChild(document.createElement("div"));
- graphPoint.classList.add("point");
- graphPoint.style.setProperty(styleAttribute, `calc(${percentOfTotalTime(domEvent.timestamp - startTimestamp)}% - (var(--point-size) / 2))`);
+ let graphImage = graphCell.appendChild(document.createElement("img"));
+ graphImage.style.setProperty(styleAttribute, `calc(${percentOfTotalTime(domEvent.timestamp - startTimestamp)}% - (var(--img-size) / 2))`);
+ if (WI.DOMNode.isPlayEvent(domEvent.eventName))
+ graphImage.src = ""
+ else if (WI.DOMNode.isPauseEvent(domEvent.eventName))
+ graphImage.src = ""
+ else if (WI.DOMNode.isStopEvent(domEvent.eventName))
+ graphImage.src = ""
+ else
+ graphImage.src = ""
}
let timeCell = rowElement.appendChild(document.createElement("td"));
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js (240883 => 240884)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2019-02-01 23:27:30 UTC (rev 240883)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2019-02-01 23:29:36 UTC (rev 240884)
@@ -721,17 +721,17 @@
let playing = false;
function createDOMEventLine(domEvents, startTimestamp, endTimestamp) {
- if (domEvents.lastValue.eventName === "ended")
+ if (WI.DOMNode.isStopEvent(domEvents.lastValue.eventName))
return;
for (let i = domEvents.length - 1; i >= 0; --i) {
let domEvent = domEvents[i];
- if (domEvent.eventName === "play" || domEvent.eventName === "playing") {
+ if (WI.DOMNode.isPlayEvent(domEvent.eventName)) {
playing = true;
break;
}
- if (domEvent.eventName === "pause" || domEvent.eventName === "stall") {
+ if (WI.DOMNode.isPauseEvent(domEvent.eventName)) {
playing = false;
break;
}
