Web Inspector: replace Range.svg icon
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Oct 2018 00:07:24 +0000 (00:07 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Oct 2018 00:07:24 +0000 (00:07 +0000)
https://bugs.webkit.org/show_bug.cgi?id=190372

Reviewed by Joseph Pecoraro.

* UserInterface/Images/Range.svg:
* UserInterface/Images/RangeLarge.svg: Added.

* UserInterface/Models/Resource.js:
(WI.Resource.classNameForResource): Added.
Create a static function for specializing the `className` of `WI.Resource` objects.

* UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView.prototype._populateNameCell):

* UserInterface/Views/ResourceTreeElement.js:
(WI.ResourceTreeElement):

* UserInterface/Views/ResourceIcons.css:
(.resource-icon.resource-type-ping .icon, .resource-icon.resource-type-beacon .icon, .large .resource-icon.resource-type-ping .icon, .large .resource-icon.resource-type-beacon .icon):
(.resource-icon.resource-type-range .icon):
(.large .resource-icon.resource-type-range .icon): Added.
Drive-by: added `.large` versions of `ping` and `beacon` icons for the
`WI.OpenResourceDialog` elements.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236950 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/Range.svg
Source/WebInspectorUI/UserInterface/Images/RangeLarge.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Models/Resource.js
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css
Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js

index 8d3fa0b..2fa6409 100644 (file)
@@ -1,5 +1,32 @@
 2018-10-08  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: replace Range.svg icon
+        https://bugs.webkit.org/show_bug.cgi?id=190372
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/Range.svg:
+        * UserInterface/Images/RangeLarge.svg: Added.
+
+        * UserInterface/Models/Resource.js:
+        (WI.Resource.classNameForResource): Added.
+        Create a static function for specializing the `className` of `WI.Resource` objects.
+
+        * UserInterface/Views/NetworkTableContentView.js:
+        (WI.NetworkTableContentView.prototype._populateNameCell):
+
+        * UserInterface/Views/ResourceTreeElement.js:
+        (WI.ResourceTreeElement):
+
+        * UserInterface/Views/ResourceIcons.css:
+        (.resource-icon.resource-type-ping .icon, .resource-icon.resource-type-beacon .icon, .large .resource-icon.resource-type-ping .icon, .large .resource-icon.resource-type-beacon .icon):
+        (.resource-icon.resource-type-range .icon):
+        (.large .resource-icon.resource-type-range .icon): Added.
+        Drive-by: added `.large` versions of `ping` and `beacon` icons for the
+        `WI.OpenResourceDialog` elements.
+
+2018-10-08  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: group media network entries by the node that triggered the request
         https://bugs.webkit.org/show_bug.cgi?id=189606
         <rdar://problem/44438527>
index 605dca3..c30125f 100644 (file)
@@ -1,8 +1,43 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<!-- Copyright © 2018 Apple Inc. All rights reserved. -->
 <svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
-    <path fill="rgb(148, 183, 219)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 Z"/>
-    <path fill="rgb(106, 136, 170)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 M 13 2 C 13.550781 2 14 2.449219 14 3 L 14 13 C 14 13.550781 13.550781 14 13 14 L 3 14 C 2.449219 14 2 13.550781 2 13 L 2 3 C 2 2.449219 2.449219 2 3 2 L 13 2"/>
-    <path fill="white" d="M 7 7.632812 L 7.027344 7.632812 C 8.28125 7.632812 9.0625 7.144531 9.0625 6.167969 C 9.0625 5.453125 8.347656 5.097656 7.230469 5.097656 L 7 5.097656 Z M 5 12 L 5 4 L 8.109375 4 C 9.800781 4 11 4.675781 11 6 C 11 6.496094 10.855469 6.941406 10.570312 7.347656 C 10.285156 7.753906 9.53125 8.050781 9.03125 8.265625 L 11.75 12 L 9.402344 12 L 7.34375 8.730469 L 7 8.730469 L 7 12 Z"/>
-    <path fill="rgb(113, 146, 184)" d="M 8.109375 3 L 4 3 L 4 13 L 8 13 L 8 11.644531 L 8.558594 12.53125 L 8.851562 13 L 13.714844 13 L 12.558594 11.410156 L 10.550781 8.652344 C 10.875 8.460938 11.175781 8.226562 11.386719 7.925781 C 11.792969 7.351562 12 6.703125 12 6 C 12 4.179688 10.472656 3 8.109375 3 M 7 7.632812 L 7.027344 7.632812 C 8.28125 7.632812 9.0625 7.144531 9.0625 6.167969 C 9.0625 5.453125 8.347656 5.097656 7.230469 5.097656 L 7 5.097656 L 7 7.632812 M 8.109375 4 C 9.796875 4 11 4.679688 11 6 C 11 6.492188 10.855469 6.941406 10.570312 7.347656 C 10.285156 7.753906 9.535156 8.050781 9.03125 8.265625 L 11.75 12 L 9.40625 12 L 7.34375 8.730469 L 7 8.730469 L 7 12 L 5 12 L 5 4 L 8.109375 4"/>
+    <style>
+    .text {
+        color: hsl(0, 0%, 30%);
+    }
+    </style>
+    <linearGradient id="border-gradient-side" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="hsl(0, 0%, 43%)"/>
+        <stop offset="100%" stop-color="hsl(0, 0%, 16%)"/>
+    </linearGradient>
+    <linearGradient id="border-gradient-bottom" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0%" stop-color="hsl(0, 0%, 39%)"/>
+        <stop offset="33%" stop-color="black"/>
+        <stop offset="66%" stop-color="black"/>
+        <stop offset="100%" stop-color="hsl(0, 0%, 39%)"/>
+    </linearGradient>
+    <linearGradient id="background-gradient" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="hsl(0, 0%, 93%)"/>
+        <stop offset="100%" stop-color="white"/>
+    </linearGradient>
+    <linearGradient id="background-gradient-inner" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="hsl(0, 0%, 87%)"/>
+        <stop offset="100%" stop-color="white"/>
+    </linearGradient>
+    <g opacity="0.40">
+        <rect fill="hsl(0, 0%, 43%)" x="2" y="0" width="12" height="1"/>
+        <rect fill="url(#border-gradient-bottom)" x="2" y="15" width="12" height="1"/>
+        <rect fill="url(#border-gradient-side)" x="2" y="0" width="1" height="15" />
+        <rect fill="url(#border-gradient-side)" x="13" y="0" width="1" height="15" />
+        <line stroke="hsl(0, 0%, 51%)" x1="2" y1="0.5" x2="3" y2="0.5"/>
+        <line stroke="hsl(0, 0%, 51%)" x1="13" y1="0.5" x2="14" y2="0.5"/>
+    </g>
+    <rect fill="url(#background-gradient)" x="3" y="1" width="10" height="14"/>
+    <rect fill="url(#background-gradient-inner)" x="4" y="2" width="8" height="13"/>
+    <g class="text">
+        <path fill="currentColor" d="M 5 3 L 7 3 L 7 7 L 6 7 L 6 4 L 5 4"/>
+        <rect fill="none" stroke="currentColor" x="8.5" y="3.5" width="2" height="3"/>
+        <rect fill="none" stroke="currentColor" x="5.5" y="9.5" width="2" height="3"/>
+        <path fill="currentColor" d="M 9 9 L 11 9 L 11 13 L 10 13 L 10 10 L 9 10"/>
+    </g>
 </svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/RangeLarge.svg b/Source/WebInspectorUI/UserInterface/Images/RangeLarge.svg
new file mode 100644 (file)
index 0000000..dd987a5
--- /dev/null
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2018 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+    <style>
+    .text {
+        color: hsl(0, 0%, 30%);
+    }
+    </style>
+    <linearGradient id="border-gradient-side" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="hsl(0, 0%, 43%)"/>
+        <stop offset="100%" stop-color="hsl(0, 0%, 16%)"/>
+    </linearGradient>
+    <linearGradient id="border-gradient-bottom" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0%" stop-color="hsl(0, 0%, 20%)"/>
+        <stop offset="33%" stop-color="black"/>
+        <stop offset="66%" stop-color="black"/>
+        <stop offset="100%" stop-color="hsl(0, 0%, 39%)"/>
+    </linearGradient>
+    <linearGradient id="background-gradient" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="hsl(0, 0%, 93%)"/>
+        <stop offset="100%" stop-color="white"/>
+    </linearGradient>
+    <g opacity="0.50">
+        <rect fill="hsl(0, 0%, 43%)" x="2" y="0" width="12" height="0.5"/>
+        <rect fill="url(#border-gradient-bottom)" x="2" y="15" width="12" height="0.5"/>
+        <rect fill="url(#border-gradient-side)" x="2" y="0" width="0.5" height="15" />
+        <rect fill="url(#border-gradient-side)" x="13.5" y="0" width="0.5" height="15" />
+    </g>
+    <rect fill="url(#background-gradient)" x="2.5" y="0.5" width="11" height="14.5"/>
+    <g class="text">
+        <path fill="currentColor" d="M 5 3 L 7 3 L 7 7 L 6 7 L 6 4 L 5 4"/>
+        <rect fill="none" stroke="currentColor" x="8.5" y="3.5" width="2" height="3"/>
+        <rect fill="none" stroke="currentColor" x="5.5" y="9.5" width="2" height="3"/>
+        <path fill="currentColor" d="M 9 9 L 11 9 L 11 13 L 10 13 L 10 10 L 9 10"/>
+    </g>
+</svg>
index d4eb98f..c29df79 100644 (file)
@@ -174,6 +174,15 @@ WI.Resource = class Resource extends WI.SourceCode
         }
     }
 
+    static classNameForResource(resource)
+    {
+        if (resource.type === WI.Resource.Type.Other) {
+            if (resource.requestedByteRange)
+                return "resource-type-range";
+        }
+        return resource.type;
+    }
+
     static displayNameForProtocol(protocol)
     {
         switch (protocol) {
index 3e55bac..ac8e9c8 100644 (file)
@@ -518,19 +518,16 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
                 cell.classList.add("grouped-by-node");
 
                 let range = resource.requestedByteRange;
-                if (range) {
-                    cell.classList.add("resource-type-range");
+                if (range)
                     nameElement.textContent = WI.UIString("Byte Range %s\u2013%s").format(range.start, range.end);
-                }
             }
         }
 
-        if (!nameElement.textContent) {
-            cell.classList.add(resource.type);
+        if (!nameElement.textContent)
             nameElement.textContent = entry.name;
-        }
 
         cell.title = resource.url;
+        cell.classList.add(WI.Resource.classNameForResource(resource));
     }
 
     _populateDomainCell(cell, entry)
index fc0cce7..a16bc58 100644 (file)
@@ -72,7 +72,9 @@
 }
 
 .resource-icon.resource-type-ping .icon,
-.resource-icon.resource-type-beacon .icon {
+.resource-icon.resource-type-beacon .icon,
+.large .resource-icon.resource-type-ping .icon,
+.large .resource-icon.resource-type-beacon .icon {
     content: url(../Images/Beacon.svg);
 }
 
 .large .resource-icon.resource-type-websocket .icon {
     content: image-set(url(../Images/WebSocketLarge.png) 1x, url(../Images/WebSocketLarge@2x.png) 2x);
 }
+
+.large .resource-icon.resource-type-range .icon {
+    content: url(../Images/RangeLarge.svg);
+}
index 62b5fc7..216233d 100644 (file)
@@ -31,7 +31,7 @@ WI.ResourceTreeElement = class ResourceTreeElement extends WI.SourceCodeTreeElem
 
         const title = null;
         const subtitle = null;
-        super(resource, ["resource", WI.ResourceTreeElement.ResourceIconStyleClassName, resource.type], title, subtitle, representedObject || resource);
+        super(resource, ["resource", WI.ResourceTreeElement.ResourceIconStyleClassName, WI.Resource.classNameForResource(resource)], title, subtitle, representedObject || resource);
 
         this._updateResource(resource);
     }