AuditLauncherView.js [plain text]
WebInspector.AuditLauncherView = function(categoriesById, runnerCallback)
{
WebInspector.View.call(this);
this._categoriesById = categoriesById;
this._runnerCallback = runnerCallback;
this._categoryIdPrefix = "audit-category-item-";
this._auditRunning = false;
this.element.addStyleClass("audit-launcher-view");
this._contentElement = document.createElement("div");
this._contentElement.className = "audit-launcher-view-content";
this.element.appendChild(this._contentElement);
this._resetResourceCount();
function categorySortFunction(a, b)
{
var aTitle = a.displayName || "";
var bTitle = b.displayName || "";
return aTitle.localeCompare(bTitle);
}
var sortedCategories = [];
for (var id in this._categoriesById)
sortedCategories.push(this._categoriesById[id]);
sortedCategories.sort(categorySortFunction);
if (!sortedCategories.length) {
this._headerElement = document.createElement("h1");
this._headerElement.className = "no-audits";
this._headerElement.textContent = WebInspector.UIString("No audits to run");
this._contentElement.appendChild(this._headerElement);
} else
this._createLauncherUI(sortedCategories);
}
WebInspector.AuditLauncherView.prototype = {
updateResourceTrackingState: function(isTracking)
{
if (!this._auditPresentStateLabelElement)
return;
if (isTracking) {
this._auditPresentStateLabelElement.nodeValue = WebInspector.UIString("Audit Present State");
this._auditPresentStateElement.disabled = false;
this._auditPresentStateElement.parentElement.removeStyleClass("disabled");
} else {
this._resetResourceCount();
this._auditPresentStateLabelElement.nodeValue = WebInspector.UIString("Audit Present State (Resource Tracking must be enabled)");
this._auditPresentStateElement.disabled = true;
this._auditPresentStateElement.parentElement.addStyleClass("disabled");
this.auditReloadedStateElement.checked = true;
}
},
get totalResources()
{
return this._totalResources;
},
set totalResources(x)
{
if (this._totalResources === x)
return;
this._totalResources = x;
this._updateResourceProgress();
},
get loadedResources()
{
return this._loadedResources;
},
set loadedResources(x)
{
if (this._loadedResources === x)
return;
this._loadedResources = x;
this._updateResourceProgress();
},
_resetResourceCount: function()
{
this.loadedResources = 0;
this.totalResources = 1;
},
resourceStarted: function(resource)
{
++this.totalResources;
},
resourceFinished: function(resource)
{
++this.loadedResources;
},
reset: function()
{
this._resetResourceCount();
},
_setAuditRunning: function(auditRunning)
{
if (this._auditRunning === auditRunning)
return;
this._auditRunning = auditRunning;
this._updateButton();
this._updateResourceProgress();
},
_launchButtonClicked: function(event)
{
var catIds = [];
var childNodes = this._categoriesElement.childNodes;
for (var id in this._categoriesById) {
if (this._categoriesById[id]._checkboxElement.checked)
catIds.push(id);
}
this._setAuditRunning(true);
this._runnerCallback(catIds, this._auditPresentStateElement.checked, this._setAuditRunning.bind(this, false));
},
_selectAllClicked: function(checkCategories)
{
var childNodes = this._categoriesElement.childNodes;
for (var i = 0, length = childNodes.length; i < length; ++i)
childNodes[i].firstChild.checked = checkCategories;
this._currentCategoriesCount = checkCategories ? this._totalCategoriesCount : 0;
this._updateButton();
},
_categoryClicked: function(event)
{
this._currentCategoriesCount += event.target.checked ? 1 : -1;
this._selectAllCheckboxElement.checked = this._currentCategoriesCount === this._totalCategoriesCount;
this._updateButton();
},
_createCategoryElement: function(title, id)
{
var labelElement = document.createElement("label");
labelElement.id = this._categoryIdPrefix + id;
var element = document.createElement("input");
element.type = "checkbox";
labelElement.appendChild(element);
labelElement.appendChild(document.createTextNode(title));
return labelElement;
},
_createLauncherUI: function(sortedCategories)
{
this._headerElement = document.createElement("h1");
this._headerElement.textContent = WebInspector.UIString("Select audits to run");
this._contentElement.appendChild(this._headerElement);
function handleSelectAllClick(event)
{
this._selectAllClicked(event.target.checked);
}
var categoryElement = this._createCategoryElement(WebInspector.UIString("Select All"), "");
categoryElement.id = "audit-launcher-selectall";
this._selectAllCheckboxElement = categoryElement.firstChild;
this._selectAllCheckboxElement.checked = true;
this._selectAllCheckboxElement.addEventListener("click", handleSelectAllClick.bind(this), false);
this._contentElement.appendChild(categoryElement);
this._categoriesElement = document.createElement("div");
this._categoriesElement.className = "audit-categories-container";
this._contentElement.appendChild(this._categoriesElement);
var boundCategoryClickListener = this._categoryClicked.bind(this);
for (var i = 0; i < sortedCategories.length; ++i) {
categoryElement = this._createCategoryElement(sortedCategories[i].displayName, sortedCategories[i].id);
categoryElement.firstChild.addEventListener("click", boundCategoryClickListener, false);
sortedCategories[i]._checkboxElement = categoryElement.firstChild;
this._categoriesElement.appendChild(categoryElement);
}
this._totalCategoriesCount = this._categoriesElement.childNodes.length;
this._currentCategoriesCount = 0;
var flexibleSpaceElement = document.createElement("div");
flexibleSpaceElement.className = "flexible-space";
this._contentElement.appendChild(flexibleSpaceElement);
this._buttonContainerElement = document.createElement("div");
this._buttonContainerElement.className = "button-container";
var labelElement = document.createElement("label");
this._auditPresentStateElement = document.createElement("input");
this._auditPresentStateElement.name = "audit-mode";
this._auditPresentStateElement.type = "radio";
this._auditPresentStateElement.checked = true;
this._auditPresentStateLabelElement = document.createTextNode("");
labelElement.appendChild(this._auditPresentStateElement);
labelElement.appendChild(this._auditPresentStateLabelElement);
this._buttonContainerElement.appendChild(labelElement);
labelElement = document.createElement("label");
this.auditReloadedStateElement = document.createElement("input");
this.auditReloadedStateElement.name = "audit-mode";
this.auditReloadedStateElement.type = "radio";
labelElement.appendChild(this.auditReloadedStateElement);
labelElement.appendChild(document.createTextNode("Reload Page and Audit on Load"));
this._buttonContainerElement.appendChild(labelElement);
this._launchButton = document.createElement("button");
this._launchButton.type = "button";
this._launchButton.textContent = WebInspector.UIString("Run");
this._launchButton.addEventListener("click", this._launchButtonClicked.bind(this), false);
this._buttonContainerElement.appendChild(this._launchButton);
this._resourceProgressContainer = document.createElement("span");
this._resourceProgressContainer.className = "resource-progress";
var resourceProgressImage = document.createElement("img");
this._resourceProgressContainer.appendChild(resourceProgressImage);
this._resourceProgressTextElement = document.createElement("span");
this._resourceProgressContainer.appendChild(this._resourceProgressTextElement);
this._buttonContainerElement.appendChild(this._resourceProgressContainer);
this._contentElement.appendChild(this._buttonContainerElement);
this._selectAllClicked(this._selectAllCheckboxElement.checked);
this.updateResourceTrackingState();
this._updateButton();
},
_updateResourceProgress: function()
{
if (!this._resourceProgressContainer)
return;
if (!this._auditRunning) {
this._resetResourceCount();
this._resourceProgressContainer.addStyleClass("hidden");
} else
this._resourceProgressContainer.removeStyleClass("hidden");
this._resourceProgressTextElement.textContent = WebInspector.UIString("Loading (%d of %d)", this.loadedResources, this.totalResources);
},
_updateButton: function()
{
this._launchButton.disabled = !this._currentCategoriesCount || this._auditRunning;
}
}
WebInspector.AuditLauncherView.prototype.__proto__ = WebInspector.View.prototype;