Changeset 183332 in webkit


Ignore:
Timestamp:
Apr 25, 2015, 6:21:38 PM (10 years ago)
Author:
timothy@apple.com
Message:

Web Inspector: Make Console work in a tab world
​https://bugs.webkit.org/show_bug.cgi?id=144112

Reviewed by Joseph Pecoraro.

  • UserInterface/Base/Main.js:

(WebInspector.contentLoaded):
(WebInspector.isShowingConsoleTab):
(WebInspector.UIString):
(WebInspector.toggleNavigationSidebar):
(WebInspector.toggleDetailsSidebar):
(WebInspector.tabContentViewClassForRepresentedObject):
(WebInspector.linkifyStringAsFragment):

  • UserInterface/Images/Console.svg: Added.
  • UserInterface/Protocol/InspectorFrontendAPI.js:

(InspectorFrontendAPI.showConsole):

  • UserInterface/Views/ConsoleTabContentView.js: Added.

(WebInspector.ConsoleTabContentView):
(WebInspector.ConsoleTabContentView.prototype.shown):
(WebInspector.ConsoleTabContentView.prototype.showRepresentedObject):
(WebInspector.ConsoleTabContentView.prototype.canShowRepresentedObject):
(WebInspector.ConsoleTabContentView.prototype.get supportsSplitContentBrowser):

  • UserInterface/Views/DefaultDashboardView.js:

(WebInspector.DefaultDashboardView.prototype._consoleItemWasClicked):

  • UserInterface/Views/LogContentView.js:

(WebInspector.LogContentView):
(WebInspector.LogContentView.prototype.get navigationItems):
(WebInspector.LogContentView.prototype.shown):
(WebInspector.LogContentView.prototype.didAppendConsoleMessageView):
(WebInspector.LogContentView.prototype._showConsoleTab):

  • UserInterface/Views/LogIcon.css:

(.log-icon .icon):

  • UserInterface/Views/Main.css:

(#split-content-browser .hierarchical-path-component.log-icon .icon):
(#split-content-browser .hierarchical-path-component.log-icon .title):
(#split-content-browser .hierarchical-path-component.log-icon select):

Location:
trunk/Source/WebInspectorUI
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r183331 r183332  
     12015-04-23  Timothy Hatcher  <timothy@apple.com>
     2
     3        Web Inspector: Make Console work in a tab world
     4        https://bugs.webkit.org/show_bug.cgi?id=144112
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Base/Main.js:
     9        (WebInspector.contentLoaded):
     10        (WebInspector.isShowingConsoleTab):
     11        (WebInspector.UIString):
     12        (WebInspector.toggleNavigationSidebar):
     13        (WebInspector.toggleDetailsSidebar):
     14        (WebInspector.tabContentViewClassForRepresentedObject):
     15        (WebInspector.linkifyStringAsFragment):
     16        * UserInterface/Images/Console.svg: Added.
     17        * UserInterface/Protocol/InspectorFrontendAPI.js:
     18        (InspectorFrontendAPI.showConsole):
     19        * UserInterface/Views/ConsoleTabContentView.js: Added.
     20        (WebInspector.ConsoleTabContentView):
     21        (WebInspector.ConsoleTabContentView.prototype.shown):
     22        (WebInspector.ConsoleTabContentView.prototype.showRepresentedObject):
     23        (WebInspector.ConsoleTabContentView.prototype.canShowRepresentedObject):
     24        (WebInspector.ConsoleTabContentView.prototype.get supportsSplitContentBrowser):
     25        * UserInterface/Views/DefaultDashboardView.js:
     26        (WebInspector.DefaultDashboardView.prototype._consoleItemWasClicked):
     27        * UserInterface/Views/LogContentView.js:
     28        (WebInspector.LogContentView):
     29        (WebInspector.LogContentView.prototype.get navigationItems):
     30        (WebInspector.LogContentView.prototype.shown):
     31        (WebInspector.LogContentView.prototype.didAppendConsoleMessageView):
     32        (WebInspector.LogContentView.prototype._showConsoleTab):
     33        * UserInterface/Views/LogIcon.css:
     34        (.log-icon .icon):
     35        * UserInterface/Views/Main.css:
     36        (#split-content-browser .hierarchical-path-component.log-icon .icon):
     37        (#split-content-browser .hierarchical-path-component.log-icon .title):
     38        (#split-content-browser .hierarchical-path-component.log-icon select):
     39
    1402015-04-23  Timothy Hatcher  <timothy@apple.com>
    241

  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r183331 r183332  
    228228    this._consoleRepresentedObject = new WebInspector.LogObject;
    229229    this._consoleTreeElement = new WebInspector.LogTreeElement(this._consoleRepresentedObject);
    230     this.consoleContentView = WebInspector.contentBrowser.contentViewForRepresentedObject(this._consoleRepresentedObject);
     230    this.consoleContentView = WebInspector.splitContentBrowser.contentViewForRepresentedObject(this._consoleRepresentedObject);
    231231    this.consoleLogViewController = this.consoleContentView.logViewController;
    232232
    … …  
    251251    this._reloadPageIgnoringCacheKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "R", this._reloadPageIgnoringCache.bind(this));
    252252
    253     this._consoleKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Option | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "C", this.toggleConsoleView.bind(this));
     253    this._consoleKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Option | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "C", this._showConsoleTab.bind(this));
    254254
    255255    this._inspectModeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "C", this._toggleInspectMode.bind(this));
    … …  
    428428{
    429429    // The console does not have a sidebar, so return a tree element here so something is shown.
    430     if (representedObject instanceof WebInspector.LogObject)
     430    if (representedObject === this._consoleRepresentedObject)
    431431        return this._consoleTreeElement;
    432 
    433     var sidebarPanel = this.sidebarPanelForRepresentedObject(representedObject);
    434     if (sidebarPanel)
    435         return sidebarPanel.treeElementForRepresentedObject(representedObject);
    436432    return null;
    437433};
    … …  
    576572};
    577573
    578 WebInspector.currentViewSupportsSplitContentBrowser = function()
    579 {
    580     var currentContentView = this.contentBrowser.currentContentView;
     574WebInspector.doesCurrentTabSupportSplitContentBrowser = function()
     575{
     576    var currentContentView = this.tabBrowser.selectedTabContentView;
    581577    return !currentContentView || currentContentView.supportsSplitContentBrowser;
    582578};
    … …  
    584580WebInspector.toggleSplitConsole = function()
    585581{
    586     if (!this.currentViewSupportsSplitContentBrowser()) {
    587         this.toggleConsoleView();
     582    if (!this.doesCurrentTabSupportSplitContentBrowser()) {
     583        this.showConsoleTab();
    588584        return;
    589585    }
    … …  
    597593WebInspector.showSplitConsole = function()
    598594{
    599     if (!this.currentViewSupportsSplitContentBrowser()) {
    600         this.showFullHeightConsole();
     595    if (!this.doesCurrentTabSupportSplitContentBrowser()) {
     596        this.showConsoleTab();
    601597        return;
    602598    }
    … …  
    607603
    608604    if (this.splitContentBrowser.currentContentView !== this.consoleContentView) {
    609         var wasShowingFullConsole = this.isShowingConsoleView();
    610 
    611         // Be sure to close any existing log view in the main content browser before showing it in the
     605        // Be sure to close the view in the tab content browser before showing it in the
    612606        // split content browser. We can only show a content view in one browser at a time.
    613         this.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.LogContentView);
     607        if (this.consoleContentView.parentContainer)
     608            this.consoleContentView.parentContainer.closeContentView(this.consoleContentView);
    614609        this.splitContentBrowser.showContentView(this.consoleContentView);
    615 
    616         if (wasShowingFullConsole && !this.contentBrowser.currentContentView)
    617             this.resourceSidebarPanel.showDefaultContentView();
    618610    } else {
    619611        // This causes the view to know it was shown and focus the prompt.
    620         this.splitContentBrowser.contentViewContainer.shown();
     612        this.splitContentBrowser.shown();
    621613    }
    622614
    … …  
    626618WebInspector.hideSplitConsole = function()
    627619{
     620    if (!this.isShowingSplitConsole())
     621        return;
     622
    628623    this.splitContentBrowser.element.classList.add("hidden");
    629624
    … …  
    631626
    632627    // This causes the view to know it was hidden.
    633     this.splitContentBrowser.contentViewContainer.hidden();
     628    this.splitContentBrowser.hidden();
    634629
    635630    this.quickConsole.consoleLogVisibilityChanged(false);
    636631};
    637632
    638 WebInspector.showFullHeightConsole = function(requestedScope)
    639 {
    640     this.splitContentBrowser.element.classList.add("hidden");
    641 
    642     this._showingSplitConsoleSetting.value = false;
     633WebInspector.showConsoleTab = function(requestedScope)
     634{
     635    this.hideSplitConsole();
    643636
    644637    var scope = requestedScope || WebInspector.LogContentView.Scopes.All;
    645638
    646639    // If the requested scope is already selected and the console is showing, then switch back to All.
    647     if (this.isShowingConsoleView() && this.consoleContentView.scopeBar.item(scope).selected)
     640    if (this.isShowingConsoleTab() && this.consoleContentView.scopeBar.item(scope).selected)
    648641        scope = WebInspector.LogContentView.Scopes.All;
    649642
    … …  
    651644        this.consoleContentView.scopeBar.item(scope).selected = true;
    652645
    653     if (!this.contentBrowser.currentContentView || this.contentBrowser.currentContentView !== this.consoleContentView) {
    654         // Be sure to close any existing log view in the split content browser before showing it in the
    655         // main content browser. We can only show a content view in one browser at a time.
    656         this.splitContentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.LogContentView);
    657         this.contentBrowser.showContentView(this.consoleContentView);
    658     }
    659 
    660     console.assert(this.isShowingConsoleView());
    661     console.assert(this._consoleToolbarButton.activated);
    662 
    663     this.quickConsole.consoleLogVisibilityChanged(true);
    664 };
    665 
    666 WebInspector.isShowingConsoleView = function()
    667 {
    668     return this.contentBrowser.currentContentView instanceof WebInspector.LogContentView;
    669 };
    670 
    671 WebInspector.showConsoleView = function(scope)
    672 {
    673     this.showFullHeightConsole(scope);
    674 };
    675 
    676 WebInspector.toggleConsoleView = function()
    677 {
    678     if (this.isShowingConsoleView()) {
    679         if (this.contentBrowser.canGoBack())
    680             this.contentBrowser.goBack();
    681         else
    682             this.resourceSidebarPanel.showDefaultContentView();
    683     } else
    684         this.showFullHeightConsole();
     646    this.showRepresentedObject(this._consoleRepresentedObject);
     647
     648    console.assert(this.isShowingConsoleTab());
     649};
     650
     651WebInspector.isShowingConsoleTab = function()
     652{
     653    return this.tabBrowser.selectedTabContentView instanceof WebInspector.ConsoleTabContentView;
    685654};
    686655
    … …  
    16621631};
    16631632
     1633WebInspector._showConsoleTab = function(event)
     1634{
     1635    this.showConsoleTab();
     1636};
     1637
    16641638WebInspector._focusedContentView = function()
    16651639{

  • trunk/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js

    r183331 r183332  
    6464    showConsole: function()
    6565    {
    66         WebInspector.showConsoleView();
     66        WebInspector.showConsoleTab();
    6767
    6868        WebInspector.quickConsole.prompt.focus();

  • trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js

    r183328 r183332  
    123123    _consoleItemWasClicked(scope)
    124124    {
    125         WebInspector.showConsoleView(scope);
     125        WebInspector.showConsoleTab(scope);
    126126    }
    127127

  • trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js

    r183326 r183332  
    8080    this._clearLogOnReloadSetting = new WebInspector.Setting("clear-log-on-reload", true);
    8181
    82     var toolTip = WebInspector.UIString("Show split console");
    83     var altToolTip = WebInspector.UIString("Show full-height console");
    84 
    85     this._toggleSplitNavigationItem = new WebInspector.ToggleButtonNavigationItem("split-toggle", toolTip, altToolTip, platformImagePath("SplitToggleDown.svg"), platformImagePath("SplitToggleUp.svg"), 16, 16);
    86     this._toggleSplitNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleSplit, this);
    87     this._toggleSplitNavigationItem.toggled = WebInspector.isShowingSplitConsole();
     82    var toolTip = WebInspector.UIString("Show console tab");
     83    this._showConsoleTabNavigationItem = new WebInspector.ButtonNavigationItem("show-tab", toolTip, platformImagePath("SplitToggleUp.svg"), 16, 16);
     84    this._showConsoleTabNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._showConsoleTab, this);
    8885
    8986    this.messagesElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
    … …  
    119116    get navigationItems()
    120117    {
    121         return [this._searchBar, this._scopeBar, this._clearLogNavigationItem, this._toggleSplitNavigationItem];
     118        var navigationItems = [this._searchBar, this._scopeBar, this._clearLogNavigationItem];
     119        if (WebInspector.isShowingSplitConsole())
     120            navigationItems.push(this._showConsoleTabNavigationItem);
     121        return navigationItems;
    122122    },
    123123
    … …  
    141141    shown: function()
    142142    {
    143         this._toggleSplitNavigationItem.toggled = WebInspector.isShowingSplitConsole();
    144 
    145143        this.prompt.focus();
    146144    },
    … …  
    205203            return;
    206204
    207         if (!WebInspector.isShowingConsoleView())
     205        if (!WebInspector.isShowingConsoleTab())
    208206            WebInspector.showSplitConsole();
    209207
    … …  
    640638    },
    641639
    642     _toggleSplit: function()
    643     {
    644         if (WebInspector.isShowingSplitConsole())
    645             WebInspector.showFullHeightConsole();
    646         else
    647             WebInspector.showSplitConsole();
     640    _showConsoleTab: function()
     641    {
     642        WebInspector.showConsoleTab();
    648643    },
    649644

  • trunk/Source/WebInspectorUI/UserInterface/Views/LogIcon.css

    r164543 r183332  
    2525
    2626.log-icon .icon {
    27     content: -webkit-image-set(url(../Images/Log.png) 1x, url(../Images/Log@2x.png) 2x);
     27    content: url(../Images/Console.svg);
    2828}

  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r182976 r183332  
    175175}
    176176
     177#split-content-browser .hierarchical-path-component.log-icon .icon {
     178    margin-left: 6px;
     179    margin-right: 6px;
     180    opacity: 0.7;
     181}
     182
     183#split-content-browser .hierarchical-path-component.log-icon .title {
     184    color: rgba(0, 0, 0, 0.75);
     185}
     186
     187#split-content-browser .hierarchical-path-component.log-icon select {
     188    display: none;
     189}
     190
    177191#details-sidebar {
    178192    width: 300px;
Note: See TracChangeset for help on using the changeset viewer.