Attachment 359560 Details for Bug 190381 – Patch

[patch] Patch

bug-190381-20190118171408.patch (text/plain), 11.16 KB, created by Devin Rousso on 2019-01-18 17:14:09 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-01-18 17:14:09 PST

Size: 11.16 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index fe668cfe686e68d163f119b1ca5c983d1c2f7843..b51c5b9df256cf2bbe226b6504c17fcc23570c45 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,36 @@
>+2019-01-18  Devin Rousso  <drousso@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 NOBODY (OOPS!).
>+
>+        * 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-01-18  Jer Noble  <jer.noble@apple.com>
> 
>         SDK_VARIANT build destinations should be separate from non-SDK_VARIANT builds
>diff --git a/Source/WebInspectorUI/UserInterface/Images/EventPause.svg b/Source/WebInspectorUI/UserInterface/Images/EventPause.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..faec1df14d212e780f570d57a781faa3552e94f0
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/EventPause.svg
>@@ -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>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/EventPlay.svg b/Source/WebInspectorUI/UserInterface/Images/EventPlay.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..8f015c2f7b2167788b3565f46d0ed2728d5976d9
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/EventPlay.svg
>@@ -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>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/EventProcessing.svg b/Source/WebInspectorUI/UserInterface/Images/EventProcessing.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..6903f57f6108a8493daef239fb9392aed9f302b6
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/EventProcessing.svg
>@@ -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>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/EventStop.svg b/Source/WebInspectorUI/UserInterface/Images/EventStop.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..2df61963159f318c373d376d482341e1ab5221a2
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/EventStop.svg
>@@ -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>
>diff --git a/Source/WebInspectorUI/UserInterface/Models/DOMNode.js b/Source/WebInspectorUI/UserInterface/Models/DOMNode.js
>index 8583b37ac7fb4cde3ecf21c29f76cbd13de4566b..1b5d4eb417e597997e5a782dae9c03d679f616b6 100644
>--- a/Source/WebInspectorUI/UserInterface/Models/DOMNode.js
>+++ b/Source/WebInspectorUI/UserInterface/Models/DOMNode.js
>@@ -156,6 +156,26 @@ WI.DOMNode = class DOMNode extends WI.Object
>         }, []);
>     }
> 
>+    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; }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css b/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css
>index bc88db4ef9ddb67fdf8da14b87fb6769a60a1fc9..64aea24b1d45bb71e08e4ee8aa54fd9d7bfc012a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css
>@@ -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;
> }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.js b/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.js
>index 29104d0542c121b67e86a4035b72c5acd93f1793..89ff5ffa83bd05aabf932764434db4722988ba56 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.js
>@@ -147,9 +147,16 @@ WI.DOMEventsBreakdownView = class DOMEventsBreakdownView extends WI.View
>                     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 = "Images/EventPlay.svg";
>+                else if (WI.DOMNode.isPauseEvent(domEvent.eventName))
>+                    graphImage.src = "Images/EventPause.svg";
>+                else if (WI.DOMNode.isStopEvent(domEvent.eventName))
>+                    graphImage.src = "Images/EventStop.svg";
>+                else
>+                    graphImage.src = "Images/EventProcessing.svg";
>             }
> 
>             let timeCell = rowElement.appendChild(document.createElement("td"));
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
>index 3c718282f9889a87f752d86d3ec36622c734043e..9f16117f3858bd0642fd2f936362e63b2251ac3f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
>@@ -721,17 +721,17 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
>             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;
>                     }

Actions: View | Formatted Diff | Diff

Attachments on bug 190381: 359560 | 359561