Changeset 248912 in webkit

Timestamp:

Aug 20, 2019 12:17:59 PM (5 years ago)

Author:

Joseph Pecoraro

Message:

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Images/Origin.svg (added)
• UserInterface/Main.html (modified) (1 diff)
• UserInterface/Views/FolderIcon.css (modified) (1 diff)
• UserInterface/Views/OriginTreeElement.js (copied) (copied from trunk/Source/WebInspectorUI/UserInterface/Views/FolderIcon.css) (2 diffs)
• UserInterface/Views/SourcesNavigationSidebarPanel.js (modified) (7 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/UserInterface/Main.html

@@ -738 +738 @@
     <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>

trunk/Source/WebInspectorUI/UserInterface/Views/FolderIcon.css

@@ -27 +27 @@
     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);
+    }
+}

trunk/Source/WebInspectorUI/UserInterface/Views/OriginTreeElement.js

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2019 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -24 +24 @@
  */
 
-.folder-icon .icon {
-    content: image-set(url(../Images/FolderGeneric.png) 1x, url(../Images/FolderGeneric@2x.png) 2x);
-}
+WI.OriginTreeElement = class OriginTreeElement extends WI.GeneralTreeElement
+{
+    constructor(title, representedObject, options)
+    {
+        const classNames = ["origin-icon"];
+        const subtitle = null;
+        super(classNames, title, subtitle, representedObject, options);
+    }
+};

trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js

@@ -575 +575 @@
 
         // 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;
 
@@ -644 +644 @@
             (treeElement) => treeElement === this._mainFrameTreeElement,
             (treeElement) => treeElement instanceof WI.FrameTreeElement,
+            (treeElement) => treeElement instanceof WI.OriginTreeElement,
             (treeElement) => {
                 return treeElement !== this._extensionScriptsFolderTreeElement
@@ -687 +688 @@
 
             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;
@@ -760 +761 @@
                 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 index = insertionIndexForObjectInListSortedByFunction(frameTreeElement, this._resourcesTreeOutline.children, this._boundCompareTreeElements);
-                        this._resourcesTreeOutline.insertChild(frameTreeElement, index);
+                    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(originTreeElement, this._resourcesTreeOutline.children, this._boundCompareTreeElements);
+                        this._resourcesTreeOutline.insertChild(originTreeElement, index);
                     }
 
@@ -773 +774 @@
                         subpath = subpath.substring(1);
 
-                    parentTreeElement = frameTreeElement.createFoldersAsNeededForSubpath(subpath, this._boundCompareTreeElements);
+                    parentTreeElement = originTreeElement.createFoldersAsNeededForSubpath(subpath, this._boundCompareTreeElements);
                 } else
                     parentTreeElement = this._resourcesTreeOutline;
@@ -1549 +1550 @@
 
         if (treeElement instanceof WI.FolderTreeElement
+            || treeElement instanceof WI.OriginTreeElement
             || treeElement instanceof WI.ResourceTreeElement
             || treeElement instanceof WI.ScriptTreeElement
@@ -1844 +1846 @@
         parentTreeElement.removeChild(scriptTreeElement);
 
-        if (parentTreeElement instanceof WI.FolderTreeElement) {
+        if (parentTreeElement instanceof WI.FolderTreeElement || parentTreeElement instanceof WI.OriginTreeElement) {
             parentTreeElement.representedObject.remove(script);