WebInspector.TimelineGrid = function()
{
this.element = document.createElement("div");
this._itemsGraphsElement = document.createElement("div");
this._itemsGraphsElement.id = "resources-graphs";
this.element.appendChild(this._itemsGraphsElement);
this._dividersElement = document.createElement("div");
this._dividersElement.id = "resources-dividers";
this.element.appendChild(this._dividersElement);
this._eventDividersElement = document.createElement("div");
this._eventDividersElement.id = "resources-event-dividers";
this.element.appendChild(this._eventDividersElement);
this._dividersLabelBarElement = document.createElement("div");
this._dividersLabelBarElement.id = "resources-dividers-label-bar";
this.element.appendChild(this._dividersLabelBarElement);
}
WebInspector.TimelineGrid.prototype = {
get itemsGraphsElement()
{
return this._itemsGraphsElement;
},
updateDividers: function(force, calculator, paddingLeft)
{
var dividerCount = Math.round(this._dividersElement.offsetWidth / 64);
var slice = calculator.boundarySpan / dividerCount;
if (!force && this._currentDividerSlice === slice)
return false;
if (typeof paddingLeft !== "number")
paddingLeft = 0;
this._currentDividerSlice = slice;
this._eventDividersElement.removeChildren();
var divider = this._dividersElement.firstChild;
var dividerLabelBar = this._dividersLabelBarElement.firstChild;
var dividersLabelBarElementClientWidth = this._dividersLabelBarElement.clientWidth;
var clientWidth = dividersLabelBarElementClientWidth - paddingLeft;
for (var i = paddingLeft ? 0 : 1; i <= dividerCount; ++i) {
if (!divider) {
divider = document.createElement("div");
divider.className = "resources-divider";
this._dividersElement.appendChild(divider);
dividerLabelBar = document.createElement("div");
dividerLabelBar.className = "resources-divider";
var label = document.createElement("div");
label.className = "resources-divider-label";
dividerLabelBar._labelElement = label;
dividerLabelBar.appendChild(label);
this._dividersLabelBarElement.appendChild(dividerLabelBar);
dividersLabelBarElementClientWidth = this._dividersLabelBarElement.clientWidth;
}
if (i === dividerCount)
divider.addStyleClass("last");
else
divider.removeStyleClass("last");
var left = paddingLeft + clientWidth * (i / dividerCount);
var percentLeft = 100 * left / dividersLabelBarElementClientWidth;
this._setDividerAndBarLeft(divider, dividerLabelBar, percentLeft);
if (!isNaN(slice))
dividerLabelBar._labelElement.textContent = calculator.formatValue(slice * i);
else
dividerLabelBar._labelElement.textContent = "";
divider = divider.nextSibling;
dividerLabelBar = dividerLabelBar.nextSibling;
}
while (divider) {
var nextDivider = divider.nextSibling;
this._dividersElement.removeChild(divider);
divider = nextDivider;
}
while (dividerLabelBar) {
var nextDivider = dividerLabelBar.nextSibling;
this._dividersLabelBarElement.removeChild(dividerLabelBar);
dividerLabelBar = nextDivider;
}
return true;
},
_setDividerAndBarLeft: function(divider, dividerLabelBar, percentLeft)
{
var percentStyleLeft = parseFloat(divider.style.left);
if (!isNaN(percentStyleLeft) && Math.abs(percentStyleLeft - percentLeft) < 0.1)
return;
divider.style.left = percentLeft + "%";
dividerLabelBar.style.left = percentLeft + "%";
},
addEventDivider: function(divider)
{
this._eventDividersElement.appendChild(divider);
},
setScrollAndDividerTop: function(scrollTop, dividersTop)
{
this._dividersElement.style.top = scrollTop + "px";
this._eventDividersElement.style.top = scrollTop + "px";
this._dividersLabelBarElement.style.top = dividersTop + "px";
}
}