Web Inspector: timeline events in the vicinity of event dividers some times are trick...

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

Reviewed by Pavel Feldman.

- do not use resources-event-divider-padding;
- make dividers larger and use border-color to visualize them;
- move resources-<color>-divider to timelinePanel.css, as they're not used outside of timeline;

* inspector/front-end/TimelinePresentationModel.js:
(WebInspector.TimelinePresentationModel.createEventDivider):
* inspector/front-end/inspectorCommon.css:
* inspector/front-end/timelinePanel.css:
(.timeline .resources-event-divider):
(.resources-red-divider):
(.resources-blue-divider):
(.resources-orange-divider):
(.resources-divider.last):
(.timeline .resources-event-divider.timeline-frame-divider):

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

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index bd78592..f7e6a83 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,5 +1,27 @@
 2012-07-04  Andrey Kosyakov  <caseq@chromium.org>
 
+        Web Inspector: timeline events in the vicinity of event dividers some times are tricky to expand
+        https://bugs.webkit.org/show_bug.cgi?id=90572
+
+        Reviewed by Pavel Feldman.
+
+        - do not use resources-event-divider-padding;
+        - make dividers larger and use border-color to visualize them;
+        - move resources-<color>-divider to timelinePanel.css, as they're not used outside of timeline;
+
+        * inspector/front-end/TimelinePresentationModel.js:
+        (WebInspector.TimelinePresentationModel.createEventDivider):
+        * inspector/front-end/inspectorCommon.css:
+        * inspector/front-end/timelinePanel.css:
+        (.timeline .resources-event-divider):
+        (.resources-red-divider):
+        (.resources-blue-divider):
+        (.resources-orange-divider):
+        (.resources-divider.last):
+        (.timeline .resources-event-divider.timeline-frame-divider):
+
+2012-07-04  Andrey Kosyakov  <caseq@chromium.org>
+
         Web Inspector: incorrect height of main timeline pane after switching to memory mode
         https://bugs.webkit.org/show_bug.cgi?id=90387
 

diff --git a/Source/WebCore/inspector/front-end/TimelinePresentationModel.js b/Source/WebCore/inspector/front-end/TimelinePresentationModel.js
index 2a2e6a2..f83d9fa 100644 (file)
--- a/Source/WebCore/inspector/front-end/TimelinePresentationModel.js
+++ b/Source/WebCore/inspector/front-end/TimelinePresentationModel.js
@@ -147,9 +147,6 @@ WebInspector.TimelinePresentationModel.createEventDivider = function(recordType,
     eventDivider.className = "resources-event-divider";
     var recordTypes = WebInspector.TimelineModel.RecordType;
 
-    var eventDividerPadding = document.createElement("div");
-    eventDividerPadding.className = "resources-event-divider-padding";
-
     if (recordType === recordTypes.MarkDOMContent)
         eventDivider.className += " resources-blue-divider";
     else if (recordType === recordTypes.MarkLoad)
@@ -160,10 +157,9 @@ WebInspector.TimelinePresentationModel.createEventDivider = function(recordType,
         eventDivider.className += " timeline-frame-divider";
 
     if (title)
-        eventDividerPadding.title = title;
+        eventDivider.title = title;
 
-    eventDividerPadding.appendChild(eventDivider);
-    return eventDividerPadding;
+    return eventDivider;
 }
 
 WebInspector.TimelinePresentationModel.prototype = {

diff --git a/Source/WebCore/inspector/front-end/inspectorCommon.css b/Source/WebCore/inspector/front-end/inspectorCommon.css
index 4b283ac..4a7701c 100644 (file)
--- a/Source/WebCore/inspector/front-end/inspectorCommon.css
+++ b/Source/WebCore/inspector/front-end/inspectorCommon.css
@@ -115,22 +115,6 @@ iframe.view {
     z-index: 300;
 }
 
-.resources-red-divider {
-    background-color: rgba(255, 0, 0, 0.5);
-}
-
-.resources-blue-divider {
-    background-color: rgba(0, 0, 255, 0.5);
-}
-
-.resources-orange-divider {
-    background-color: rgba(255, 178, 23, 0.5);
-}
-
-.resources-divider.last {
-    background-color: transparent;
-}
-
 .resources-divider-label {
     position: absolute;
     top: 4px;

diff --git a/Source/WebCore/inspector/front-end/timelinePanel.css b/Source/WebCore/inspector/front-end/timelinePanel.css
index a86c4e0..70965be 100644 (file)
--- a/Source/WebCore/inspector/front-end/timelinePanel.css
+++ b/Source/WebCore/inspector/front-end/timelinePanel.css
@@ -572,7 +572,27 @@
 
 .timeline .resources-event-divider {
     height: 19px;
+    width: 8px;
+    border-left-width: 2px;
+    border-left-style: solid;
     bottom: auto;
+    pointer-events: auto;
+}
+
+.resources-red-divider {
+    border-color: rgba(255, 0, 0, 0.5);
+}
+
+.resources-blue-divider {
+    border-color: rgba(0, 0, 255, 0.5);
+}
+
+.resources-orange-divider {
+    border-color: rgba(255, 178, 23, 0.5);
+}
+
+.resources-divider.last {
+    border-color: transparent;
 }
 
 .timeline.timeline-frame-overview .resources-divider {
@@ -582,6 +602,7 @@
 
 .timeline .resources-event-divider.timeline-frame-divider {
     background-color: rgba(180, 180, 180, 0.8);
+    border-style: none;
     width: 1px;
     height: 100%;
 }