Fixes the regression where image resources don't have a preview icon.
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 31 May 2008 06:05:04 +0000 (06:05 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 31 May 2008 06:05:04 +0000 (06:05 +0000)
        https://bugs.webkit.org/show_bug.cgi?id=18500

        Reviewed by Adam Roben.

        * page/inspector/ResourcesPanel.js:
        (WebInspector.ResourceSidebarTreeElement): Call createIconElement before
        calling the superclass.
        (WebInspector.ResourceSidebarTreeElement.prototype.createIconElement):
        Create an iconElement, if the category is images then make a div that
        contains a preview image. Otherwise just make an img element. If there
        was a previous iconElement, then replace it.
        (WebInspector.ResourceSidebarTreeElement.prototype.refresh): Call
        createIconElement if the category changed.
        * page/inspector/SidebarTreeElement.js:
        (WebInspector.SidebarTreeElement): Create an iconElement if one hasn't
        been made already by a subclass.
        (WebInspector.SidebarTreeElement.prototype.onattach): Append the iconElement
        instead of creating one each time.
        * page/inspector/inspector.css: New and updated style rules.

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

WebCore/ChangeLog
WebCore/page/inspector/ResourcesPanel.js
WebCore/page/inspector/SidebarTreeElement.js
WebCore/page/inspector/inspector.css

index e5d7a90..ae62abe 100644 (file)
 
 2008-05-29  Timothy Hatcher  <timothy@apple.com>
 
+        Fixes the regression where image resources don't have a preview icon.
+
+        https://bugs.webkit.org/show_bug.cgi?id=18500
+
+        Reviewed by Adam Roben.
+
+        * page/inspector/ResourcesPanel.js:
+        (WebInspector.ResourceSidebarTreeElement): Call createIconElement before
+        calling the superclass.
+        (WebInspector.ResourceSidebarTreeElement.prototype.createIconElement):
+        Create an iconElement, if the category is images then make a div that
+        contains a preview image. Otherwise just make an img element. If there
+        was a previous iconElement, then replace it.
+        (WebInspector.ResourceSidebarTreeElement.prototype.refresh): Call
+        createIconElement if the category changed.
+        * page/inspector/SidebarTreeElement.js:
+        (WebInspector.SidebarTreeElement): Create an iconElement if one hasn't
+        been made already by a subclass.
+        (WebInspector.SidebarTreeElement.prototype.onattach): Append the iconElement
+        instead of creating one each time.
+        * page/inspector/inspector.css: New and updated style rules.
+
+2008-05-29  Timothy Hatcher  <timothy@apple.com>
+
         Removes a use of the internal _childrenListNode property by adding
         a getter/setter for smallChildren to SidebarSectionTreeElement.
 
index 126d0ea..fe4f5db 100644 (file)
@@ -1354,6 +1354,8 @@ WebInspector.ResourceSidebarTreeElement = function(resource)
 {
     this.resource = resource;
 
+    this.createIconElement();
+
     WebInspector.SidebarTreeElement.call(this, "resource-sidebar-tree-item", "", "", resource);
 
     this.refreshTitles();
@@ -1416,6 +1418,27 @@ WebInspector.ResourceSidebarTreeElement.prototype = {
         // Do nothing.
     },
 
+    createIconElement: function()
+    {
+        var previousIconElement = this.iconElement;
+
+        if (this.resource.category === WebInspector.resourceCategories.images) {
+            var previewImage = document.createElement("img");
+            previewImage.className = "image-resource-icon-preview";
+            previewImage.src = this.resource.url;
+
+            this.iconElement = document.createElement("div");
+            this.iconElement.className = "icon";
+            this.iconElement.appendChild(previewImage);
+        } else {
+            this.iconElement = document.createElement("img");
+            this.iconElement.className = "icon";
+        }
+
+        if (previousIconElement)
+            previousIconElement.parentNode.replaceChild(this.iconElement, previousIconElement);
+    },
+
     refresh: function()
     {
         this.refreshTitles();
@@ -1423,6 +1446,8 @@ WebInspector.ResourceSidebarTreeElement.prototype = {
         if (!this._listItemNode.hasStyleClass("resources-category-" + this.resource.category.name)) {
             this._listItemNode.removeMatchingStyleClasses("resources-category-\\w+");
             this._listItemNode.addStyleClass("resources-category-" + this.resource.category.name);
+
+            this.createIconElement();
         }
     },
 
index 5ce1edf..c849f2f 100644 (file)
@@ -72,6 +72,11 @@ WebInspector.SidebarTreeElement = function(className, title, subtitle, represent
         this.disclosureButton.className = "disclosure-button";
     }
 
+    if (!this.iconElement) {
+        this.iconElement = document.createElement("img");
+        this.iconElement.className = "icon";
+    }
+
     this.statusElement = document.createElement("div");
     this.statusElement.className = "status";
 
@@ -161,10 +166,7 @@ WebInspector.SidebarTreeElement.prototype = {
         if (this.hasChildren && this.disclosureButton)
             this._listItemNode.appendChild(this.disclosureButton);
 
-        var iconElement = document.createElement("img");
-        iconElement.className = "icon";
-
-        this._listItemNode.appendChild(iconElement);
+        this._listItemNode.appendChild(this.iconElement);
         this._listItemNode.appendChild(this.statusElement);
         this._listItemNode.appendChild(this.titlesElement);
     },
index 2fcb9ce..20c46f8 100644 (file)
@@ -2415,11 +2415,35 @@ body.inactive .sidebar-tree-item.selected {
 }
 
 .resource-sidebar-tree-item.resources-category-images .icon {
-    content: url(Images/resourcePlainIcon.png);
+    position: relative;
+    background-image: url(Images/resourcePlainIcon.png);
+    background-repeat: no-repeat;
+    content: "";
+}
+
+.resource-sidebar-tree-item.resources-category-images .image-resource-icon-preview {
+    position: absolute;
+    margin: auto;
+    top: 3px;
+    bottom: 4px;
+    left: 5px;
+    right: 5px;
+    max-width: 18px;
+    max-height: 21px;
 }
 
 .children.small .resource-sidebar-tree-item.resources-category-images .icon {
-    content: url(Images/resourcePlainIconSmall.png);
+    background-image: url(Images/resourcePlainIconSmall.png);
+    content: "";
+}
+
+.children.small .resource-sidebar-tree-item.resources-category-images .image-resource-icon-preview {
+    top: 2px;
+    bottom: 1px;
+    left: 3px;
+    right: 3px;
+    max-width: 8px;
+    max-height: 11px;
 }
 
 .resource-sidebar-tree-item.resources-category-fonts .icon {