• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 */
34WebInspector.ShortcutsScreen = function()
35{
36    /** @type {!Object.<string, !WebInspector.ShortcutsSection>} */
37    this._sections = {};
38}
39
40WebInspector.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 */
91WebInspector.shortcutsScreen;
92
93/**
94 * @constructor
95 * @param {string} name
96 */
97WebInspector.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
104WebInspector.ShortcutsSection._sequenceNumber = 0;
105
106WebInspector.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