ShortcutsScreen.js [plain text]
WebInspector.ShortcutsScreen = function()
{
this._sections = ({});
}
WebInspector.ShortcutsScreen.prototype = {
section: function(name)
{
var section = this._sections[name];
if (!section)
this._sections[name] = section = new WebInspector.ShortcutsSection(name);
return section;
},
createShortcutsTabView: function()
{
var orderedSections = [];
for (var section in this._sections)
orderedSections.push(this._sections[section]);
function compareSections(a, b)
{
return a.order - b.order;
}
orderedSections.sort(compareSections);
var view = new WebInspector.View();
view.element.className = "settings-tab-container";
view.element.createChild("header").createChild("h3").appendChild(document.createTextNode(WebInspector.UIString("Shortcuts")));
var container = view.element.createChild("div", "help-container-wrapper").createChild("div");
container.className = "help-content help-container";
for (var i = 0; i < orderedSections.length; ++i)
orderedSections[i].renderSection(container);
return view;
}
}
WebInspector.shortcutsScreen = null;
WebInspector.ShortcutsSection = function(name)
{
this.name = name;
this._lines = ([]);
this.order = ++WebInspector.ShortcutsSection._sequenceNumber;
};
WebInspector.ShortcutsSection._sequenceNumber = 0;
WebInspector.ShortcutsSection.prototype = {
addKey: function(key, description)
{
this._addLine(this._renderKey(key), description);
},
addRelatedKeys: function(keys, description)
{
this._addLine(this._renderSequence(keys, "/"), description);
},
addAlternateKeys: function(keys, description)
{
this._addLine(this._renderSequence(keys, WebInspector.UIString("or")), description);
},
_addLine: function(keyElement, description)
{
this._lines.push({ key: keyElement, text: description })
},
renderSection: function(container)
{
var parent = container.createChild("div", "help-block");
var headLine = parent.createChild("div", "help-line");
headLine.createChild("div", "help-key-cell");
headLine.createChild("div", "help-section-title help-cell").textContent = this.name;
for (var i = 0; i < this._lines.length; ++i) {
var line = parent.createChild("div", "help-line");
var keyCell = line.createChild("div", "help-key-cell");
keyCell.appendChild(this._lines[i].key);
keyCell.appendChild(this._createSpan("help-key-delimiter", ":"));
line.createChild("div", "help-cell").textContent = this._lines[i].text;
}
},
_renderSequence: function(sequence, delimiter)
{
var delimiterSpan = this._createSpan("help-key-delimiter", delimiter);
return this._joinNodes(sequence.map(this._renderKey.bind(this)), delimiterSpan);
},
_renderKey: function(key)
{
var keyName = key.name;
var plus = this._createSpan("help-combine-keys", "+");
return this._joinNodes(keyName.split(" + ").map(this._createSpan.bind(this, "help-key monospace")), plus);
},
_createSpan: function(className, textContent)
{
var node = document.createElement("span");
node.className = className;
node.textContent = textContent;
return node;
},
_joinNodes: function(nodes, delimiter)
{
var result = document.createDocumentFragment();
for (var i = 0; i < nodes.length; ++i) {
if (i > 0)
result.appendChild(delimiter.cloneNode(true));
result.appendChild(nodes[i]);
}
return result;
}
}