[SCM] WebKit Debian packaging branch, webkit-1.1, updated. upstream/1.1.16-1409-g5afdf4d

timothy at apple.com timothy at apple.com
Thu Dec 3 13:27:26 UTC 2009


The following commit has been merged in the webkit-1.1 branch:
commit 6902a2c9ed6889d263a499c296e89f31253da849
Author: timothy at apple.com <timothy at apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date:   Thu Nov 5 06:27:45 2009 +0000

    Update the Web Inspector Timeline panel to better match the mock-up.
    
    https://bugs.webkit.org/show_bug.cgi?id=31150
    
    Reviewed by Pavel Feldman.
    
    * inspector/front-end/TimelinePanel.js:
    (WebInspector.TimelinePanel.prototype._getRecordDetails):
    (WebInspector.TimelinePanel.prototype._dragWindow):
    (WebInspector.TimelinePanel.prototype._resizeWindowLeft):
    (WebInspector.TimelinePanel.prototype._resizeWindowRight):
    (WebInspector.TimelineCategoryTreeElement.prototype.onattach):
    (WebInspector.TimelineRecordTreeElement.prototype.onattach):
    (WebInspector.TimelineRecordTreeElement.prototype.refresh):
    (WebInspector.TimelineCategoryGraph):
    * inspector/front-end/inspector.css:
    
    git-svn-id: http://svn.webkit.org/repository/webkit/trunk@50544 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index f2ee9db..5d39230 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,22 @@
+2009-11-04  Timothy Hatcher  <timothy at apple.com>
+
+        Update the Web Inspector Timeline panel to better match the mock-up.
+
+        https://bugs.webkit.org/show_bug.cgi?id=31150
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/front-end/TimelinePanel.js:
+        (WebInspector.TimelinePanel.prototype._getRecordDetails):
+        (WebInspector.TimelinePanel.prototype._dragWindow):
+        (WebInspector.TimelinePanel.prototype._resizeWindowLeft):
+        (WebInspector.TimelinePanel.prototype._resizeWindowRight):
+        (WebInspector.TimelineCategoryTreeElement.prototype.onattach):
+        (WebInspector.TimelineRecordTreeElement.prototype.onattach):
+        (WebInspector.TimelineRecordTreeElement.prototype.refresh):
+        (WebInspector.TimelineCategoryGraph):
+        * inspector/front-end/inspector.css:
+
 2009-11-05  Justin Garcia  <justin.garcia at apple.com>
 
         Reviewed by Adele Peterson.
diff --git a/WebCore/inspector/front-end/TimelinePanel.js b/WebCore/inspector/front-end/TimelinePanel.js
index 5b0d8c6..3503dad 100644
--- a/WebCore/inspector/front-end/TimelinePanel.js
+++ b/WebCore/inspector/front-end/TimelinePanel.js
@@ -182,7 +182,7 @@ WebInspector.TimelinePanel.prototype = {
         case WebInspector.TimelineAgent.RecordType.EventDispatch:
             return record.data ? record.data.type : "";
         case WebInspector.TimelineAgent.RecordType.Paint:
-            return record.data.width + " x " + record.data.height;
+            return record.data.width + "\u2009\u00d7\u2009" + record.data.height;
         case WebInspector.TimelineAgent.RecordType.TimerInstall:
         case WebInspector.TimelineAgent.RecordType.TimerRemove:
         case WebInspector.TimelineAgent.RecordType.TimerFire:
@@ -356,7 +356,7 @@ WebInspector.TimelinePanel.prototype = {
     _dragWindow: function(event)
     {
         WebInspector.elementDragStart(this._overviewWindowElement, this._windowDragging.bind(this, event.pageX,
-                this._leftResizeElement.offsetLeft, this._rightResizeElement.offsetLeft), this._endWindowDragging.bind(this), event, "col-resize");
+            this._leftResizeElement.offsetLeft, this._rightResizeElement.offsetLeft), this._endWindowDragging.bind(this), event, "ew-resize");
     },
 
     _windowDragging: function(startX, windowLeft, windowRight, event)
@@ -383,7 +383,7 @@ WebInspector.TimelinePanel.prototype = {
     _resizeWindowLeft: function(start)
     {
         // Glue to edge.
-        if (start < 20)
+        if (start < 10)
             start = 0;
         this._setWindowPosition(start, null);
     },
@@ -391,7 +391,7 @@ WebInspector.TimelinePanel.prototype = {
     _resizeWindowRight: function(end)
     {
         // Glue to edge.
-        if (end > this._overviewGridElement.clientWidth - 20)           
+        if (end > this._overviewGridElement.clientWidth - 10)
             end = this._overviewGridElement.clientWidth;
         this._setWindowPosition(null, end);
     },
@@ -453,18 +453,23 @@ WebInspector.TimelineCategoryTreeElement.prototype = {
     {
         this.listItemElement.removeChildren();
         this.listItemElement.addStyleClass("timeline-category-tree-item");
+        this.listItemElement.addStyleClass("timeline-category-" + this._category.name);
+
+        var label = document.createElement("label");
 
         var checkElement = document.createElement("input");
         checkElement.type = "checkbox";
         checkElement.className = "timeline-category-checkbox";
         checkElement.checked = true;
         checkElement.addEventListener("click", this._onCheckboxClicked.bind(this));
-        this.listItemElement.appendChild(checkElement);
+        label.appendChild(checkElement);
 
-        this.typeElement = document.createElement("span");
-        this.typeElement.className = "type";
-        this.typeElement.textContent = this._category.title;
-        this.listItemElement.appendChild(this.typeElement);
+        var typeElement = document.createElement("span");
+        typeElement.className = "type";
+        typeElement.textContent = this._category.title;
+        label.appendChild(typeElement);
+
+        this.listItemElement.appendChild(label);
     },
 
     _onCheckboxClicked: function (event) {
@@ -511,10 +516,10 @@ WebInspector.TimelineRecordTreeElement.prototype = {
             separatorElement.textContent = " ";
 
             var dataElement = document.createElement("span");
-            dataElement.className = "data";
+            dataElement.className = "data dimmed";
             dataElement.textContent = "(" + this._record.details + ")";
             dataElement.title = this._record.details;
-            dataElement.addStyleClass("dimmed");
+
             this.listItemElement.appendChild(separatorElement);
             this.listItemElement.appendChild(dataElement);
         }
@@ -522,8 +527,16 @@ WebInspector.TimelineRecordTreeElement.prototype = {
 
     refresh: function()
     {
-        if (this._record.count > 1)
-            this.typeElement.textContent = this._record.title + " x " + this._record.count;
+        if (this._record.count <= 1)
+            return;
+
+        if (!this.repeatCountElement) {
+            this.repeatCountElement = document.createElement("span");
+            this.repeatCountElement.className = "count";
+            this.listItemElement.appendChild(this.repeatCountElement);
+        }
+
+        this.repeatCountElement.textContent = "\u2009\u00d7\u2009" + this._record.count;
     }
 }
 
@@ -609,7 +622,7 @@ WebInspector.TimelineCategoryGraph = function(category)
     this._category = category;
 
     this._graphElement = document.createElement("div");
-    this._graphElement.className = "timeline-graph-side timeline-overview-graph-side filter-all";
+    this._graphElement.className = "timeline-graph-side timeline-overview-graph-side";
 
     this._barAreaElement = document.createElement("div");
     this._barAreaElement.className = "timeline-graph-bar-area timeline-category-" + category.name;
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index a0d00d6..afbda4d 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -3288,9 +3288,9 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
     top: 80px;
     left: 0;
     right: 0;
-    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
-    border-top: 1px solid rgb(163, 163, 163);
-    border-bottom: 1px solid rgb(163, 163, 163);
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
+    border-top: 1px solid rgb(140, 140, 140);
+    border-bottom: 1px solid rgb(115, 115, 115);
     height: 10px;
 }
 
@@ -3300,7 +3300,8 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
     top: 0px;
     bottom: 0px;
     left: 0px;
-    background-color: rgb(232, 232, 232);
+    padding-top: 1px;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
     border-right: 1px solid rgb(163, 163, 163);
 }
 
@@ -3310,7 +3311,7 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
     bottom: 0px;
     left: 200px;
     right: 0px;
-    background-color: rgb(232, 232, 232);
+    background-color: rgb(224, 224, 224);
 }
 
 #timeline-overview-window {
@@ -3327,14 +3328,14 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
     position: absolute;
     top: 35px;
     bottom: 15px;
-    width: 6px;
+    width: 5px;
     margin-left: -3px;
-    margin-right: -3px;
-    background-color: rgb(132, 132, 132);
+    margin-right: -2px;
+    background-color: rgb(153, 153, 153);
     z-index: 500;
     cursor: col-resize;
-    border: 1px solid white;
-    -webkit-border-radius: 3px;
+    -webkit-border-radius: 2px;
+    -webkit-box-shadow: white 1px 0 0, white -1px 0 0, white 0 1px 0, white 0 -1px 0;
 }
 
 .timeline .sidebar-resizer-vertical {
@@ -3367,18 +3368,39 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
 .timeline-category-tree-item {
     height: 20px;
     padding-left: 6px;
-    padding-top: 2px;
+    padding-top: 3px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     font-weight: bold;
 }
 
-.timeline-tree-item .timeline-category-checkbox {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
+.timeline-category-tree-item .timeline-category-checkbox {
+    width: 10px;
+    height: 11px;
+    margin: 0 3px 0 5px;
+    padding: 0;
+    background-image: url(Images/timelineCheckmarks.png);
+    background-repeat: no-repeat;
+    background-position: 0 -66px;
+    vertical-align: -1px;
+    -webkit-appearance: none;
+}
+
+.timeline-category-tree-item .timeline-category-checkbox:checked {
+    background-position-x: -10px;
+}
+
+.timeline-category-tree-item.timeline-category-loading .timeline-category-checkbox {
+    background-position-y: 0;
+}
+
+.timeline-category-tree-item.timeline-category-scripting .timeline-category-checkbox {
+    background-position-y: -33px;
+}
+
+.timeline-category-tree-item.timeline-category-rendering .timeline-category-checkbox {
+    background-position-y: -11px;
 }
 
 .timeline-category-tree-item:nth-of-type(2n) {
@@ -3398,6 +3420,11 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
     padding-left: 14px;
 }
 
+.timeline-tree-item .count {
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: bold;
+}
+
 .timeline-tree-item .timeline-tree-icon {
     background-image: url(Images/timelineDots.png);
     margin-top: 2px;
@@ -3414,13 +3441,13 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
     color: rgba(0, 0, 0, 0.7);
 }
 
-.timeline-category-loading, .timeline-category-scripting, .timeline-category-rendering {
+#timeline-container .timeline-category-loading, #timeline-container .timeline-category-scripting, #timeline-container .timeline-category-rendering {
     display: none;
 }
 
-.filter-all .timeline-category-loading, .filter-loading .timeline-category-loading,
-.filter-all .timeline-category-scripting, .filter-scripting .timeline-category-scripting,
-.filter-all .timeline-category-rendering, .filter-rendering .timeline-category-rendering {
+#timeline-container .filter-all .timeline-category-loading, #timeline-container .filter-loading .timeline-category-loading,
+#timeline-container .filter-all .timeline-category-scripting, #timeline-container .filter-scripting .timeline-category-scripting,
+#timeline-container .filter-all .timeline-category-rendering, #timeline-container .filter-rendering .timeline-category-rendering {
     display: list-item;
 }
 
@@ -3457,6 +3484,10 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
     pointer-events: none;
 }
 
+.timeline-overview-graph-side .timeline-graph-bar {
+    height: 13px;
+}
+
 .timeline-graph-bar-area {
     position: absolute;
     top: 0;

-- 
WebKit Debian packaging



More information about the Pkg-webkit-commits mailing list