Web Inspector: Sources: Give Origins their own icon in the Sources sidebar
authorpecoraro@apple.com <pecoraro@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Aug 2019 19:17:59 +0000 (19:17 +0000)
committerpecoraro@apple.com <pecoraro@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Aug 2019 19:17:59 +0000 (19:17 +0000)
https://bugs.webkit.org/show_bug.cgi?id=200683
<rdar://problem/54269044>

Reviewed by Devin Rousso.

* UserInterface/Images/Origin.svg: Added.
* UserInterface/Main.html:
New resources.

* UserInterface/Views/FolderIcon.css:
(.origin-icon .icon):
Light and Dark appearances for Origin icons.

(@media (prefers-color-scheme: dark)):
* UserInterface/Views/OriginTreeElement.js:
(WI.OriginTreeElement):
Very much like a folder with different classes.

* UserInterface/Views/SourcesNavigationSidebarPanel.js:
(WI.SourcesNavigationSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
(WI.SourcesNavigationSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
(WI.SourcesNavigationSidebarPanel.prototype._compareTreeElements):
(WI.SourcesNavigationSidebarPanel.prototype._handleResourceGroupingModeChanged):
Use OriginTreeElement in a few places.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/Origin.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/FolderIcon.css
Source/WebInspectorUI/UserInterface/Views/OriginTreeElement.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js

index 4d02529..925127d 100644 (file)
@@ -1,5 +1,33 @@
 2019-08-20  Joseph Pecoraro  <pecoraro@apple.com>
 
+        Web Inspector: Sources: Give Origins their own icon in the Sources sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=200683
+        <rdar://problem/54269044>
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Images/Origin.svg: Added.
+        * UserInterface/Main.html:
+        New resources.
+
+        * UserInterface/Views/FolderIcon.css:
+        (.origin-icon .icon):
+        Light and Dark appearances for Origin icons.
+
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/OriginTreeElement.js:
+        (WI.OriginTreeElement):
+        Very much like a folder with different classes.
+
+        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
+        (WI.SourcesNavigationSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
+        (WI.SourcesNavigationSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+        (WI.SourcesNavigationSidebarPanel.prototype._compareTreeElements):
+        (WI.SourcesNavigationSidebarPanel.prototype._handleResourceGroupingModeChanged):
+        Use OriginTreeElement in a few places.
+
+2019-08-20  Joseph Pecoraro  <pecoraro@apple.com>
+
         Web Inspector: Support for JavaScript BigInt
         https://bugs.webkit.org/show_bug.cgi?id=180731
         <rdar://problem/36298748>
diff --git a/Source/WebInspectorUI/UserInterface/Images/Origin.svg b/Source/WebInspectorUI/UserInterface/Images/Origin.svg
new file mode 100644 (file)
index 0000000..503dc25
--- /dev/null
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2019 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64">
+    <defs>
+        <radialGradient id="gradient" cx="58.6%" cy="27.74%" fx="58.6%" fy="27.74%" r="57.5%" gradientTransform="translate(0.59, 0.28), rotate(98.61), scale(1, 0.98), translate(-0.59, -0.28)">
+            <stop stop-color="rgb(168, 171, 182)" offset="0%"/>
+            <stop stop-color="rgb(53, 55, 76)" offset="100%"/>
+        </radialGradient>
+    </defs>
+    <circle fill="url(#gradient)" cx="31.9" cy="32" r="28.9"/>
+    <path fill="white" d="M 31.88 60.9 C 31.2 60.9 30.52 60.88 29.85 60.83 C 29.62 58.9 29.5 56.92 29.5 54.9 C 29.5 53.69 29.54 52.5 29.63 51.32 C 28.79 50.88 28.17 50.07 27.97 49.12 C 24.05 48.62 20.31 47.58 16.86 46.07 C 16.5 46.48 16.05 46.82 15.56 47.07 C 17.16 51.51 19.71 55.7 23.04 59.52 C 21.73 59.09 20.45 58.58 19.23 57.98 C 16.79 54.7 14.88 51.18 13.58 47.5 C 11.32 47.43 9.5 45.58 9.5 43.3 C 9.5 42.85 9.57 42.42 9.7 42.02 C 7.34 40.33 5.2 38.4 3.31 36.26 C 3.14 35.09 3.04 33.91 3.01 32.71 C 5.16 35.6 7.77 38.16 10.75 40.31 C 11.06 40.01 11.4 39.76 11.79 39.56 C 11.66 38.39 11.6 37.2 11.6 36.0 C 11.6 33.2 11.94 30.47 12.6 27.81 C 11.61 27.16 10.91 26.1 10.74 24.87 C 8.53 24.34 6.44 23.62 4.51 22.75 C 4.73 22.11 4.96 21.49 5.22 20.88 C 6.99 21.68 8.91 22.36 10.95 22.87 C 11.54 21.25 13.08 20.1 14.9 20.1 C 15.08 20.1 15.27 20.11 15.44 20.13 C 18.67 13.71 23.8 7.94 30.35 3.14 C 30.87 3.11 31.38 3.1 31.9 3.1 C 32.54 3.1 33.18 3.12 33.82 3.16 C 26.48 8.03 20.77 14.08 17.32 20.87 C 18.32 21.57 18.99 22.69 19.09 23.98 C 19.5 23.99 19.93 24.0 20.35 24.0 C 24.73 24.0 28.86 23.3 32.51 22.06 C 32.5 21.99 32.5 21.92 32.5 21.85 C 32.5 20.5 33.33 19.34 34.5 18.85 C 34.72 13.51 36.33 8.47 39.03 3.99 C 39.71 4.16 40.37 4.35 41.03 4.57 C 38.37 8.83 36.77 13.62 36.51 18.69 C 37.1 18.83 37.63 19.13 38.04 19.54 C 43.2 16.51 46.58 12.19 47.04 7.38 C 47.68 7.77 48.3 8.19 48.9 8.62 C 48.02 13.72 44.33 18.19 38.96 21.32 C 38.99 21.5 39.0 21.67 39.0 21.85 C 39.0 23.25 38.12 24.43 36.89 24.9 C 37.05 25.86 37.27 26.81 37.53 27.75 C 37.57 27.75 37.61 27.75 37.65 27.75 C 37.95 27.75 38.25 27.79 38.53 27.87 C 42.85 22.83 48.41 19.8 54.5 19.8 C 55.79 19.8 57.05 19.94 58.29 20.2 C 58.62 20.95 58.93 21.71 59.2 22.5 C 57.68 22.04 56.11 21.8 54.5 21.8 C 49.12 21.8 44.14 24.49 40.21 28.99 C 40.64 29.54 40.9 30.24 40.9 31.0 C 40.9 31.98 40.47 32.86 39.78 33.45 C 41.33 36.43 43.38 39.19 45.85 41.65 C 46.5 41.24 47.27 41.0 48.1 41.0 C 49.56 41.0 50.85 41.75 51.6 42.88 C 54.93 41.09 57.93 38.82 60.5 36.19 C 60.33 37.36 60.09 38.5 59.78 39.62 C 57.52 41.61 55.0 43.35 52.28 44.79 C 52.29 44.92 52.3 45.06 52.3 45.2 C 52.3 45.71 52.21 46.2 52.04 46.65 C 53.15 47.37 54.31 48.04 55.51 48.67 C 55.12 49.22 54.71 49.76 54.28 50.28 C 53.12 49.67 52.0 49.01 50.92 48.31 C 50.18 48.98 49.19 49.4 48.1 49.4 C 46.77 49.4 45.58 48.78 44.81 47.81 C 41.46 48.78 37.92 49.35 34.25 49.44 C 33.87 50.61 32.85 51.49 31.61 51.67 C 31.54 52.73 31.5 53.81 31.5 54.9 C 31.5 56.95 31.63 58.96 31.88 60.9 L 31.88 60.9 Z M 28.18 47.13 C 28.59 46.2 29.43 45.5 30.45 45.27 C 31.37 40.7 32.94 36.5 35.01 32.89 C 34.63 32.36 34.4 31.71 34.4 31.0 C 34.4 29.96 34.89 29.04 35.64 28.44 C 35.32 27.31 35.06 26.15 34.87 24.98 C 34.22 24.8 33.66 24.42 33.24 23.92 C 29.36 25.25 24.98 26.0 20.35 26.0 C 19.81 26.0 19.28 25.99 18.75 25.97 C 18.11 27.46 16.62 28.5 14.9 28.5 C 14.76 28.5 14.63 28.49 14.49 28.48 C 13.91 30.93 13.6 33.44 13.6 36.0 C 13.6 37.04 13.65 38.08 13.75 39.1 C 16.05 39.13 17.9 41.0 17.9 43.3 C 17.9 43.64 17.86 43.97 17.78 44.29 C 21.02 45.69 24.51 46.66 28.18 47.13 L 28.18 47.13 Z M 32.45 45.47 C 33.29 45.84 33.95 46.55 34.24 47.44 C 37.62 47.35 40.88 46.84 43.97 45.97 C 43.92 45.72 43.9 45.46 43.9 45.2 C 43.9 44.43 44.1 43.72 44.46 43.1 C 41.8 40.45 39.59 37.47 37.93 34.24 C 37.84 34.25 37.75 34.25 37.65 34.25 C 37.29 34.25 36.95 34.19 36.63 34.09 C 34.76 37.41 33.32 41.26 32.45 45.47 L 32.45 45.47 Z"/>
+    <circle fill="none" stroke="rgb(88, 90, 99)" stroke-width="3" cx="31.9" cy="32" r="28.9"/>
+</svg>
index cfd3fd0..b38da97 100644 (file)
     <script src="Views/ObjectTreeSetIndexTreeElement.js"></script>
     <script src="Views/ObjectTreeView.js"></script>
     <script src="Views/OpenResourceDialog.js"></script>
+    <script src="Views/OriginTreeElement.js"></script>
     <script src="Views/OverviewTimelineView.js"></script>
     <script src="Views/ProbeDetailsSidebarPanel.js"></script>
     <script src="Views/ProbeSetDataGrid.js"></script>
index 05c46ba..43a285c 100644 (file)
 .folder-icon .icon {
     content: image-set(url(../Images/FolderGeneric.png) 1x, url(../Images/FolderGeneric@2x.png) 2x);
 }
+
+.origin-icon .icon {
+    content: url(../Images/Origin.svg);
+}
+
+@media (prefers-color-scheme: dark) {
+    .origin-icon .icon {
+        filter: brightness(0.9);
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/OriginTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/OriginTreeElement.js
new file mode 100644 (file)
index 0000000..7d7ca6e
--- /dev/null
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2019 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.OriginTreeElement = class OriginTreeElement extends WI.GeneralTreeElement
+{
+    constructor(title, representedObject, options)
+    {
+        const classNames = ["origin-icon"];
+        const subtitle = null;
+        super(classNames, title, subtitle, representedObject, options);
+    }
+};
index 9e9d048..1f3ef0a 100644 (file)
@@ -574,7 +574,7 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
             return true;
 
         // Folders are hidden on the first pass, but visible childen under the folder will force the folder visible again.
-        if (treeElement instanceof WI.FolderTreeElement)
+        if (treeElement instanceof WI.FolderTreeElement || treeElement instanceof WI.OriginTreeElement)
             return false;
 
         if (treeElement instanceof WI.IssueTreeElement)
@@ -643,6 +643,7 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
             (treeElement) => treeElement instanceof WI.CSSStyleSheetTreeElement && treeElement.representedObject.isInspectorStyleSheet(),
             (treeElement) => treeElement === this._mainFrameTreeElement,
             (treeElement) => treeElement instanceof WI.FrameTreeElement,
+            (treeElement) => treeElement instanceof WI.OriginTreeElement,
             (treeElement) => {
                 return treeElement !== this._extensionScriptsFolderTreeElement
                     && treeElement !== this._extraScriptsFolderTreeElement
@@ -686,7 +687,7 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
             this._originTreeElementMap.clear();
 
             let origin = mainFrame.urlComponents.origin;
-            this._mainFrameTreeElement = new WI.FolderTreeElement(origin);
+            this._mainFrameTreeElement = new WI.OriginTreeElement(origin, mainFrame, {hasChildren: true});
             this._originTreeElementMap.set(origin, this._mainFrameTreeElement);
             break;
         }
@@ -759,20 +760,20 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
             if (!parentTreeElement) {
                 let origin = resource.urlComponents.origin;
                 if (origin) {
-                    let frameTreeElement = this._originTreeElementMap.get(origin);
-                    if (!frameTreeElement) {
-                        frameTreeElement = new WI.FolderTreeElement(origin);
-                        this._originTreeElementMap.set(origin, frameTreeElement);
+                    let originTreeElement = this._originTreeElementMap.get(origin);
+                    if (!originTreeElement) {
+                        originTreeElement = new WI.OriginTreeElement(origin, resource.parentFrame, {hasChildren: true});
+                        this._originTreeElementMap.set(origin, originTreeElement);
 
-                        let index = insertionIndexForObjectInListSortedByFunction(frameTreeElement, this._resourcesTreeOutline.children, this._boundCompareTreeElements);
-                        this._resourcesTreeOutline.insertChild(frameTreeElement, index);
+                        let index = insertionIndexForObjectInListSortedByFunction(originTreeElement, this._resourcesTreeOutline.children, this._boundCompareTreeElements);
+                        this._resourcesTreeOutline.insertChild(originTreeElement, index);
                     }
 
                     let subpath = resource.urlComponents.path;
                     if (subpath && subpath[0] === "/")
                         subpath = subpath.substring(1);
 
-                    parentTreeElement = frameTreeElement.createFoldersAsNeededForSubpath(subpath, this._boundCompareTreeElements);
+                    parentTreeElement = originTreeElement.createFoldersAsNeededForSubpath(subpath, this._boundCompareTreeElements);
                 } else
                     parentTreeElement = this._resourcesTreeOutline;
             }
@@ -1548,6 +1549,7 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
             return;
 
         if (treeElement instanceof WI.FolderTreeElement
+            || treeElement instanceof WI.OriginTreeElement
             || treeElement instanceof WI.ResourceTreeElement
             || treeElement instanceof WI.ScriptTreeElement
             || treeElement instanceof WI.CSSStyleSheetTreeElement) {
@@ -1843,7 +1845,7 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         let parentTreeElement = scriptTreeElement.parent;
         parentTreeElement.removeChild(scriptTreeElement);
 
-        if (parentTreeElement instanceof WI.FolderTreeElement) {
+        if (parentTreeElement instanceof WI.FolderTreeElement || parentTreeElement instanceof WI.OriginTreeElement) {
             parentTreeElement.representedObject.remove(script);
 
             if (!parentTreeElement.children.length)