Changeset 52193 in webkit

Timestamp:

Dec 16, 2009 2:05:29 AM (14 years ago)

Author:

pfeldman@chromium.org

Message:

2009-12-15 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: beautify HTTP info section.

​https://bugs.webkit.org/show_bug.cgi?id=32583

• English.lproj/localizedStrings.js:
• inspector/front-end/ResourceView.js: (WebInspector.ResourceView): (WebInspector.ResourceView.prototype._refreshURL): (WebInspector.ResourceView.prototype._refreshHTTPInformation):
• inspector/front-end/inspector.css:

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• English.lproj/localizedStrings.js (modified) (previous)
• inspector/front-end/ResourceView.js (modified) (3 diffs)
• inspector/front-end/inspector.css (modified) (3 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2009-12-15  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Timothy Hatcher.
+
+        Web Inspector: beautify HTTP info section.
+
+        https://bugs.webkit.org/show_bug.cgi?id=32583
+
+        * English.lproj/localizedStrings.js:
+        * inspector/front-end/ResourceView.js:
+        (WebInspector.ResourceView):
+        (WebInspector.ResourceView.prototype._refreshURL):
+        (WebInspector.ResourceView.prototype._refreshHTTPInformation):
+        * inspector/front-end/inspector.css:
+
 2009-12-13  Roland Steiner  <rolandsteiner@chromium.org>
 

trunk/WebCore/inspector/front-end/ResourceView.js

@@ -55 +55 @@
     this.headersTreeOutline.appendChild(this.urlTreeElement);
 
-    this.httpInformationTreeElement = new TreeElement("", null, true);
-    this.httpInformationTreeElement.expanded = false;
-    this.httpInformationTreeElement.selectable = false;
-    this.headersTreeOutline.appendChild(this.httpInformationTreeElement);
+    this.requestMethodTreeElement = new TreeElement("", null, false);
+    this.requestMethodTreeElement.selectable = false;
+    this.headersTreeOutline.appendChild(this.requestMethodTreeElement);
+
+    this.statusCodeTreeElement = new TreeElement("", null, false);
+    this.statusCodeTreeElement.selectable = false;
+    this.headersTreeOutline.appendChild(this.statusCodeTreeElement);
      
     this.requestHeadersTreeElement = new TreeElement("", null, true);
@@ -134 +137 @@
     _refreshURL: function()
     {
-        var url = this.resource.url;
-        var statusCodeImage = "";
-        if (this.resource.statusCode) {
-            var statusImageSource = "";
-            
-            if (this.resource.statusCode < 300)
-                statusImageSource = "Images/successGreenDot.png";
-            else if (this.resource.statusCode < 400)
-                statusImageSource = "Images/warningOrangeDot.png";
-            else
-                statusImageSource = "Images/errorRedDot.png";
-        
-            statusCodeImage = "<img class=\"resource-status-image\" src=\"" + statusImageSource + "\" title=\"" + WebInspector.Resource.StatusTextForCode(this.resource.statusCode) + "\">";
-        }
-
-        this.urlTreeElement.title = statusCodeImage + "<span class=\"resource-url\">" + url.escapeHTML() + "</span>";
-        this._refreshQueryString();
+        this.urlTreeElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Request URL") + ":</div>" +
+            "<div class=\"header-value\">" + this.resource.url.escapeHTML() + "</div>";
     },
 
@@ -278 +266 @@
     _refreshHTTPInformation: function()
     {
-        const listElements = 2;
-
-        var headerElement = this.httpInformationTreeElement;
-        headerElement.removeChildren();
-        headerElement.hidden = !this.resource.statusCode;
+        var requestMethodElement = this.requestMethodTreeElement;
+        requestMethodElement.hidden = !this.resource.statusCode;
+        var statusCodeElement = this.statusCodeTreeElement;
+        statusCodeElement.hidden = !this.resource.statusCode;
+        var statusCodeImage = "";
 
         if (this.resource.statusCode) {
-            headerElement.title = WebInspector.UIString("HTTP Information") +  "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", listElements) + "</span>";
-        
-            var title = "<div class=\"header-name\">" + WebInspector.UIString("Request Method") + ":</div>";
-            title += "<div class=\"header-value\">" + this.resource.requestMethod + "</div>"
-            
-            var headerTreeElement = new TreeElement(title, null, false);
-            headerTreeElement.selectable = false;
-            headerElement.appendChild(headerTreeElement);
-            
-            title = "<div class=\"header-name\">" + WebInspector.UIString("Status Code") + ":</div>";
-            title += "<div class=\"header-value\">" + WebInspector.Resource.StatusTextForCode(this.resource.statusCode) + "</div>"
-            
-            headerTreeElement = new TreeElement(title, null, false);
-            headerTreeElement.selectable = false;
-            headerElement.appendChild(headerTreeElement);
+            var statusImageSource = "";
+            if (this.resource.statusCode < 300)
+                statusImageSource = "Images/successGreenDot.png";
+            else if (this.resource.statusCode < 400)
+                statusImageSource = "Images/warningOrangeDot.png";
+            else
+                statusImageSource = "Images/errorRedDot.png";
+            statusCodeImage = "<img class=\"resource-status-image\" src=\"" + statusImageSource + "\" title=\"" + WebInspector.Resource.StatusTextForCode(this.resource.statusCode) + "\">";
+    
+            requestMethodElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Request Method") + ":</div>" +
+                "<div class=\"header-value\">" + this.resource.requestMethod + "</div>";
+
+            statusCodeElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Status Code") + ":</div>" +
+                statusCodeImage + "<div class=\"header-value\">" + WebInspector.Resource.StatusTextForCode(this.resource.statusCode) + "</div>";
         }
     },

trunk/WebCore/inspector/front-end/inspector.css

@@ -793 +793 @@
     color: rgb(33%, 33%, 33%);
     display: inline-block;
-    width: 105px;
-    text-align: right;
     margin-right: 0.5em;
     font-weight: bold;
     vertical-align: top;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: pre-wrap;
 }
 
 .resource-view-headers .outline-disclosure .header-value {
     display: inline-block;
-    white-space: normal;
+    white-space: pre-wrap;
     word-break: break-word;
     vertical-align: top;
-    margin-right: 100px;
 }
 
@@ -880 +876 @@
 
 .resource-status-image {
+    margin-top: -4px;
     vertical-align: middle;
 }
@@ -1073 +1070 @@
     margin-bottom: 1px;
     word-wrap: break-word;
-    text-indent: -2px
+    text-indent: -2px;
+}
+
+.resources .outline-disclosure li {
+    text-indent: 0
 }