Changeset 118747 in webkit


Ignore:
Timestamp:
May 29, 2012 3:06:05 AM (12 years ago)
Author:
caseq@chromium.org
Message:

Web Inspector: Tabbed Settings Screen
​https://bugs.webkit.org/show_bug.cgi?id=87497

Patch by Eugene Klyuchnikov <​eustas.bug@gmail.com> on 2012-05-29
Reviewed by Yury Semikhatsky.

Combine settings screen and shortcuts screen
to a single tabbed settings screen.
This will make shortcuts screen more discoverable.

  • inspector/front-end/HelpScreen.js:

(WebInspector.HelpScreen): Make titled tamplate optional.
(WebInspector.HelpScreen.prototype._createCloseButton): Extract method.

  • inspector/front-end/SettingsScreen.js:

(WebInspector.SettingsScreen): Split initialization and UI construction.
(WebInspector.SettingsScreen.prototype._createSettingsTabView.appendSection):
(WebInspector.SettingsScreen.prototype._createSettingsTabView):
Extract GUI construction method.
(WebInspector.SettingsScreen.prototype._getOrCreateTabbedPane):
Make GUI construction lazy.
(WebInspector.SettingsScreen.prototype.selectTab):
Add method for external tab swithching.
(WebInspector.SettingsScreen.prototype.wasShown):
Make GUI construction lazy.
(WebInspector.SettingsScreenTabbedPane):
Extend class to access protected member.
(WebInspector.SettingsController.prototype._buttonClicked):
Change "showSettingsScreen" visibility and parameters.
(WebInspector.SettingsController.prototype._onHideSettingsScreen):
Preserve settings screen state.
(WebInspector.SettingsController.prototype.showSettingsScreen):
Change method visibility and parameters.

  • inspector/front-end/ShortcutsScreen.js:

(WebInspector.ShortcutsScreen): Remove inheritance from HelpScreen.
(WebInspector.ShortcutsScreen.prototype._createShortcutsTabView):
Refactoring of GUI construction.
(WebInspector.ShortcutsSection.prototype.renderSection):
Ditto.

  • inspector/front-end/helpScreen.css:

(.help-window-main ::-webkit-scrollbar): Rebind scrollbar settings.
(.help-window-main ::-webkit-resizer): Ditto.
(.help-window-main ::-webkit-scrollbar-thumb:vertical): Ditto.
(.help-window-main ::-webkit-scrollbar-thumb:vertical:active): Ditto.
(.help-window-main ::-webkit-scrollbar-track:vertical): Ditto.
(body:not(.compact) #settings-screen .tabbed-pane): Fix container height.
(#settings-screen .tabbed-pane-header): Ditto.
(#settings-screen .tabbed-pane-header-tabs): Adjust spacing.
(#settings-screen .tabbed-pane-header-tab): Adjust style.
(#settings-screen .help-close-button): Adjust spacing.
(#settings-screen .tabbed-pane-header-tab.selected):
Erase line below active tab.
(#settings-screen .tabbed-pane-content): Adjust spacing.
(#settings-screen .help-content): Ditto.

  • inspector/front-end/inspector.js:

(WebInspector.documentKeyDown): Use Settings screen to show shortcuts.

Location:
trunk/Source/WebCore
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r118742 r118747  
     12012-05-29  Eugene Klyuchnikov  <eustas.bug@gmail.com>
     2
     3        Web Inspector: Tabbed Settings Screen
     4        https://bugs.webkit.org/show_bug.cgi?id=87497
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        Combine settings screen and shortcuts screen
     9        to a single tabbed settings screen.
     10        This will make shortcuts screen more discoverable.
     11
     12        * inspector/front-end/HelpScreen.js:
     13        (WebInspector.HelpScreen): Make titled tamplate optional.
     14        (WebInspector.HelpScreen.prototype._createCloseButton): Extract method.
     15        * inspector/front-end/SettingsScreen.js:
     16        (WebInspector.SettingsScreen): Split initialization and UI construction.
     17        (WebInspector.SettingsScreen.prototype._createSettingsTabView.appendSection):
     18        (WebInspector.SettingsScreen.prototype._createSettingsTabView):
     19        Extract GUI construction method.
     20        (WebInspector.SettingsScreen.prototype._getOrCreateTabbedPane):
     21        Make GUI construction lazy.
     22        (WebInspector.SettingsScreen.prototype.selectTab):
     23        Add method for external tab swithching.
     24        (WebInspector.SettingsScreen.prototype.wasShown):
     25        Make GUI construction lazy.
     26        (WebInspector.SettingsScreenTabbedPane):
     27        Extend class to access protected member.
     28        (WebInspector.SettingsController.prototype._buttonClicked):
     29        Change "showSettingsScreen" visibility and parameters.
     30        (WebInspector.SettingsController.prototype._onHideSettingsScreen):
     31        Preserve settings screen state.
     32        (WebInspector.SettingsController.prototype.showSettingsScreen):
     33        Change method visibility and parameters.
     34        * inspector/front-end/ShortcutsScreen.js:
     35        (WebInspector.ShortcutsScreen): Remove inheritance from HelpScreen.
     36        (WebInspector.ShortcutsScreen.prototype._createShortcutsTabView):
     37        Refactoring of GUI construction.
     38        (WebInspector.ShortcutsSection.prototype.renderSection):
     39        Ditto.
     40        * inspector/front-end/helpScreen.css:
     41        (.help-window-main ::-webkit-scrollbar): Rebind scrollbar settings.
     42        (.help-window-main ::-webkit-resizer): Ditto.
     43        (.help-window-main ::-webkit-scrollbar-thumb:vertical): Ditto.
     44        (.help-window-main ::-webkit-scrollbar-thumb:vertical:active): Ditto.
     45        (.help-window-main ::-webkit-scrollbar-track:vertical): Ditto.
     46        (body:not(.compact) #settings-screen .tabbed-pane): Fix container height.
     47        (#settings-screen .tabbed-pane-header): Ditto.
     48        (#settings-screen .tabbed-pane-header-tabs): Adjust spacing.
     49        (#settings-screen .tabbed-pane-header-tab): Adjust style.
     50        (#settings-screen .help-close-button): Adjust spacing.
     51        (#settings-screen .tabbed-pane-header-tab.selected):
     52        Erase line below active tab.
     53        (#settings-screen .tabbed-pane-content): Adjust spacing.
     54        (#settings-screen .help-content): Ditto.
     55        * inspector/front-end/inspector.js:
     56        (WebInspector.documentKeyDown): Use Settings screen to show shortcuts.
     57
    1582012-05-29  Ilya Tikhonovsky  <loislo@chromium.org>
    259

  • trunk/Source/WebCore/inspector/front-end/HelpScreen.js

    r117233 r118747  
    3131/**
    3232 * @constructor
     33 * @param {string=} title
    3334 * @extends {WebInspector.View}
    3435 */
    … …  
    4344    this.element.addEventListener("focus", this._onBlur.bind(this), false);
    4445
    45     var mainWindow = this.element.createChild("div", "help-window-main");
    46     var captionWindow = mainWindow.createChild("div", "help-window-caption");
    47     var closeButton = captionWindow.createChild("button", "help-close-button");
    48     this.contentElement = mainWindow.createChild("div", "help-content");
    49     captionWindow.createChild("h1", "help-window-title").textContent = title;
    50 
    51     closeButton.textContent = "\u2716"; // Code stands for HEAVY MULTIPLICATION X.
    52     closeButton.addEventListener("click", this.hide.bind(this), false);
     46    if (title) {
     47        var mainWindow = this.element.createChild("div", "help-window-main");
     48        var captionWindow = mainWindow.createChild("div", "help-window-caption");
     49        captionWindow.appendChild(this._createCloseButton());
     50        this.contentElement = mainWindow.createChild("div", "help-content");
     51        captionWindow.createChild("h1", "help-window-title").textContent = title;
     52    }
    5353}
    5454
    … …  
    5959
    6060WebInspector.HelpScreen.prototype = {
     61    _createCloseButton: function()
     62    {
     63        var closeButton = document.createElement("button");
     64        closeButton.className = "help-close-button";
     65        closeButton.textContent = "\u2716"; // Code stands for HEAVY MULTIPLICATION X.
     66        closeButton.addEventListener("click", this.hide.bind(this), false);
     67        return closeButton;
     68    },
     69
    6170    showModal: function()
    6271    {

  • trunk/Source/WebCore/inspector/front-end/SettingsScreen.js

    r117233 r118747  
    3636WebInspector.SettingsScreen = function(onHide)
    3737{
    38     WebInspector.HelpScreen.call(this, WebInspector.UIString("Settings"));
    39     this.contentElement.id = "settings";
     38    WebInspector.HelpScreen.call(this);
     39    this.element.id = "settings-screen";
    4040
    4141    /** @type {!function()} */
    4242    this._onHide = onHide;
    43 
    44     var container = document.createElement("div");
    45     container.className = "help-container";
    46 
    47     /**
    48      *  @param {string} name
    49      *  @return {!Element}
    50      */
    51     function appendSection(name) {
    52         var block = container.createChild("div", "help-block");
    53         block.createChild("div", "help-section-title").textContent = name;
    54         return block;
    55     }
    56 
    57     var p = appendSection(WebInspector.UIString("General"));
    58     if (Preferences.showDockToRight)
    59         p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Dock to right"), WebInspector.settings.dockToRight));
    60     if (Preferences.exposeDisableCache)
    61         p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Disable cache"), WebInspector.settings.cacheDisabled));
    62     var disableJSElement = this._createCheckboxSetting(WebInspector.UIString("Disable JavaScript"), WebInspector.settings.javaScriptDisabled);
    63     p.appendChild(disableJSElement);
    64     WebInspector.settings.javaScriptDisabled.addChangeListener(this._javaScriptDisabledChanged, this);
    65     this._disableJSCheckbox = disableJSElement.getElementsByTagName("input")[0];
    66     this._updateScriptDisabledCheckbox();
    67    
    68     p = appendSection(WebInspector.UIString("Rendering"));
    69     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show paint rectangles"), WebInspector.settings.showPaintRects));
    70     WebInspector.settings.showPaintRects.addChangeListener(this._showPaintRectsChanged, this);
    71 
    72     p = appendSection(WebInspector.UIString("Elements"));
    73     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Word wrap"), WebInspector.settings.domWordWrap));
    74 
    75     p = appendSection(WebInspector.UIString("Styles"));
    76     p.appendChild(this._createRadioSetting(WebInspector.UIString("Color format"), [
    77         [ WebInspector.StylesSidebarPane.ColorFormat.Original, WebInspector.UIString("As authored") ],
    78         [ WebInspector.StylesSidebarPane.ColorFormat.HEX, "HEX: #DAC0DE" ],
    79         [ WebInspector.StylesSidebarPane.ColorFormat.RGB, "RGB: rgb(128, 255, 255)" ],
    80         [ WebInspector.StylesSidebarPane.ColorFormat.HSL, "HSL: hsl(300, 80%, 90%)" ] ], WebInspector.settings.colorFormat));
    81     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show user agent styles"), WebInspector.settings.showUserAgentStyles));
    82 
    83     p = appendSection(WebInspector.UIString("Text editor"));
    84     p.appendChild(this._createSelectSetting(WebInspector.UIString("Indent"), [
    85             [ WebInspector.UIString("2 spaces"), WebInspector.TextEditorModel.Indent.TwoSpaces ],
    86             [ WebInspector.UIString("4 spaces"), WebInspector.TextEditorModel.Indent.FourSpaces ],
    87             [ WebInspector.UIString("8 spaces"), WebInspector.TextEditorModel.Indent.EightSpaces ],
    88             [ WebInspector.UIString("Tab character"), WebInspector.TextEditorModel.Indent.TabCharacter ]
    89         ], WebInspector.settings.textEditorIndent));
    90 
    91     p = appendSection(WebInspector.UIString("User Agent"));
    92     p.appendChild(this._createUserAgentControl());
    93     if (Capabilities.canOverrideDeviceMetrics)
    94         p.appendChild(this._createDeviceMetricsControl());
    95     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Emulate touch events"), WebInspector.settings.emulateTouchEvents));
    96 
    97     p = appendSection(WebInspector.UIString("Scripts"));
    98     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show script folders"), WebInspector.settings.showScriptFolders));
    99     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Search in content scripts"), WebInspector.settings.searchInContentScripts));
    100     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Enable source maps"), WebInspector.settings.sourceMapsEnabled));
    101 
    102     p = appendSection(WebInspector.UIString("Profiler"));
    103     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show objects' hidden properties"), WebInspector.settings.showHeapSnapshotObjectsHiddenProperties));
    104 
    105     p = appendSection(WebInspector.UIString("Console"));
    106     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Log XMLHttpRequests"), WebInspector.settings.monitoringXHREnabled));
    107     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Preserve log upon navigation"), WebInspector.settings.preserveConsoleLog));
    108 
    109     if (WebInspector.extensionServer.hasExtensions()) {
    110         var handlerSelector = new WebInspector.HandlerSelector(WebInspector.openAnchorLocationRegistry);
    111         p = appendSection(WebInspector.UIString("Extensions"));
    112         p.appendChild(this._createCustomSetting(WebInspector.UIString("Open links in"), handlerSelector.element));
    113     }
    114 
    115     var experiments = WebInspector.experimentsSettings.experiments;
    116     if (WebInspector.experimentsSettings.experimentsEnabled && experiments.length) {
    117         var experimentsSection = appendSection(WebInspector.UIString("Experiments"));
    118         experimentsSection.appendChild(this._createExperimentsWarningSubsection());
    119         for (var i = 0; i < experiments.length; ++i)
    120             experimentsSection.appendChild(this._createExperimentCheckbox(experiments[i]));
    121     }
    122 
    123     this.contentElement.appendChild(container);
    12443}
    12544
    12645WebInspector.SettingsScreen.prototype = {
     46
     47    /**
     48     * @return {!WebInspector.View}
     49     */
     50    _createSettingsTabView: function()
     51    {
     52        var view = new WebInspector.View();
     53
     54        var container = view.element;
     55        container.id = "settings";
     56        container.className = "help-content help-container";
     57
     58        /**
     59         *  @param {string} name
     60         *  @return {!Element}
     61         */
     62        function appendSection(name)
     63        {
     64            var block = container.createChild("div", "help-block");
     65            block.createChild("div", "help-section-title").textContent = name;
     66            return block;
     67        }
     68
     69        var p = appendSection(WebInspector.UIString("General"));
     70        if (Preferences.showDockToRight)
     71            p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Dock to right"), WebInspector.settings.dockToRight));
     72        if (Preferences.exposeDisableCache)
     73            p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Disable cache"), WebInspector.settings.cacheDisabled));
     74        var disableJSElement = this._createCheckboxSetting(WebInspector.UIString("Disable JavaScript"), WebInspector.settings.javaScriptDisabled);
     75        p.appendChild(disableJSElement);
     76        WebInspector.settings.javaScriptDisabled.addChangeListener(this._javaScriptDisabledChanged, this);
     77        this._disableJSCheckbox = disableJSElement.getElementsByTagName("input")[0];
     78        this._updateScriptDisabledCheckbox();
     79       
     80        p = appendSection(WebInspector.UIString("Rendering"));
     81        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show paint rectangles"), WebInspector.settings.showPaintRects));
     82        WebInspector.settings.showPaintRects.addChangeListener(this._showPaintRectsChanged, this);
     83
     84        p = appendSection(WebInspector.UIString("Elements"));
     85        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Word wrap"), WebInspector.settings.domWordWrap));
     86
     87        p = appendSection(WebInspector.UIString("Styles"));
     88        p.appendChild(this._createRadioSetting(WebInspector.UIString("Color format"), [
     89            [ WebInspector.StylesSidebarPane.ColorFormat.Original, WebInspector.UIString("As authored") ],
     90            [ WebInspector.StylesSidebarPane.ColorFormat.HEX, "HEX: #DAC0DE" ],
     91            [ WebInspector.StylesSidebarPane.ColorFormat.RGB, "RGB: rgb(128, 255, 255)" ],
     92            [ WebInspector.StylesSidebarPane.ColorFormat.HSL, "HSL: hsl(300, 80%, 90%)" ] ], WebInspector.settings.colorFormat));
     93        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show user agent styles"), WebInspector.settings.showUserAgentStyles));
     94
     95        p = appendSection(WebInspector.UIString("Text editor"));
     96        p.appendChild(this._createSelectSetting(WebInspector.UIString("Indent"), [
     97                [ WebInspector.UIString("2 spaces"), WebInspector.TextEditorModel.Indent.TwoSpaces ],
     98                [ WebInspector.UIString("4 spaces"), WebInspector.TextEditorModel.Indent.FourSpaces ],
     99                [ WebInspector.UIString("8 spaces"), WebInspector.TextEditorModel.Indent.EightSpaces ],
     100                [ WebInspector.UIString("Tab character"), WebInspector.TextEditorModel.Indent.TabCharacter ]
     101            ], WebInspector.settings.textEditorIndent));
     102
     103        p = appendSection(WebInspector.UIString("User Agent"));
     104        p.appendChild(this._createUserAgentControl());
     105        if (Capabilities.canOverrideDeviceMetrics)
     106            p.appendChild(this._createDeviceMetricsControl());
     107        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Emulate touch events"), WebInspector.settings.emulateTouchEvents));
     108
     109        p = appendSection(WebInspector.UIString("Scripts"));
     110        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show script folders"), WebInspector.settings.showScriptFolders));
     111        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Search in content scripts"), WebInspector.settings.searchInContentScripts));
     112        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Enable source maps"), WebInspector.settings.sourceMapsEnabled));
     113
     114        p = appendSection(WebInspector.UIString("Profiler"));
     115        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show objects' hidden properties"), WebInspector.settings.showHeapSnapshotObjectsHiddenProperties));
     116
     117        p = appendSection(WebInspector.UIString("Console"));
     118        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Log XMLHttpRequests"), WebInspector.settings.monitoringXHREnabled));
     119        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Preserve log upon navigation"), WebInspector.settings.preserveConsoleLog));
     120
     121        if (WebInspector.extensionServer.hasExtensions()) {
     122            var handlerSelector = new WebInspector.HandlerSelector(WebInspector.openAnchorLocationRegistry);
     123            p = appendSection(WebInspector.UIString("Extensions"));
     124            p.appendChild(this._createCustomSetting(WebInspector.UIString("Open links in"), handlerSelector.element));
     125        }
     126
     127        var experiments = WebInspector.experimentsSettings.experiments;
     128        if (WebInspector.experimentsSettings.experimentsEnabled && experiments.length) {
     129            var experimentsSection = appendSection(WebInspector.UIString("Experiments"));
     130            experimentsSection.appendChild(this._createExperimentsWarningSubsection());
     131            for (var i = 0; i < experiments.length; ++i)
     132                experimentsSection.appendChild(this._createExperimentCheckbox(experiments[i]));
     133        }
     134
     135        return view;
     136    },
     137
     138    /**
     139     * return {!WebInspector.SettingsScreenTabbedPane}
     140     */
     141    _getOrCreateTabbedPane: function()
     142    {
     143        if (this._tabbedPane)
     144            return this._tabbedPane;
     145
     146        var tabbedPane = new WebInspector.SettingsScreenTabbedPane(this._createCloseButton());
     147        tabbedPane.appendTab(WebInspector.SettingsScreen.Tabs.Settings, WebInspector.UIString("Settings"), this._createSettingsTabView());
     148        tabbedPane.appendTab(WebInspector.SettingsScreen.Tabs.Shortcuts, WebInspector.UIString("Keyboard Shortcuts"), WebInspector.shortcutsScreen._createShortcutsTabView());
     149
     150        this._tabbedPane = tabbedPane;
     151        return tabbedPane;
     152    },
     153
     154    /**
     155     * @param {!string} tabId
     156     */
     157    selectTab: function(tabId)
     158    {
     159        this._getOrCreateTabbedPane().selectTab(tabId);
     160    },
     161
     162    /**
     163     * @override
     164     */
     165    wasShown: function()
     166    {
     167        this._getOrCreateTabbedPane().show(this.element);
     168        WebInspector.HelpScreen.prototype.wasShown.call(this);
     169    },
    127170
    128171    /**
    … …  
    593636WebInspector.SettingsScreen.prototype.__proto__ = WebInspector.HelpScreen.prototype;
    594637
     638WebInspector.SettingsScreen.Tabs = {
     639    Settings: "Settings",
     640    Shortcuts: "Shortcuts"
     641}
     642
     643/**
     644 * @constructor
     645 * @extends {WebInspector.TabbedPane}
     646 * @param {!Element} closeButton
     647 */
     648WebInspector.SettingsScreenTabbedPane = function(closeButton)
     649{
     650    WebInspector.TabbedPane.call(this);
     651    this.element.addStyleClass("help-window-main");
     652
     653    this._headerContentsElement.insertBefore(closeButton, this._headerContentsElement.firstChild);
     654}
     655
     656WebInspector.SettingsScreenTabbedPane.prototype.__proto__ = WebInspector.TabbedPane.prototype;
     657
    595658/**
    596659 * @constructor
    … …  
    617680            this._hideSettingsScreen();
    618681        else
    619             this._showSettingsScreen();
     682            this.showSettingsScreen();
    620683    },
    621684
    … …  
    623686    {
    624687        this._statusBarButton.toggled = false;
    625         delete this._settingsScreen;
    626     },
    627 
    628     _showSettingsScreen: function()
     688    },
     689
     690    /**
     691     * @param {tabId=}
     692     */
     693    showSettingsScreen: function(tabId)
    629694    {
    630695        if (!this._settingsScreen)
    631696            this._settingsScreen = new WebInspector.SettingsScreen(this._onHideSettingsScreen.bind(this));
     697
     698        if (tabId)
     699            this._settingsScreen.selectTab(tabId);
    632700
    633701        this._settingsScreen.showModal();

  • trunk/Source/WebCore/inspector/front-end/ShortcutsScreen.js

    r117233 r118747  
    3131/**
    3232 * @constructor
    33  * @extends {WebInspector.HelpScreen}
    3433 */
    3534WebInspector.ShortcutsScreen = function()
    3635{
    37     WebInspector.HelpScreen.call(this, WebInspector.UIString("Keyboard Shortcuts"));
    3836    this._sections = {};
    39     this._tableReady = false;
    4037}
    4138
    … …  
    4946    },
    5047
    51     /**
    52      * @override
    53      */
    54     wasShown: function()
     48    _createShortcutsTabView: function()
    5549    {
    56         this._buildTable(this.contentElement);
    57         WebInspector.HelpScreen.prototype.wasShown.call(this);
    58     },
    59 
    60     /**
    61      * @param parent{Node}
    62      */
    63     _buildTable: function(parent)
    64     {
    65         if (this._tableReady)
    66             return;
    67         this._tableReady = true;
    68 
    6950        var orderedSections = [];
    7051        for (var section in this._sections)
    … …  
    7657        orderedSections.sort(compareSections);
    7758
    78         var container = document.createElement("div");
    79         container.className = "help-container";
     59        var view = new WebInspector.View();
     60
     61        var container = view.element;
     62        container.className = "help-content help-container";
    8063        for (var i = 0; i < orderedSections.length; ++i)
    8164            orderedSections[i].renderSection(container);
    82         parent.appendChild(container);
     65
     66        return view;
    8367    }
    8468}
    85 
    86 WebInspector.ShortcutsScreen.prototype.__proto__ = WebInspector.HelpScreen.prototype;
    8769
    8870/**
    … …  
    131113    {
    132114        var parent = container.createChild("div", "help-block");
    133         this._renderHeader(parent);
     115
     116        var headLine = parent.createChild("div", "help-line");
     117        headLine.createChild("div", "help-key-cell");
     118        headLine.createChild("div", "help-section-title help-cell").textContent = this.name;
    134119
    135120        for (var i = 0; i < this._lines.length; ++i) {
    … …  
    140125            line.createChild("div", "help-cell").textContent = this._lines[i].text;
    141126        }
    142     },
    143 
    144     _renderHeader: function(parent)
    145     {
    146         var line = parent.createChild("div", "help-line");
    147         line.createChild("div", "help-key-cell");
    148         line.createChild("div", "help-section-title help-cell").textContent = this.name;
    149127    },
    150128

  • trunk/Source/WebCore/inspector/front-end/helpScreen.css

    r117233 r118747  
    5252}
    5353
    54 .help-content::-webkit-scrollbar {
     54.help-window-main ::-webkit-scrollbar {
    5555    width: 11px;
    5656}
    5757
    58 .help-content::-webkit-scrollbar-corner,
    59 .help-content::-webkit-resizer {
     58.help-window-main ::-webkit-scrollbar-corner,
     59.help-window-main ::-webkit-resizer {
    6060    display: none;
    6161}
    6262
    63 .help-content::-webkit-scrollbar-thumb:vertical {
     63.help-window-main ::-webkit-scrollbar-thumb:vertical {
    6464    background: -webkit-gradient(linear, left top, right top, from(rgb(128, 128, 128)), to(rgb(128, 128, 128)), color-stop(40%, rgb(96, 96, 96)));
    6565    border-radius: 5px;
    … …  
    6767}
    6868
    69 .help-content::-webkit-scrollbar-thumb:vertical:hover,
    70 .help-content::-webkit-scrollbar-thumb:vertical:active {
     69.help-window-main ::-webkit-scrollbar-thumb:vertical:hover,
     70.help-window-main ::-webkit-scrollbar-thumb:vertical:active {
    7171    background: -webkit-gradient(linear, left top, right top, from(rgb(176, 176, 176)), to(rgb(176, 176, 176)), color-stop(40%, rgb(144, 144, 144)));
    7272}
    7373
    74 .help-content::-webkit-scrollbar-track:vertical {
     74.help-window-main ::-webkit-scrollbar-track:vertical {
    7575    background: -webkit-gradient(linear, left top, right top, from(rgb(10, 10, 10)), to(rgb(32, 32, 32)), color-stop(25%, rgb(32, 32, 32)));
    7676    border-radius: 5px;
    … …  
    119119}
    120120
    121 #settings .help-container {
     121#settings.help-container {
    122122    -webkit-column-width: 240px;
    123123}
    … …  
    227227    color: white;
    228228}
     229
     230body:not(.compact) #settings-screen .tabbed-pane {
     231    height: auto;
     232}
     233
     234#settings-screen .tabbed-pane-header {
     235    height: auto;
     236}
     237
     238#settings-screen .tabbed-pane-header-tabs {
     239    padding-top: 9px;
     240}
     241
     242#settings-screen .tabbed-pane-header-tab {
     243    background-color: transparent;
     244    position: relative;
     245    top: 1px;
     246    text-shadow: none;
     247    color: rgb(255, 255, 255);
     248    height: 19px;
     249    font-size: 13px;
     250    padding: 0 4px;
     251    margin: 0;
     252}
     253
     254#settings-screen .help-close-button {
     255    margin: 6px 0;
     256}
     257
     258#settings-screen .tabbed-pane-header-tab.selected {
     259    border-bottom: solid 1px rgb(51, 51, 51);
     260    border-bottom-right-radius: 2px;
     261}
     262
     263#settings-screen .tabbed-pane-content {
     264    margin: 8px;
     265    padding: 0 4px;
     266}
     267
     268#settings-screen .help-content {
     269    margin: 0;
     270    padding: 0;
     271}

  • trunk/Source/WebCore/inspector/front-end/inspector.js

    r117999 r118747  
    707707    if (event.keyIdentifier === "F1" ||
    708708        (event.keyIdentifier === helpKey && event.shiftKey && (!WebInspector.isBeingEdited(event.target) || event.metaKey))) {
    709         WebInspector.shortcutsScreen.showModal();
     709        this.settingsController.showSettingsScreen(WebInspector.SettingsScreen.Tabs.Shortcuts);
    710710        event.consume(true);
    711711        return;
Note: See TracChangeset for help on using the changeset viewer.