ShortcutsScreen.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  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. * @constructor
  32. */
  33. WebInspector.ShortcutsScreen = function()
  34. {
  35. this._sections = /** @type {Object.<string, !WebInspector.ShortcutsSection>} */ ({});
  36. }
  37. WebInspector.ShortcutsScreen.prototype = {
  38. /**
  39. * @param {string} name
  40. * @return {!WebInspector.ShortcutsSection}
  41. */
  42. section: function(name)
  43. {
  44. var section = this._sections[name];
  45. if (!section)
  46. this._sections[name] = section = new WebInspector.ShortcutsSection(name);
  47. return section;
  48. },
  49. /**
  50. * @return {!WebInspector.View}
  51. */
  52. createShortcutsTabView: function()
  53. {
  54. var orderedSections = [];
  55. for (var section in this._sections)
  56. orderedSections.push(this._sections[section]);
  57. function compareSections(a, b)
  58. {
  59. return a.order - b.order;
  60. }
  61. orderedSections.sort(compareSections);
  62. var view = new WebInspector.View();
  63. view.element.className = "settings-tab-container";
  64. view.element.createChild("header").createChild("h3").appendChild(document.createTextNode(WebInspector.UIString("Shortcuts")));
  65. var scrollPane = view.element.createChild("div", "help-container-wrapper");
  66. var container = scrollPane.createChild("div");
  67. container.className = "help-content help-container";
  68. for (var i = 0; i < orderedSections.length; ++i)
  69. orderedSections[i].renderSection(container);
  70. var note = scrollPane.createChild("p", "help-footnote");
  71. var noteLink = note.createChild("a");
  72. noteLink.href = "https://developers.google.com/chrome-developer-tools/docs/shortcuts";
  73. noteLink.target = "_blank";
  74. noteLink.createTextChild(WebInspector.UIString("Full list of keyboard shortcuts and gestures"));
  75. return view;
  76. }
  77. }
  78. /**
  79. * We cannot initialize it here as localized strings are not loaded yet.
  80. * @type {?WebInspector.ShortcutsScreen}
  81. */
  82. WebInspector.shortcutsScreen = null;
  83. /**
  84. * @constructor
  85. * @param {string} name
  86. */
  87. WebInspector.ShortcutsSection = function(name)
  88. {
  89. this.name = name;
  90. this._lines = /** @type {!Array.<{key: !Node, text: string}>} */ ([]);
  91. this.order = ++WebInspector.ShortcutsSection._sequenceNumber;
  92. };
  93. WebInspector.ShortcutsSection._sequenceNumber = 0;
  94. WebInspector.ShortcutsSection.prototype = {
  95. /**
  96. * @param {!WebInspector.KeyboardShortcut.Descriptor} key
  97. * @param {string} description
  98. */
  99. addKey: function(key, description)
  100. {
  101. this._addLine(this._renderKey(key), description);
  102. },
  103. /**
  104. * @param {!Array.<!WebInspector.KeyboardShortcut.Descriptor>} keys
  105. * @param {string} description
  106. */
  107. addRelatedKeys: function(keys, description)
  108. {
  109. this._addLine(this._renderSequence(keys, "/"), description);
  110. },
  111. /**
  112. * @param {!Array.<!WebInspector.KeyboardShortcut.Descriptor>} keys
  113. * @param {string} description
  114. */
  115. addAlternateKeys: function(keys, description)
  116. {
  117. this._addLine(this._renderSequence(keys, WebInspector.UIString("or")), description);
  118. },
  119. /**
  120. * @param {!Node} keyElement
  121. * @param {string} description
  122. */
  123. _addLine: function(keyElement, description)
  124. {
  125. this._lines.push({ key: keyElement, text: description })
  126. },
  127. /**
  128. * @param {!Element} container
  129. */
  130. renderSection: function(container)
  131. {
  132. var parent = container.createChild("div", "help-block");
  133. var headLine = parent.createChild("div", "help-line");
  134. headLine.createChild("div", "help-key-cell");
  135. headLine.createChild("div", "help-section-title help-cell").textContent = this.name;
  136. for (var i = 0; i < this._lines.length; ++i) {
  137. var line = parent.createChild("div", "help-line");
  138. var keyCell = line.createChild("div", "help-key-cell");
  139. keyCell.appendChild(this._lines[i].key);
  140. keyCell.appendChild(this._createSpan("help-key-delimiter", ":"));
  141. line.createChild("div", "help-cell").textContent = this._lines[i].text;
  142. }
  143. },
  144. /**
  145. * @param {!Array.<!WebInspector.KeyboardShortcut.Descriptor>} sequence
  146. * @param {string} delimiter
  147. * @return {!Node}
  148. */
  149. _renderSequence: function(sequence, delimiter)
  150. {
  151. var delimiterSpan = this._createSpan("help-key-delimiter", delimiter);
  152. return this._joinNodes(sequence.map(this._renderKey.bind(this)), delimiterSpan);
  153. },
  154. /**
  155. * @param {!WebInspector.KeyboardShortcut.Descriptor} key
  156. * @return {!Node}
  157. */
  158. _renderKey: function(key)
  159. {
  160. var keyName = key.name;
  161. var plus = this._createSpan("help-combine-keys", "+");
  162. return this._joinNodes(keyName.split(" + ").map(this._createSpan.bind(this, "help-key")), plus);
  163. },
  164. /**
  165. * @param {string} className
  166. * @param {string} textContent
  167. * @return {!Element}
  168. */
  169. _createSpan: function(className, textContent)
  170. {
  171. var node = document.createElement("span");
  172. node.className = className;
  173. node.textContent = textContent;
  174. return node;
  175. },
  176. /**
  177. * @param {!Array.<!Element>} nodes
  178. * @param {!Element} delimiter
  179. * @return {!Node}
  180. */
  181. _joinNodes: function(nodes, delimiter)
  182. {
  183. var result = document.createDocumentFragment();
  184. for (var i = 0; i < nodes.length; ++i) {
  185. if (i > 0)
  186. result.appendChild(delimiter.cloneNode(true));
  187. result.appendChild(nodes[i]);
  188. }
  189. return result;
  190. }
  191. }