Changeset 101160 in webkit


Ignore:
Timestamp:
Nov 25, 2011 2:33:14 AM (12 years ago)
Author:
vsevik@chromium.org
Message:

Web Inspector: Split scripts panel top status bar into debug toolbar and editor toolbar.
​https://bugs.webkit.org/show_bug.cgi?id=73087

Reviewed by Pavel Feldman.

  • inspector/front-end/ScriptsPanel.js:

(WebInspector.ScriptsPanel.prototype._reset):
(WebInspector.ScriptsPanel.prototype._createEditorToolbar):
(WebInspector.ScriptsPanel.prototype._createDebugToolbar):
(WebInspector.ScriptsPanel.prototype._createButtonAndRegisterShortcuts):

  • inspector/front-end/scriptsPanel.css:

(#scripts-debug-toolbar):
(#scripts-editor-toolbar):
(#scripts-debug-sidebar-resizer-widget):
(.script-view):

Location:
trunk/Source/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r101159 r101160  
     12011-11-25  Vsevolod Vlasov  <vsevik@chromium.org>
     2
     3        Web Inspector: Split scripts panel top status bar into debug toolbar and editor toolbar.
     4        https://bugs.webkit.org/show_bug.cgi?id=73087
     5
     6        Reviewed by Pavel Feldman.
     7
     8        * inspector/front-end/ScriptsPanel.js:
     9        (WebInspector.ScriptsPanel.prototype._reset):
     10        (WebInspector.ScriptsPanel.prototype._createEditorToolbar):
     11        (WebInspector.ScriptsPanel.prototype._createDebugToolbar):
     12        (WebInspector.ScriptsPanel.prototype._createButtonAndRegisterShortcuts):
     13        * inspector/front-end/scriptsPanel.css:
     14        (#scripts-debug-toolbar):
     15        (#scripts-editor-toolbar):
     16        (#scripts-debug-sidebar-resizer-widget):
     17        (.script-view):
     18
    1192011-11-25  Leo Yang  <leo.yang@torchmobile.com.cn>
    220

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

    r101129 r101160  
    4444    WebInspector.GoToLineDialog.install(this, viewGetter.bind(this));
    4545
    46     this.topStatusBar = document.createElement("div");
    47     this.topStatusBar.className = "status-bar";
    48     this.topStatusBar.id = "scripts-status-bar";
    49     this.element.appendChild(this.topStatusBar);
    50 
    51     this.backButton = document.createElement("button");
    52     this.backButton.className = "status-bar-item";
    53     this.backButton.id = "scripts-back";
    54     this.backButton.title = WebInspector.UIString("Show the previous script resource.");
    55     this.backButton.disabled = true;
    56     this.backButton.appendChild(document.createElement("img"));
    57     this.backButton.addEventListener("click", this._goBack.bind(this), false);
    58     this.topStatusBar.appendChild(this.backButton);
    59 
    60     this.forwardButton = document.createElement("button");
    61     this.forwardButton.className = "status-bar-item";
    62     this.forwardButton.id = "scripts-forward";
    63     this.forwardButton.title = WebInspector.UIString("Show the next script resource.");
    64     this.forwardButton.disabled = true;
    65     this.forwardButton.appendChild(document.createElement("img"));
    66     this.forwardButton.addEventListener("click", this._goForward.bind(this), false);
    67     this.topStatusBar.appendChild(this.forwardButton);
    68 
    69     this._filesSelectElement = document.createElement("select");
    70     this._filesSelectElement.className = "status-bar-item";
    71     this._filesSelectElement.id = "scripts-files";
    72     this._filesSelectElement.addEventListener("change", this._filesSelectChanged.bind(this, true), false);
    73     this._filesSelectElement.addEventListener("keyup", this._filesSelectChanged.bind(this, false), false);
    74     this.topStatusBar.appendChild(this._filesSelectElement);
    75 
    76     this.functionsSelectElement = document.createElement("select");
    77     this.functionsSelectElement.className = "status-bar-item";
    78     this.functionsSelectElement.id = "scripts-functions";
    79 
    80     // FIXME: append the functions select element to the top status bar when it is implemented.
    81     // this.topStatusBar.appendChild(this.functionsSelectElement);
    82 
    83     this._createSidebarButtons();
    84 
    85     this.toggleBreakpointsButton = new WebInspector.StatusBarButton(WebInspector.UIString("Deactivate all breakpoints."), "toggle-breakpoints");
    86     this.toggleBreakpointsButton.toggled = true;
    87     this.toggleBreakpointsButton.addEventListener("click", this._toggleBreakpointsClicked, this);
    88     this.sidebarButtonsElement.appendChild(this.toggleBreakpointsButton.element);
    89 
    90     this.debuggerStatusElement = document.createElement("div");
    91     this.debuggerStatusElement.id = "scripts-debugger-status";
    92     this.sidebarButtonsElement.appendChild(this.debuggerStatusElement);
     46    this.editorToolbar = this._createEditorToolbar();
     47    this.debugToolbar = this._createDebugToolbar();
    9348
    9449    const initialSidebarWidth = 225;
    … …  
    9954    this.splitView.minimalMainWidthPercent = minimalViewsContainerWidthPercent;
    10055
     56    this.splitView.sidebarElement.appendChild(this.debugToolbar);
     57    this.splitView.mainElement.appendChild(this.editorToolbar);
     58
    10159    this.viewsContainerElement = this.splitView.mainElement;
    10260
    103     this.sidebarResizeWidgetElement = document.createElement("div");
    104     this.sidebarResizeWidgetElement.id = "scripts-sidebar-resizer-widget";
    105     this.splitView.installResizer(this.sidebarResizeWidgetElement);
    106     this.topStatusBar.appendChild(this.sidebarResizeWidgetElement);
     61    this.debugSidebarResizeWidgetElement = document.createElement("div");
     62    this.debugSidebarResizeWidgetElement.id = "scripts-debug-sidebar-resizer-widget";
     63    this.splitView.installResizer(this.debugSidebarResizeWidgetElement);
     64    this.editorToolbar.appendChild(this.debugSidebarResizeWidgetElement);
    10765
    10866    this.sidebarPanes = {};
    … …  
    551509
    552510        this.functionsSelectElement.removeChildren();
    553         this.viewsContainerElement.removeChildren();
     511        this.visibleView = null;
    554512
    555513        this.sidebarPanes.jsBreakpoints.reset();
    … …  
    772730        if (sourceFrame && focusSource)
    773731            sourceFrame.focus();
    774     },
    775 
    776     sidebarResized: function(event)
    777     {
    778         var width = event.data;
    779 
    780         this.sidebarButtonsElement.style.width = width + "px";
    781         this.sidebarResizeWidgetElement.style.right = width + "px";
    782732    },
    783733
    … …  
    1004954    },
    1005955
    1006     _createSidebarButtons: function()
    1007     {
    1008         this.sidebarButtonsElement = document.createElement("div");
    1009         this.sidebarButtonsElement.id = "scripts-sidebar-buttons";
    1010         this.topStatusBar.appendChild(this.sidebarButtonsElement);
    1011 
     956    _createEditorToolbar: function()
     957    {
     958        var editorToolbar = document.createElement("div");
     959        editorToolbar.className = "status-bar";
     960        editorToolbar.id = "scripts-editor-toolbar";
     961
     962        this.backButton = document.createElement("button");
     963        this.backButton.className = "status-bar-item";
     964        this.backButton.id = "scripts-back";
     965        this.backButton.title = WebInspector.UIString("Show the previous script resource.");
     966        this.backButton.disabled = true;
     967        this.backButton.appendChild(document.createElement("img"));
     968        this.backButton.addEventListener("click", this._goBack.bind(this), false);
     969        editorToolbar.appendChild(this.backButton);
     970
     971        this.forwardButton = document.createElement("button");
     972        this.forwardButton.className = "status-bar-item";
     973        this.forwardButton.id = "scripts-forward";
     974        this.forwardButton.title = WebInspector.UIString("Show the next script resource.");
     975        this.forwardButton.disabled = true;
     976        this.forwardButton.appendChild(document.createElement("img"));
     977        this.forwardButton.addEventListener("click", this._goForward.bind(this), false);
     978        editorToolbar.appendChild(this.forwardButton);
     979
     980        this._filesSelectElement = document.createElement("select");
     981        this._filesSelectElement.className = "status-bar-item";
     982        this._filesSelectElement.id = "scripts-files";
     983        this._filesSelectElement.addEventListener("change", this._filesSelectChanged.bind(this, true), false);
     984        this._filesSelectElement.addEventListener("keyup", this._filesSelectChanged.bind(this, false), false);
     985        editorToolbar.appendChild(this._filesSelectElement);
     986
     987        this.functionsSelectElement = document.createElement("select");
     988        this.functionsSelectElement.className = "status-bar-item";
     989        this.functionsSelectElement.id = "scripts-functions";
     990
     991        // FIXME: append the functions select element to the top status bar when it
     992        // is implemented.
     993        // editorToolbar.appendChild(this.functionsSelectElement);
     994       
     995        return editorToolbar;
     996    },
     997
     998    _createDebugToolbar: function()
     999    {
     1000        var debugToolbar = document.createElement("div");
     1001        debugToolbar.className = "status-bar";
     1002        debugToolbar.id = "scripts-debug-toolbar";
     1003       
    10121004        var title, handler, shortcuts;
    10131005        var platformSpecificModifier = WebInspector.KeyboardShortcut.Modifiers.CtrlOrMeta;
    … …  
    10191011        shortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F8));
    10201012        shortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Slash, platformSpecificModifier));
    1021         this.pauseButton = this._createSidebarButtonAndRegisterShortcuts("scripts-pause", title, handler, shortcuts, WebInspector.UIString("Pause/Continue"));
     1013        this.pauseButton = this._createButtonAndRegisterShortcuts("scripts-pause", title, handler, shortcuts, WebInspector.UIString("Pause/Continue"));
     1014        debugToolbar.appendChild(this.pauseButton);
    10221015
    10231016        // Step over.
    … …  
    10271020        shortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F10));
    10281021        shortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.SingleQuote, platformSpecificModifier));
    1029         this.stepOverButton = this._createSidebarButtonAndRegisterShortcuts("scripts-step-over", title, handler, shortcuts, WebInspector.UIString("Step over"));
     1022        this.stepOverButton = this._createButtonAndRegisterShortcuts("scripts-step-over", title, handler, shortcuts, WebInspector.UIString("Step over"));
     1023        debugToolbar.appendChild(this.stepOverButton);
    10301024
    10311025        // Step into.
    … …  
    10351029        shortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F11));
    10361030        shortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Semicolon, platformSpecificModifier));
    1037         this.stepIntoButton = this._createSidebarButtonAndRegisterShortcuts("scripts-step-into", title, handler, shortcuts, WebInspector.UIString("Step into"));
     1031        this.stepIntoButton = this._createButtonAndRegisterShortcuts("scripts-step-into", title, handler, shortcuts, WebInspector.UIString("Step into"));
     1032        debugToolbar.appendChild(this.stepIntoButton);
    10381033
    10391034        // Step out.
    … …  
    10431038        shortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F11, WebInspector.KeyboardShortcut.Modifiers.Shift));
    10441039        shortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Semicolon, WebInspector.KeyboardShortcut.Modifiers.Shift | platformSpecificModifier));
    1045         this.stepOutButton = this._createSidebarButtonAndRegisterShortcuts("scripts-step-out", title, handler, shortcuts, WebInspector.UIString("Step out"));
    1046     },
    1047 
    1048     _createSidebarButtonAndRegisterShortcuts: function(buttonId, buttonTitle, handler, shortcuts, shortcutDescription)
     1040        this.stepOutButton = this._createButtonAndRegisterShortcuts("scripts-step-out", title, handler, shortcuts, WebInspector.UIString("Step out"));
     1041        debugToolbar.appendChild(this.stepOutButton);
     1042       
     1043        this.toggleBreakpointsButton = new WebInspector.StatusBarButton(WebInspector.UIString("Deactivate all breakpoints."), "toggle-breakpoints");
     1044        this.toggleBreakpointsButton.toggled = true;
     1045        this.toggleBreakpointsButton.addEventListener("click", this._toggleBreakpointsClicked, this);
     1046        debugToolbar.appendChild(this.toggleBreakpointsButton.element);
     1047
     1048        this.debuggerStatusElement = document.createElement("div");
     1049        this.debuggerStatusElement.id = "scripts-debugger-status";
     1050        debugToolbar.appendChild(this.debuggerStatusElement);
     1051       
     1052        return debugToolbar;
     1053    },
     1054
     1055    _createButtonAndRegisterShortcuts: function(buttonId, buttonTitle, handler, shortcuts, shortcutDescription)
    10491056    {
    10501057        var button = document.createElement("button");
    … …  
    10551062        button.appendChild(document.createElement("img"));
    10561063        button.addEventListener("click", handler, false);
    1057         this.sidebarButtonsElement.appendChild(button);
    10581064
    10591065        var shortcutNames = [];

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

    r100991 r101160  
    4848}
    4949
    50 #scripts-status-bar {
    51     position: absolute;
    52     top: -1px;
    53     left: 0;
    54     right: 0;
     50#scripts-debug-toolbar {
     51    position: relative;
     52    margin-top: -1px;
     53    height: 23px;
     54}
     55
     56#scripts-editor-toolbar {
     57    position: relative;
     58    margin-top: -1px;
    5559    height: 24px;
    5660}
    … …  
    117121}
    118122
    119 #scripts-sidebar-resizer-widget {
     123#scripts-debug-sidebar-resizer-widget {
    120124    position: absolute;
    121125    top: 0;
    122126    bottom: 0;
    123     right: 225px;
     127    right: 0;
    124128    width: 16px;
    125129    cursor: ew-resize;
    … …  
    129133}
    130134
    131 #scripts-sidebar-buttons {
    132     position: absolute;
    133     right: 0;
    134     top: 0;
    135     bottom: 0;
    136     width: 225px;
    137     overflow: hidden;
    138     border-left: 1px solid rgb(64%, 64%, 64%);
    139 }
    140 
    141135.script-view {
    142136    display: none;
    143137    overflow: hidden;
    144138    position: absolute;
    145     top: 0;
     139    top: 23px;
    146140    left: 0;
    147141    right: 0;
    … …  
    151145.script-view.visible {
    152146    display: block;
    153 }
    154 
    155 #scripts-split-view {
    156     top: 23px;
    157147}
    158148
Note: See TracChangeset for help on using the changeset viewer.