Changeset 116220 in webkit


Ignore:
Timestamp:
May 5, 2012 5:24:28 AM (12 years ago)
Author:
caseq@chromium.org
Message:

Web Inspector: add separate timeline overview item for the frame mode
​https://bugs.webkit.org/show_bug.cgi?id=85706

  • remove two-buttons horizontal/vertical mode switch from Timelines item of the timeline overview menu;
  • rename "Timeline" into "Events";
  • add "Frames" item;
  • replace overview sidebar icons with smaller, monochrome ones.
  • English.lproj/localizedStrings.js: Added "Frames" and "Events".
  • inspector/front-end/Images/statusbarButtonGlyphs.png: Added icon for "Memory".
  • inspector/front-end/TimelineOverviewPane.js:

(WebInspector.TimelineOverviewPane):
(WebInspector.TimelineOverviewPane.prototype._showEvents):
(WebInspector.TimelineOverviewPane.prototype._showFrames):
(WebInspector.TimelineOverviewPane.prototype._showMemoryGraph):
(WebInspector.TimelineOverviewPane.prototype._setMode):

  • inspector/front-end/timelinePanel.css:

(#timeline-overview-sidebar .sidebar-tree-item):
(#timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle):
(#timeline-overview-sidebar .icon):
(.timeline-overview-sidebar-events .icon):
(.timeline-overview-sidebar-frames .icon):
(.timeline-overview-sidebar-memory .icon):

Location:
trunk/Source/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r116218 r116220  
     12012-05-05  Andrey Kosyakov  <caseq@chromium.org>
     2
     3        Web Inspector: add separate timeline overview item for the frame mode
     4        https://bugs.webkit.org/show_bug.cgi?id=85706
     5
     6        - remove two-buttons horizontal/vertical mode switch from Timelines item of the timeline overview menu;
     7        - rename "Timeline" into "Events";
     8        - add "Frames" item;
     9        - replace overview sidebar icons with smaller, monochrome ones.
     10
     11        * English.lproj/localizedStrings.js: Added "Frames" and "Events".
     12        * inspector/front-end/Images/statusbarButtonGlyphs.png: Added icon for "Memory".
     13        * inspector/front-end/TimelineOverviewPane.js:
     14        (WebInspector.TimelineOverviewPane):
     15        (WebInspector.TimelineOverviewPane.prototype._showEvents):
     16        (WebInspector.TimelineOverviewPane.prototype._showFrames):
     17        (WebInspector.TimelineOverviewPane.prototype._showMemoryGraph):
     18        (WebInspector.TimelineOverviewPane.prototype._setMode):
     19        * inspector/front-end/timelinePanel.css:
     20        (#timeline-overview-sidebar .sidebar-tree-item):
     21        (#timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle):
     22        (#timeline-overview-sidebar .icon):
     23        (.timeline-overview-sidebar-events .icon):
     24        (.timeline-overview-sidebar-frames .icon):
     25        (.timeline-overview-sidebar-memory .icon):
     26
    1272012-05-05  Ilya Tikhonovsky  <loislo@chromium.org>
    228

  • trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js

    r114272 r116220  
    4949    this._topPaneSidebarElement.id = "timeline-overview-sidebar";
    5050
    51     if (WebInspector.experimentsSettings.timelineVerticalOverview.isEnabled()) {
    52         this._overviewModeSelector = new WebInspector.TimelineOverviewModeSelector(this._onOverviewModeChanged.bind(this));
    53         this._overviewModeSelector.addButton(WebInspector.UIString("Show each event category as a horizontal strip in overview"),
    54                                              "timeline-mode-horizontal-bars", WebInspector.TimelineOverviewPane.Mode.EventsHorizontal);
    55         this._overviewModeSelector.addButton(WebInspector.UIString("Show each event as a vertical bar in overview"),
    56                                              "timeline-mode-vertical-bars", WebInspector.TimelineOverviewPane.Mode.EventsVertical);
    57     }
    58 
    5951    var overviewTreeElement = document.createElement("ol");
    6052    overviewTreeElement.className = "sidebar-tree";
    … …  
    6355
    6456    var topPaneSidebarTree = new TreeOutline(overviewTreeElement);
    65     this._timelinesOverviewItem = new WebInspector.SidebarTreeElement("resources-time-graph-sidebar-item", WebInspector.UIString("Timelines"));
    66     if (this._overviewModeSelector)
    67         this._timelinesOverviewItem.statusElement = this._overviewModeSelector.element;
    68 
    69     topPaneSidebarTree.appendChild(this._timelinesOverviewItem);
    70     this._timelinesOverviewItem.revealAndSelect(false);
    71     this._timelinesOverviewItem.onselect = this._showTimelines.bind(this);
    72 
    73     this._memoryOverviewItem = new WebInspector.SidebarTreeElement("resources-size-graph-sidebar-item", WebInspector.UIString("Memory"));
    74     topPaneSidebarTree.appendChild(this._memoryOverviewItem);
    75     this._memoryOverviewItem.onselect = this._showMemoryGraph.bind(this);
     57
     58    var eventsOverviewItem = new WebInspector.SidebarTreeElement("timeline-overview-sidebar-events", WebInspector.UIString("Events"));
     59    topPaneSidebarTree.appendChild(eventsOverviewItem);
     60    eventsOverviewItem.revealAndSelect(false);
     61    eventsOverviewItem.onselect = this._showEvents.bind(this);
     62
     63    if (WebInspector.experimentsSettings.timelineVerticalOverview.isEnabled()) {
     64        var framesOverviewItem = new WebInspector.SidebarTreeElement("timeline-overview-sidebar-frames", WebInspector.UIString("Frames"));
     65        topPaneSidebarTree.appendChild(framesOverviewItem);
     66        framesOverviewItem.onselect = this._showFrames.bind(this);
     67    }
     68
     69    var memoryOverviewItem = new WebInspector.SidebarTreeElement("timeline-overview-sidebar-memory", WebInspector.UIString("Memory"));
     70    topPaneSidebarTree.appendChild(memoryOverviewItem);
     71    memoryOverviewItem.onselect = this._showMemoryGraph.bind(this);
    7672
    7773    this._currentMode = WebInspector.TimelineOverviewPane.Mode.EventsHorizontal;
    … …  
    139135    },
    140136
    141     _showTimelines: function()
    142     {
    143         var newMode = this._overviewModeSelector ? this._overviewModeSelector.value : WebInspector.TimelineOverviewPane.Mode.EventsHorizontal;
    144         if (this._currentMode === newMode)
    145             return;
     137    _showEvents: function()
     138    {
     139        if (this._currentMode === WebInspector.TimelineOverviewPane.Mode.EventsHorizontal)
     140            return;
     141        this._heapGraph.hide();
     142        this._setVerticalOverview(false);
     143        this._overviewGrid.itemsGraphsElement.removeStyleClass("hidden");
     144        this._setMode(WebInspector.TimelineOverviewPane.Mode.EventsHorizontal);
     145    },
     146
     147    _showFrames: function()
     148    {
     149        if (this._currentMode === WebInspector.TimelineOverviewPane.Mode.EventsVertical)
     150            return;
     151        this._heapGraph.hide();
     152        this._setVerticalOverview(true);
     153        this._overviewGrid.itemsGraphsElement.removeStyleClass("hidden");
     154        this._setMode(WebInspector.TimelineOverviewPane.Mode.EventsVertical);
     155    },
     156
     157    _showMemoryGraph: function()
     158    {
     159        if (this._currentMode === WebInspector.TimelineOverviewPane.Mode.Memory)
     160            return;
     161        this._setVerticalOverview(false);
     162        this._overviewGrid.itemsGraphsElement.addStyleClass("hidden");
     163        this._heapGraph.show();
     164        this._setMode(WebInspector.TimelineOverviewPane.Mode.Memory);
     165    },
     166
     167    _setMode: function(newMode)
     168    {
    146169        this._currentMode = newMode;
    147         this._timelinesOverviewItem.revealAndSelect(false);
    148         this._heapGraph.hide();
    149         this._setVerticalOverview(this._currentMode === WebInspector.TimelineOverviewPane.Mode.EventsVertical);
    150         this._overviewGrid.itemsGraphsElement.removeStyleClass("hidden");
    151170        this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.ModeChanged, this._currentMode);
    152     },
    153 
    154     _showMemoryGraph: function()
    155     {
    156         this._currentMode = WebInspector.TimelineOverviewPane.Mode.Memory;
    157         this._setVerticalOverview(false);
    158         this._memoryOverviewItem.revealAndSelect(false);
    159         this._heapGraph.show();
    160         this._heapGraph.update();
    161         this._overviewGrid.itemsGraphsElement.addStyleClass("hidden");
    162         this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.ModeChanged, this._currentMode);
     171        this._update();
    163172    },
    164173
    … …  
    176185            this._updateCategoryStrips();
    177186        }
    178     },
    179 
    180     _onOverviewModeChanged: function()
    181     {
    182         // If we got this while in memory mode, we postpone actual switch until we get to the events mode.
    183         if (this._currentMode === WebInspector.TimelineOverviewPane.Mode.Memory)
    184             return;
    185         this._showTimelines();
    186187    },
    187188
    … …  
    10721073
    10731074WebInspector.TimelineVerticalOverview.prototype.__proto__ = WebInspector.View.prototype;
    1074 
    1075 /**
    1076  * @constructor
    1077  */
    1078 WebInspector.TimelineOverviewModeSelector = function(selectCallback)
    1079 {
    1080     this.element = document.createElement("div");
    1081     this.element.className = "timeline-overview-mode-selector";
    1082     this._selectCallback = selectCallback;
    1083 
    1084     this._buttons = [];
    1085     this.element.addEventListener("click", this._onClick.bind(this), false);
    1086 }
    1087 
    1088 WebInspector.TimelineOverviewModeSelector.prototype = {
    1089     addButton: function(tooltip, className, value)
    1090     {
    1091         var button = this._createButton(tooltip, className, value);
    1092         this.element.appendChild(button);
    1093         this._buttons.push(button);
    1094         if (this._buttons.length === 1)
    1095             this._select(button, true);
    1096     },
    1097 
    1098     get value()
    1099     {
    1100         return this._value;
    1101     },
    1102 
    1103     _createButton: function(tooltip, className, value)
    1104     {
    1105         var button = document.createElement("button");
    1106         button.createChild("div", "glyph");
    1107         button.createChild("div", "glyph shadow");
    1108         button.className = className;
    1109         button.title = tooltip;
    1110         button.value = value;
    1111         return button;
    1112     },
    1113 
    1114     _select: function(button, selected)
    1115     {
    1116         if (selected) {
    1117             button.addStyleClass("toggled");
    1118             this._value = button.value;
    1119         } else
    1120             button.removeStyleClass("toggled");
    1121     },
    1122 
    1123     _onClick: function(event)
    1124     {
    1125         var button = event.target.enclosingNodeOrSelfWithNodeName("button");
    1126         if (!button)
    1127             return;
    1128         for (var i = 0; i < this._buttons.length; ++i)
    1129             this._select(this._buttons[i], this._buttons[i] === button);
    1130         this._selectCallback(button.value);
    1131     }
    1132 }

  • trunk/Source/WebCore/inspector/front-end/timelinePanel.css

    r113996 r116220  
    502502}
    503503
    504 .resources-time-graph-sidebar-item .icon {
    505     content: url(Images/resourcesTimeGraphIcon.png);
    506 }
    507 
    508 .resources-size-graph-sidebar-item .icon {
    509     content: url(Images/resourcesSizeGraphIcon.png);
    510 }
    511 
    512 .resources-size-graph-sidebar-item .icon {
    513     content: url(Images/resourcesSizeGraphIcon.png);
     504#timeline-overview-sidebar .sidebar-tree-item {
     505    line-height: 26px;
     506    height: 24px;
     507}
     508
     509#timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle {
     510    top: 5px;
     511}
     512
     513#timeline-overview-sidebar .icon {
     514    height: 24px;
     515    margin-top: -1px;
     516    margin-left: 0;
     517    margin-right: 0;
     518    -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
     519    background-color: black;
     520}
     521
     522.timeline-overview-sidebar-events .icon {
     523    -webkit-mask-position: -192px -48px;
     524}
     525
     526.timeline-overview-sidebar-frames .icon {
     527    -webkit-mask-position: -160px -48px;
     528}
     529
     530.timeline-overview-sidebar-memory .icon {
     531    -webkit-mask-position: -224px -48px;
    514532}
    515533
Note: See TracChangeset for help on using the changeset viewer.