1 /* 2 * Copyright (C) 2010 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions are 6 * met: 7 * 8 * * Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * * Redistributions in binary form must reproduce the above 11 * copyright notice, this list of conditions and the following disclaimer 12 * in the documentation and/or other materials provided with the 13 * distribution. 14 * * Neither the name of Google Inc. nor the names of its 15 * contributors may be used to endorse or promote products derived from 16 * this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 */ 30 31 /** 32 * @constructor 33 */ 34 WebInspector.ShortcutsScreen = function() 35 { 36 /** @type {!Object.<string, !WebInspector.ShortcutsSection>} */ 37 this._sections = {}; 38 } 39 40 WebInspector.ShortcutsScreen.prototype = { 41 /** 42 * @param {string} name 43 * @return {!WebInspector.ShortcutsSection} 44 */ 45 section: function(name) 46 { 47 var section = this._sections[name]; 48 if (!section) 49 this._sections[name] = section = new WebInspector.ShortcutsSection(name); 50 return section; 51 }, 52 53 /** 54 * @return {!WebInspector.View} 55 */ 56 createShortcutsTabView: function() 57 { 58 var orderedSections = []; 59 for (var section in this._sections) 60 orderedSections.push(this._sections[section]); 61 function compareSections(a, b) 62 { 63 return a.order - b.order; 64 } 65 orderedSections.sort(compareSections); 66 67 var view = new WebInspector.View(); 68 69 view.element.className = "settings-tab-container"; 70 view.element.createChild("header").createChild("h3").appendChild(document.createTextNode(WebInspector.UIString("Shortcuts"))); 71 var scrollPane = view.element.createChild("div", "help-container-wrapper"); 72 var container = scrollPane.createChild("div"); 73 container.className = "help-content help-container"; 74 for (var i = 0; i < orderedSections.length; ++i) 75 orderedSections[i].renderSection(container); 76 77 var note = scrollPane.createChild("p", "help-footnote"); 78 var noteLink = note.createChild("a"); 79 noteLink.href = "https://developers.google.com/chrome-developer-tools/docs/shortcuts"; 80 noteLink.target = "_blank"; 81 noteLink.createTextChild(WebInspector.UIString("Full list of keyboard shortcuts and gestures")); 82 83 return view; 84 } 85 } 86 87 /** 88 * We cannot initialize it here as localized strings are not loaded yet. 89 * @type {!WebInspector.ShortcutsScreen} 90 */ 91 WebInspector.shortcutsScreen; 92 93 /** 94 * @constructor 95 * @param {string} name 96 */ 97 WebInspector.ShortcutsSection = function(name) 98 { 99 this.name = name; 100 this._lines = /** @type {!Array.<{key: !Node, text: string}>} */ ([]); 101 this.order = ++WebInspector.ShortcutsSection._sequenceNumber; 102 }; 103 104 WebInspector.ShortcutsSection._sequenceNumber = 0; 105 106 WebInspector.ShortcutsSection.prototype = { 107 /** 108 * @param {!WebInspector.KeyboardShortcut.Descriptor} key 109 * @param {string} description 110 */ 111 addKey: function(key, description) 112 { 113 this._addLine(this._renderKey(key), description); 114 }, 115 116 /** 117 * @param {!Array.<!WebInspector.KeyboardShortcut.Descriptor>} keys 118 * @param {string} description 119 */ 120 addRelatedKeys: function(keys, description) 121 { 122 this._addLine(this._renderSequence(keys, "/"), description); 123 }, 124 125 /** 126 * @param {!Array.<!WebInspector.KeyboardShortcut.Descriptor>} keys 127 * @param {string} description 128 */ 129 addAlternateKeys: function(keys, description) 130 { 131 this._addLine(this._renderSequence(keys, WebInspector.UIString("or")), description); 132 }, 133 134 /** 135 * @param {!Node} keyElement 136 * @param {string} description 137 */ 138 _addLine: function(keyElement, description) 139 { 140 this._lines.push({ key: keyElement, text: description }) 141 }, 142 143 /** 144 * @param {!Element} container 145 */ 146 renderSection: function(container) 147 { 148 var parent = container.createChild("div", "help-block"); 149 150 var headLine = parent.createChild("div", "help-line"); 151 headLine.createChild("div", "help-key-cell"); 152 headLine.createChild("div", "help-section-title help-cell").textContent = this.name; 153 154 for (var i = 0; i < this._lines.length; ++i) { 155 var line = parent.createChild("div", "help-line"); 156 var keyCell = line.createChild("div", "help-key-cell"); 157 keyCell.appendChild(this._lines[i].key); 158 keyCell.appendChild(this._createSpan("help-key-delimiter", ":")); 159 line.createChild("div", "help-cell").textContent = this._lines[i].text; 160 } 161 }, 162 163 /** 164 * @param {!Array.<!WebInspector.KeyboardShortcut.Descriptor>} sequence 165 * @param {string} delimiter 166 * @return {!Node} 167 */ 168 _renderSequence: function(sequence, delimiter) 169 { 170 var delimiterSpan = this._createSpan("help-key-delimiter", delimiter); 171 return this._joinNodes(sequence.map(this._renderKey.bind(this)), delimiterSpan); 172 }, 173 174 /** 175 * @param {!WebInspector.KeyboardShortcut.Descriptor} key 176 * @return {!Node} 177 */ 178 _renderKey: function(key) 179 { 180 var keyName = key.name; 181 var plus = this._createSpan("help-combine-keys", "+"); 182 return this._joinNodes(keyName.split(" + ").map(this._createSpan.bind(this, "help-key")), plus); 183 }, 184 185 /** 186 * @param {string} className 187 * @param {string} textContent 188 * @return {!Element} 189 */ 190 _createSpan: function(className, textContent) 191 { 192 var node = document.createElement("span"); 193 node.className = className; 194 node.textContent = textContent; 195 return node; 196 }, 197 198 /** 199 * @param {!Array.<!Element>} nodes 200 * @param {!Element} delimiter 201 * @return {!Node} 202 */ 203 _joinNodes: function(nodes, delimiter) 204 { 205 var result = document.createDocumentFragment(); 206 for (var i = 0; i < nodes.length; ++i) { 207 if (i > 0) 208 result.appendChild(delimiter.cloneNode(true)); 209 result.appendChild(nodes[i]); 210 } 211 return result; 212 } 213 } 214
