WebInspector.ShortcutsHelp = function()
{
this._sections = {};
}
WebInspector.ShortcutsHelp.prototype = {
section: function(name)
{
var section = this._sections[name];
if (!section)
this._sections[name] = section = new WebInspector.ShortcutsSection(name);
return section;
},
show: function()
{
if (!this._helpScreen) {
this._helpScreen = new WebInspector.HelpScreen(WebInspector.UIString("Keyboard Shortcuts"));
this._buildTable(this._helpScreen.contentElement, 2);
}
this._helpScreen.show();
},
_buildTable: function(parent, nColumns)
{
var height = 0;
var orderedSections = [];
for (var section in this._sections) {
height += this._sections[section]._height;
orderedSections.push(this._sections[section])
}
function compareSections(a, b)
{
return a.order - b.order;
}
orderedSections = orderedSections.sort(compareSections);
const wrapAfter = height / nColumns;
var table = document.createElement("table");
table.className = "help-table";
var row = table.createChild("tr");
for (var section = 0; section < orderedSections.length;) {
var td = row.createChild("td");
td.style.width = (100 / nColumns) + "%";
var column = td.createChild("table");
for (var columnHeight = 0;
columnHeight < wrapAfter && section < orderedSections.length;
columnHeight += orderedSections[section]._height, section++) {
orderedSections[section].renderSection(column);
}
}
parent.appendChild(table);
}
};
WebInspector.shortcutsHelp = new WebInspector.ShortcutsHelp();
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(htmlKey, description)
{
this._lines.push({ key: htmlKey, text: description })
},
renderSection: function(parent)
{
this._renderHeader(parent);
for (var line = 0; line < this._lines.length; ++line) {
var tr = parent.createChild("tr");
tr.createChild("td", "help-key-cell").innerHTML = this._lines[line].key + " : ";
tr.createChild("td").textContent = this._lines[line].text;
}
},
_renderHeader: function(parent)
{
var trHead = parent.createChild("tr");
trHead.createChild("th");
trHead.createChild("th").textContent = this.name;
},
_renderSequence: function(sequence, delimiter)
{
var delimiterHtml = '<span class="help-key-delimiter">' + delimiter.escapeHTML() + '</span>'
return sequence.map(this._renderKey).join(delimiterHtml);
},
_renderKey: function(key)
{
function renderLabel(label)
{
return '<span class="help-key monospace">' + label.escapeHTML() + '</span>';
}
return key.split(" + ").map(renderLabel).join('<span class="help-combine-keys">+</span>');
},
get _height()
{
return this._lines.length + 2; }
};