Commit 8bfe271b authored by timothy@apple.com's avatar timothy@apple.com

Add a synchronized DataGrid to the OverviewTimelineView.

The DataGrid is synchronized with the sidebar TreeOutline to appear as one when the view
and sidebar are both showing. The two scroll, expand and collapse in sync when the view
is showing. When the view is not showing the sidebar can scroll independently.

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

Reviewed by Joseph Pecoraro.

* UserInterface/DataGrid.js:
(WebInspector.DataGrid):
(WebInspector.DataGrid.createSortableDataGrid):
(WebInspector.DataGrid.prototype._copyTextForDataGridNode):
(WebInspector.DataGridNode.prototype.createCellContent):
Handle undefined/null cells better by substituting empty strings.

(WebInspector.DataGridNode.prototype.collapse):
(WebInspector.DataGridNode.prototype.expand):
Fire events on the DataGrid for expand and collapse.

* UserInterface/Main.html: Include TreeOutlineDataGridSynchronizer.js.

* UserInterface/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .content): Shorten by 1px to match the content view height.
Needed to keep scrolling in sync. The clipping looks better too.

* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .data-grid):
(.timeline-view.overview > .data-grid table.header):
(.timeline-view.overview > .data-grid .data-container):
Style the DataGrid to to not have a header.

* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView):
(WebInspector.OverviewTimelineView.prototype.shown):
(WebInspector.OverviewTimelineView.prototype._addResourceToTreeIfNeeded):
(WebInspector.OverviewTimelineView.prototype._sourceCodeTimelineAdded):
Create the DataGrid and some placeholder nodes. Hook up TreeOutlineDataGridSynchronizer.

* UserInterface/TimelineContentView.css:
(.content-view.timeline > .view-container > .timeline-view > .data-grid td):
(.content-view.timeline > .view-container > .timeline-view > .data-grid table.data):
Style the DataGrid to match the height of TreeElements in the sidebar.

* UserInterface/TimelineSidebarPanel.css:
(.sidebar > .panel.timeline.timeline-content-view-showing > .content):
Hide the scrollbar off the right when the view is showing. The view will show the scrollbar.

* UserInterface/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel):
(WebInspector.TimelineSidebarPanel.prototype._timelinesTreeElementSelected):
(WebInspector.TimelineSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):

* UserInterface/TreeOutline.js:
(TreeOutline.prototype.removeChildAtIndex):
(TreeOutline.prototype.removeChildren):
(TreeOutline.prototype.removeChildrenRecursive):
(TreeElement.prototype.set hidden):
Add event callbacks for onhidden and onremove.

* UserInterface/TreeOutlineDataGridSynchronizer.js: Added.
(WebInspector.TreeOutlineDataGridSynchronizer):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.associate):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.synchronize):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeOutlineScrolled):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridScrolled):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeSelected):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeExpanded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeCollapsed):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementSelected):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementAdded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementRemoved):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementExpanded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementCollapsed):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementHiddenChanged):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162405 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 4e24b669
2013-11-15 Timothy Hatcher <timothy@apple.com>
Add a synchronized DataGrid to the OverviewTimelineView.
The DataGrid is synchronized with the sidebar TreeOutline to appear as one when the view
and sidebar are both showing. The two scroll, expand and collapse in sync when the view
is showing. When the view is not showing the sidebar can scroll independently.
https://bugs.webkit.org/show_bug.cgi?id=124429
Reviewed by Joseph Pecoraro.
* UserInterface/DataGrid.js:
(WebInspector.DataGrid):
(WebInspector.DataGrid.createSortableDataGrid):
(WebInspector.DataGrid.prototype._copyTextForDataGridNode):
(WebInspector.DataGridNode.prototype.createCellContent):
Handle undefined/null cells better by substituting empty strings.
(WebInspector.DataGridNode.prototype.collapse):
(WebInspector.DataGridNode.prototype.expand):
Fire events on the DataGrid for expand and collapse.
* UserInterface/Main.html: Include TreeOutlineDataGridSynchronizer.js.
* UserInterface/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .content): Shorten by 1px to match the content view height.
Needed to keep scrolling in sync. The clipping looks better too.
* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .data-grid):
(.timeline-view.overview > .data-grid table.header):
(.timeline-view.overview > .data-grid .data-container):
Style the DataGrid to to not have a header.
* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView):
(WebInspector.OverviewTimelineView.prototype.shown):
(WebInspector.OverviewTimelineView.prototype._addResourceToTreeIfNeeded):
(WebInspector.OverviewTimelineView.prototype._sourceCodeTimelineAdded):
Create the DataGrid and some placeholder nodes. Hook up TreeOutlineDataGridSynchronizer.
* UserInterface/TimelineContentView.css:
(.content-view.timeline > .view-container > .timeline-view > .data-grid td):
(.content-view.timeline > .view-container > .timeline-view > .data-grid table.data):
Style the DataGrid to match the height of TreeElements in the sidebar.
* UserInterface/TimelineSidebarPanel.css:
(.sidebar > .panel.timeline.timeline-content-view-showing > .content):
Hide the scrollbar off the right when the view is showing. The view will show the scrollbar.
* UserInterface/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel):
(WebInspector.TimelineSidebarPanel.prototype._timelinesTreeElementSelected):
(WebInspector.TimelineSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
* UserInterface/TreeOutline.js:
(TreeOutline.prototype.removeChildAtIndex):
(TreeOutline.prototype.removeChildren):
(TreeOutline.prototype.removeChildrenRecursive):
(TreeElement.prototype.set hidden):
Add event callbacks for onhidden and onremove.
* UserInterface/TreeOutlineDataGridSynchronizer.js: Added.
(WebInspector.TreeOutlineDataGridSynchronizer):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.associate):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.synchronize):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeOutlineScrolled):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridScrolled):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeSelected):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeExpanded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeCollapsed):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementSelected):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementAdded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementRemoved):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementExpanded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementCollapsed):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementHiddenChanged):
2013-11-07 Timothy Hatcher <timothy@apple.com>
Start fleshing out the Overview Timeline view.
......
......@@ -93,7 +93,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
if (column.titleDOMFragment)
div.appendChild(column.titleDOMFragment);
else
div.textContent = column.title;
div.textContent = column.title || "";
cell.appendChild(div);
if (column.sort) {
......@@ -191,7 +191,9 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
WebInspector.DataGrid.Event = {
DidLayout: "datagrid-did-layout",
SortChanged: "datagrid-sort-changed",
SelectedNodeChanged: "datagrid-selected-node-changed"
SelectedNodeChanged: "datagrid-selected-node-changed",
ExpandedNode: "datagrid-expanded-node",
CollapsedNode: "datagrid-collapsed-node"
};
/**
......@@ -241,14 +243,14 @@ WebInspector.DataGrid.createSortableDataGrid = function(columnNames, values)
var columnIsNumeric = true;
for (var i = 0; i < nodes.length; i++) {
if (isNaN(Number(nodes[i].data[sortColumnIdentifier])))
if (isNaN(Number(nodes[i].data[sortColumnIdentifier] || "")))
columnIsNumeric = false;
}
function comparator(dataGridNode1, dataGridNode2)
{
var item1 = dataGridNode1.data[sortColumnIdentifier];
var item2 = dataGridNode2.data[sortColumnIdentifier];
var item1 = dataGridNode1.data[sortColumnIdentifier] || "";
var item2 = dataGridNode2.data[sortColumnIdentifier] || "";
var comparison;
if (columnIsNumeric) {
......@@ -336,7 +338,7 @@ WebInspector.DataGrid.prototype = {
// FIXME: Better way to do this than regular expressions?
var columnIdentifier = parseInt(element.className.match(/\b(\d+)-column\b/)[1], 10);
var textBeforeEditing = this._editingNode.data[columnIdentifier];
var textBeforeEditing = this._editingNode.data[columnIdentifier] || "";
var currentEditingNode = this._editingNode;
function moveToNextIfNeeded(wasChange) {
......@@ -1157,7 +1159,7 @@ WebInspector.DataGrid.prototype = {
{
var fields = [];
for (var columnIdentifier in node.dataGrid.columns)
fields.push(node.data[columnIdentifier]);
fields.push(node.data[columnIdentifier] || "");
var tabSeparatedValues = fields.join("\t");
return tabSeparatedValues;
......@@ -1522,7 +1524,7 @@ WebInspector.DataGridNode.prototype = {
createCellContent: function(columnIdentifier)
{
return this.data[columnIdentifier];
return this.data[columnIdentifier] || "\u200b"; // Zero width space to keep the cell from collapsing.
},
elementWithColumnIdentifier: function(columnIdentifier)
......@@ -1574,6 +1576,9 @@ WebInspector.DataGridNode.prototype = {
this.children[i].revealed = false;
this.dispatchEventToListeners("collapsed");
if (this.dataGrid)
this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.CollapsedNode, {dataGridNode: this});
},
collapseRecursively: function()
......@@ -1619,6 +1624,9 @@ WebInspector.DataGridNode.prototype = {
this._expanded = true;
this.dispatchEventToListeners("expanded");
if (this.dataGrid)
this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.ExpandedNode, {dataGridNode: this});
},
expandRecursively: function()
......
......@@ -353,6 +353,7 @@
<script src="LayoutTimelineDataGridNode.js"></script>
<script src="ScriptTimelineRecord.js"></script>
<script src="ScriptTimelineDataGridNode.js"></script>
<script src="TreeOutlineDataGridSynchronizer.js"></script>
<script src="TimelineOverview.js"></script>
<script src="ProfileManager.js"></script>
<script src="ProfileType.js"></script>
......
......@@ -28,7 +28,7 @@
top: 0;
left: 0;
right: 0;
bottom: 21px;
bottom: 22px;
overflow-x: hidden;
overflow-y: auto;
......
......@@ -39,3 +39,20 @@
.timeline-view.overview > .timeline-decorations > .event-markers {
top: 23px;
}
.timeline-view.overview > .data-grid {
position: absolute;
top: 23px;
left: 0;
right: 0;
bottom: 0;
border: none;
}
.timeline-view.overview > .data-grid table.header {
display: none;
}
.timeline-view.overview > .data-grid .data-container {
top: 0;
}
......@@ -29,10 +29,16 @@ WebInspector.OverviewTimelineView = function()
this.navigationSidebarTreeOutline.onselect = this._treeElementSelected.bind(this);
var columns = {"graph": {width: "100%"}};
this._dataGrid = new WebInspector.DataGrid(columns);
this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid);
this._timelineDecorations = new WebInspector.TimelineDecorations;
this.element.appendChild(this._timelineDecorations.element);
this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element);
WebInspector.timelineManager.recording.addEventListener(WebInspector.TimelineRecording.Event.SourceCodeTimelineAdded, this._sourceCodeTimelineAdded, this);
};
......@@ -60,6 +66,11 @@ WebInspector.OverviewTimelineView.prototype = {
this._networkTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
},
shown: function()
{
this._treeOutlineDataGridSynchronizer.synchronize();
},
// Private
_compareTreeElementsByDetails: function(a, b)
......@@ -144,6 +155,10 @@ WebInspector.OverviewTimelineView.prototype = {
var resourceTreeElement = new WebInspector.ResourceTreeElement(resource);
resourceTreeElement.expand();
// FIXME: This is just a placeholder DataGridNode.
var resourceDataGridNode = new WebInspector.DataGridNode;
this._treeOutlineDataGridSynchronizer.associate(resourceTreeElement, resourceDataGridNode);
var parentTreeElement = this.navigationSidebarTreeOutline;
if (parentFrame) {
// Find the parent main resource, adding it if needed, to append this resource as a child.
......@@ -185,6 +200,10 @@ WebInspector.OverviewTimelineView.prototype = {
var sourceCodeTimelineTreeElement = new WebInspector.SourceCodeTimelineTreeElement(sourceCodeTimeline);
// FIXME: This is just a placeholder DataGridNode.
var sourceCodeTimelineDataGridNode = new WebInspector.DataGridNode;
this._treeOutlineDataGridSynchronizer.associate(sourceCodeTimelineTreeElement, sourceCodeTimelineDataGridNode);
this._insertTreeElement(sourceCodeTimelineTreeElement, parentTreeElement);
},
......
......@@ -31,3 +31,13 @@
bottom: 0;
overflow: hidden;
}
.content-view.timeline > .view-container > .timeline-view > .data-grid td {
height: 16px;
line-height: 16px;
}
.content-view.timeline > .view-container > .timeline-view > .data-grid table.data {
background-image: -webkit-linear-gradient(top, white, white 50%, rgb(243, 243, 243) 50%, rgb(243, 243, 243));
background-size: 100% 40px;
}
......@@ -122,6 +122,12 @@
top: 175px;
}
.sidebar > .panel.timeline.timeline-content-view-showing > .content {
/* This hides the scrollbar. The view shows a scrollbar, we don't need two. */
padding-right: 16px;
right: -16px;
}
.sidebar > .panel.timeline > .content > .stripe-background {
position: absolute;
top: 0;
......
......@@ -83,6 +83,8 @@ WebInspector.TimelineSidebarPanel = function()
this._stripeBackgroundElement.className = WebInspector.TimelineSidebarPanel.StripeBackgroundStyleClass;
this.contentElement.insertBefore(this._stripeBackgroundElement, this.contentElement.firstChild);
WebInspector.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
function delayedWork()
{
// Prime the creation of the singleton TimelineContentCiew since it needs to listen for events.
......@@ -104,6 +106,7 @@ WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass = "stopwatch-icon";
WebInspector.TimelineSidebarPanel.NetworkIconStyleClass = "network-icon";
WebInspector.TimelineSidebarPanel.ColorsIconStyleClass = "colors-icon";
WebInspector.TimelineSidebarPanel.ScriptIconStyleClass = "script-icon";
WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass = "timeline-content-view-showing";
WebInspector.TimelineSidebarPanel.prototype = {
constructor: WebInspector.TimelineSidebarPanel,
......@@ -180,5 +183,13 @@ WebInspector.TimelineSidebarPanel.prototype = {
{
console.assert(this._timelineTreeElementMap[treeElement.representedObject] === treeElement);
this.showTimelineView(treeElement.representedObject);
},
_contentBrowserCurrentContentViewDidChange: function(event)
{
if (WebInspector.contentBrowser.currentContentView instanceof WebInspector.TimelineContentView)
this.element.classList.add(WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass);
else
this.element.classList.remove(WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass);
}
};
......@@ -183,6 +183,9 @@ TreeOutline.prototype.removeChildAtIndex = function(childIndex, suppressOnDesele
child.parent = null;
child.nextSibling = null;
child.previousSibling = null;
if (this.treeOutline && this.treeOutline.onremove)
this.treeOutline.onremove(child);
}
TreeOutline.prototype.removeChild = function(child, suppressOnDeselect, suppressSelectSibling)
......@@ -199,6 +202,8 @@ TreeOutline.prototype.removeChild = function(child, suppressOnDeselect, suppress
TreeOutline.prototype.removeChildren = function(suppressOnDeselect)
{
var treeOutline = this.treeOutline;
for (var i = 0; i < this.children.length; ++i) {
var child = this.children[i];
child.deselect(suppressOnDeselect);
......@@ -213,6 +218,9 @@ TreeOutline.prototype.removeChildren = function(suppressOnDeselect)
child.parent = null;
child.nextSibling = null;
child.previousSibling = null;
if (treeOutline && treeOutline.onremove)
treeOutline.onremove(child);
}
this.children = [];
......@@ -222,6 +230,8 @@ TreeOutline.prototype.removeChildrenRecursive = function(suppressOnDeselect)
{
var childrenToRemove = this.children;
var treeOutline = this.treeOutline;
var child = this.children[0];
while (child) {
if (child.children.length)
......@@ -232,14 +242,19 @@ TreeOutline.prototype.removeChildrenRecursive = function(suppressOnDeselect)
for (var i = 0; i < childrenToRemove.length; ++i) {
child = childrenToRemove[i];
child.deselect(suppressOnDeselect);
if (child.treeOutline)
child.treeOutline._forgetTreeElement(child);
child._detach();
child.children = [];
child.treeOutline = null;
child.parent = null;
child.nextSibling = null;
child.previousSibling = null;
if (treeOutline && treeOutline.onremove)
treeOutline.onremove(child);
}
this.children = [];
......@@ -612,6 +627,9 @@ TreeElement.prototype = {
if (this._childrenListNode)
this._childrenListNode.classList.remove("hidden");
}
if (this.treeOutline && this.treeOutline.onhidden)
this.treeOutline.onhidden(this, x);
},
get shouldRefreshChildren() {
......
/*
* Copyright (C) 2013 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WebInspector.TreeOutlineDataGridSynchronizer = function(treeOutline, dataGrid)
{
WebInspector.Object.call(this);
this._treeOutline = treeOutline;
this._dataGrid = dataGrid;
this._treeOutline.element.parentNode.addEventListener("scroll", this._treeOutlineScrolled.bind(this));
this._dataGrid.scrollContainer.addEventListener("scroll", this._dataGridScrolled.bind(this));
this._treeOutline.__dataGridNode = this._dataGrid;
this._dataGrid.addEventListener(WebInspector.DataGrid.Event.ExpandedNode, this._dataGridNodeExpanded, this);
this._dataGrid.addEventListener(WebInspector.DataGrid.Event.CollapsedNode, this._dataGridNodeCollapsed, this);
this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
// FIXME: This is a hack. TreeOutline should just dispatch events via WebInspector.Object.
var existingOnAdd = treeOutline.onadd;
var existingOnRemove = treeOutline.onremove;
var existingOnExpand = treeOutline.onexpand;
var existingOnCollapse = treeOutline.oncollapse;
var existingOnHidden = treeOutline.onhidden;
var existingOnSelect = treeOutline.onselect;
treeOutline.onadd = function(element) {
this._treeElementAdded(element);
if (existingOnAdd)
existingOnAdd.call(treeOutline, element);
}.bind(this);
treeOutline.onremove = function(element) {
this._treeElementRemoved(element);
if (existingOnRemove)
existingOnRemove.call(treeOutline, element);
}.bind(this);
treeOutline.onexpand = function(element) {
this._treeElementExpanded(element);
if (existingOnExpand)
existingOnExpand.call(treeOutline, element);
}.bind(this);
treeOutline.oncollapse = function(element) {
this._treeElementCollapsed(element);
if (existingOnCollapse)
existingOnCollapse.call(treeOutline, element);
}.bind(this);
treeOutline.onhidden = function(element, hidden) {
this._treeElementHiddenChanged(element, hidden);
if (existingOnHidden)
existingOnHidden.call(treeOutline, element, hidden);
}.bind(this);
treeOutline.onselect = function(element, selectedByUser) {
this._treeElementSelected(element, selectedByUser);
if (existingOnSelect)
existingOnSelect.call(treeOutline, element, selectedByUser);
}.bind(this);
}
WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
constructor: WebInspector.TreeOutlineDataGridSynchronizer,
__proto__: WebInspector.Object,
// Public
associate: function(treeElement, dataGridNode)
{
console.assert(treeElement);
console.assert(dataGridNode);
treeElement.__dataGridNode = dataGridNode;
dataGridNode.__treeElement = treeElement;
},
synchronize: function()
{
this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
if (this._treeOutline.selectedTreeElement)
this._treeOutline.selectedTreeElement.__dataGridNode.select(true);
else if (this._dataGrid.selectedNode)
this._dataGrid.selectedNode.deselect(true);
},
// Private
_treeOutlineScrolled: function(event)
{
this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
},
_dataGridScrolled: function(event)
{
this._treeOutline.element.parentNode.scrollTop = this._dataGrid.scrollContainer.scrollTop;
},
_dataGridNodeSelected: function(event)
{
var dataGridNode = this._dataGrid.selectedNode;
if (dataGridNode)
dataGridNode.__treeElement.select(true, true, true, true);
},
_dataGridNodeExpanded: function(event)
{
var dataGridNode = event.data.dataGridNode;
console.assert(dataGridNode);
if (!dataGridNode.__treeElement.expanded)
dataGridNode.__treeElement.expand();
},
_dataGridNodeCollapsed: function(event)
{
var dataGridNode = event.data.dataGridNode;
console.assert(dataGridNode);
if (dataGridNode.__treeElement.expanded)
dataGridNode.__treeElement.collapse();
},
_treeElementSelected: function(treeElement, selectedByUser)
{
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
dataGridNode.select(true);
},
_treeElementAdded: function(treeElement)
{
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
var parentDataGridNode = treeElement.parent.__dataGridNode;
console.assert(dataGridNode);
var childIndex = treeElement.parent.children.indexOf(treeElement);
console.assert(childIndex !== -1);
parentDataGridNode.insertChild(dataGridNode, childIndex);
},
_treeElementRemoved: function(treeElement)
{
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
dataGridNode.parent.removeChild(dataGridNode);
},
_treeElementExpanded: function(treeElement)
{
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
if (!dataGridNode.expanded)
dataGridNode.expand();
},
_treeElementCollapsed: function(treeElement)
{
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
if (dataGridNode.expanded)
dataGridNode.collapse();
},
_treeElementHiddenChanged: function(treeElement, hidden)
{
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
if (hidden)
dataGridNode.element.classList.add("hidden");
else
dataGridNode.element.classList.remove("hidden");
}
}
WebInspector.TreeOutlineDataGridSynchronizer.prototype.__proto__ = WebInspector.Object.prototype;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment