Add support for toggling between small and large resource rows
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Apr 2008 17:05:19 +0000 (17:05 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Apr 2008 17:05:19 +0000 (17:05 +0000)
in the Resources panel.

Reviewed by Adam Roben.

* English.lproj/InspectorLocalizedStrings.js: Added new tooltip string.
* page/inspector/Images/largerResourcesButtons.png: Added.
* page/inspector/Images/resourceDocumentIconSmall.png: Added.
* page/inspector/Images/resourcePlainIconSmall.png: Added.
* page/inspector/ResourcesPanel.js:
(WebInspector.ResourcesPanel): Create the status bar button and
setup the event listener to call _toggleLargerResources.
(WebInspector.ResourcesPanel.get statusBarItems): Return the status bar button.
(WebInspector.ResourcesPanel._toggleLargerResources): Toggle the class names
for the resources children list and the status bar button.
* page/inspector/inspector.css: New style rules for small resources
and the status bar item.

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

WebCore/ChangeLog
WebCore/English.lproj/InspectorLocalizedStrings.js
WebCore/page/inspector/Images/largerResourcesButtons.png [new file with mode: 0644]
WebCore/page/inspector/Images/resourceDocumentIconSmall.png [new file with mode: 0644]
WebCore/page/inspector/Images/resourcePlainIconSmall.png [new file with mode: 0644]
WebCore/page/inspector/ResourcesPanel.js
WebCore/page/inspector/inspector.css

index 348cf9c..218b275 100644 (file)
@@ -1,3 +1,23 @@
+2008-04-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for toggling between small and large resource rows
+        in the Resources panel.
+
+        Reviewed by Adam Roben.
+
+        * English.lproj/InspectorLocalizedStrings.js: Added new tooltip string.
+        * page/inspector/Images/largerResourcesButtons.png: Added.
+        * page/inspector/Images/resourceDocumentIconSmall.png: Added.
+        * page/inspector/Images/resourcePlainIconSmall.png: Added.
+        * page/inspector/ResourcesPanel.js:
+        (WebInspector.ResourcesPanel): Create the status bar button and
+        setup the event listener to call _toggleLargerResources.
+        (WebInspector.ResourcesPanel.get statusBarItems): Return the status bar button.
+        (WebInspector.ResourcesPanel._toggleLargerResources): Toggle the class names
+        for the resources children list and the status bar button.
+        * page/inspector/inspector.css: New style rules for small resources
+        and the status bar item.
+
 2008-04-14  Chris Fleizach  <cfleizach@apple.com>
 
         Reviewed by Darin Adler
index 6f07fda..e9a9100 100644 (file)
Binary files a/WebCore/English.lproj/InspectorLocalizedStrings.js and b/WebCore/English.lproj/InspectorLocalizedStrings.js differ
diff --git a/WebCore/page/inspector/Images/largerResourcesButtons.png b/WebCore/page/inspector/Images/largerResourcesButtons.png
new file mode 100644 (file)
index 0000000..caf3f14
Binary files /dev/null and b/WebCore/page/inspector/Images/largerResourcesButtons.png differ
diff --git a/WebCore/page/inspector/Images/resourceDocumentIconSmall.png b/WebCore/page/inspector/Images/resourceDocumentIconSmall.png
new file mode 100644 (file)
index 0000000..468ced9
Binary files /dev/null and b/WebCore/page/inspector/Images/resourceDocumentIconSmall.png differ
diff --git a/WebCore/page/inspector/Images/resourcePlainIconSmall.png b/WebCore/page/inspector/Images/resourcePlainIconSmall.png
new file mode 100644 (file)
index 0000000..0fa967d
Binary files /dev/null and b/WebCore/page/inspector/Images/resourcePlainIconSmall.png differ
index ffaecee..fe4d9a9 100644 (file)
@@ -103,6 +103,12 @@ WebInspector.ResourcesPanel = function()
 
     this.resourcesTreeElement.expand();
 
+    this.largerResourcesButton = document.createElement("button");
+    this.largerResourcesButton.id = "resources-larger-resources-status-bar-item";
+    this.largerResourcesButton.className = "status-bar-item toggled-on";
+    this.largerResourcesButton.title = WebInspector.UIString("Use large resource rows.");
+    this.largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false);
+
     this.sortingFunction = WebInspector.ResourceSidebarTreeElement.CompareByTime;
 
     this.reset();
@@ -118,6 +124,11 @@ WebInspector.ResourcesPanel.prototype = {
         return WebInspector.UIString("Resources");
     },
 
+    get statusBarItems()
+    {
+        return [this.largerResourcesButton];
+    },
+
     show: function()
     {
         WebInspector.Panel.prototype.show.call(this);
@@ -790,6 +801,20 @@ WebInspector.ResourcesPanel.prototype = {
         this.containerElement.scrollTop = 0;
     },
 
+    _toggleLargerResources: function()
+    {
+        if (!this.resourcesTreeElement._childrenListNode)
+            return;
+
+        if (this.resourcesTreeElement._childrenListNode.hasStyleClass("small")) {
+            this.resourcesTreeElement._childrenListNode.removeStyleClass("small");
+            this.largerResourcesButton.addStyleClass("toggled-on");
+        } else {
+            this.resourcesTreeElement._childrenListNode.addStyleClass("small");
+            this.largerResourcesButton.removeStyleClass("toggled-on");
+        }
+    },
+
     _createResourceView: function(resource)
     {
         if (resource.finished && !resource.failed) {
index df7749b..7d93ae7 100644 (file)
@@ -1241,6 +1241,22 @@ body.inactive .sidebar {
     background-image: url(Images/errorIcon.png);
 }
 
+#resources-larger-resources-status-bar-item {
+    background-image: url(Images/largerResourcesButtons.png);
+}
+
+#resources-larger-resources-status-bar-item:active {
+    background-position: 32px 0;
+}
+
+#resources-larger-resources-status-bar-item.toggled-on {
+    background-position: 0 24px;
+}
+
+#resources-larger-resources-status-bar-item.toggled-on:active {
+    background-position: 32px 24px;
+}
+
 #resources-container {
     position: absolute;
     top: 0;
@@ -1525,6 +1541,10 @@ body.inactive .sidebar {
     padding-left: 10px !important;
 }
 
+.sidebar-tree-section + .children.small > .sidebar-tree-item {
+    padding-left: 17px !important;
+}
+
 .sidebar-tree > .children > .sidebar-tree-item {
     padding-left: 37px;
 }
@@ -1597,12 +1617,12 @@ body.inactive .sidebar-tree-item .disclosure-button:active {
     margin-right: 3px;
 }
 
-.sidebar-tree.small .sidebar-tree-item, .sidebar-tree-item.small {
+.sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small {
     height: 20px;
     .sidebar-tree-itemne-height: 18px;
 }
 
-.sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
+.sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
     width: 16px;
     height: 16px;
 }
@@ -1617,7 +1637,7 @@ body.inactive .sidebar-tree-item .disclosure-button:active {
     font-weight: bold;
 }
 
-.sidebar-tree.small .sidebar-tree-item.selected, .sidebar-tree-item.small.selected {
+.sidebar-tree.small .sidebar-tree-item.selected, .sidebar-tree .children.small .sidebar-tree-item.selected, .sidebar-tree-item.small.selected {
     background-image: url(Images/sidebarSmallSelectionBackground.png);
 }
 
@@ -1626,7 +1646,7 @@ body.inactive .sidebar-tree-item .disclosure-button:active {
     background-color: rgb(61, 118, 194);
 }
 
-.focused .sidebar-tree.small .sidebar-tree-item.selected, .focused .sidebar-tree-item.small.selected {
+.focused .sidebar-tree.small .sidebar-tree-item.selected, .focused .sidebar-tree .children.small .sidebar-tree-item.selected, .focused .sidebar-tree-item.small.selected {
     background-image: url(Images/sidebarSmallSelectionBackgroundFocused.png);
 }
 
@@ -1635,7 +1655,7 @@ body.inactive .sidebar-tree-item.selected {
     background-color: rgb(154, 154, 154);
 }
 
-body.inactive .sidebar-tree.small .sidebar-tree-item.selected, body.inactive .sidebar-tree-item.small.selected {
+body.inactive .sidebar-tree.small .sidebar-tree-item.selected, body.inactive .sidebar-tree .children.small .sidebar-tree-item.selected, body.inactive .sidebar-tree-item.small.selected {
     background-image: url(Images/sidebarSmallSelectionBackgroundInactive.png);
 }
 
@@ -1653,12 +1673,12 @@ body.inactive .sidebar-tree.small .sidebar-tree-item.selected, body.inactive .si
     top: 11px;
 }
 
-.sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
+.sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
     top: 3px;
     line-height: normal;
 }
 
-.sidebar-tree:not(.small) .sidebar-tree-item .title::after, .sidebar-tree-item:not(.small) .title::after {
+.sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
     content: "\A";
     white-space: pre;
 }
@@ -1668,7 +1688,7 @@ body.inactive .sidebar-tree.small .sidebar-tree-item.selected, body.inactive .si
     color: rgba(0, 0, 0, 0.7);
 }
 
-.sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
+.sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
     display: none;
 }
 
@@ -1719,22 +1739,46 @@ body.inactive .sidebar-tree.small .sidebar-tree-item.selected, body.inactive .si
     content: url(Images/resourcePlainIcon.png);
 }
 
+.children.small .resource-sidebar-tree-item .icon {
+    content: url(Images/resourcePlainIconSmall.png);
+}
+
 .resource-sidebar-tree-item.resources-category-documents .icon {
     content: url(Images/resourceDocumentIcon.png);
 }
 
+.children.small .resource-sidebar-tree-item.resources-category-documents .icon {
+    content: url(Images/resourceDocumentIconSmall.png);
+}
+
 .resource-sidebar-tree-item.resources-category-stylesheets .icon {
     content: url(Images/resourceCSSIcon.png);
 }
 
+.children.small .resource-sidebar-tree-item.resources-category-stylesheets .icon {
+    content: url(Images/resourceDocumentIconSmall.png);
+}
+
 .resource-sidebar-tree-item.resources-category-images .icon {
     content: url(Images/resourcePlainIcon.png);
 }
 
+.children.small .resource-sidebar-tree-item.resources-category-images .icon {
+    content: url(Images/resourcePlainIconSmall.png);
+}
+
 .resource-sidebar-tree-item.resources-category-fonts .icon {
     content: url(Images/resourcePlainIcon.png);
 }
 
+.children.small .resource-sidebar-tree-item.resources-category-fonts .icon {
+    content: url(Images/resourcePlainIconSmall.png);
+}
+
 .resource-sidebar-tree-item.resources-category-scripts .icon {
     content: url(Images/resourcePlainIcon.png);
 }
+
+.children.small .resource-sidebar-tree-item.resources-category-scripts .icon {
+    content: url(Images/resourceDocumentIconSmall.png);
+}