Changeset 183468 in webkit


Ignore:
Timestamp:
Apr 28, 2015, 6:04:38 AM (11 years ago)
Author:
timothy@apple.com
Message:

Web Inspector: Add new tab button to make it easy to bring a closed tab back
​https://bugs.webkit.org/show_bug.cgi?id=144297

Reviewed by Joseph Pecoraro.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Base/Main.js:

(WebInspector.contentLoaded):
(WebInspector.isTabTypeAllowed):
(WebInspector._tabContentViewForType):
(WebInspector._rememberOpenTabs):
(WebInspector._updateNewTabButtonState):
(WebInspector._newTabItemClicked):
(WebInspector.isNewTabWithTypeAllowed):
(WebInspector.createNewTab):
(WebInspector.activateExtraDomains):
(WebInspector._restoreCookieForOpenTabs):
(WebInspector._saveCookieForOpenTabs):
(WebInspector._isTabTypeAllowed): Deleted.

  • UserInterface/Images/NewTab.svg: Added.
  • UserInterface/Images/NewTabPlus.svg:
  • UserInterface/Main.html:
  • UserInterface/Views/NewTabContentView.css: Added.

(.new-tab.tab.content-view):
(.new-tab.tab.content-view > .tab-item):
(.new-tab.tab.content-view > .tab-item.disabled):
(.new-tab.tab.content-view > .tab-item > .box):
(.new-tab.tab.content-view > .tab-item:not(.disabled):active > .box):
(.new-tab.tab.content-view > .tab-item > .box > img):
(.new-tab.tab.content-view > .tab-item > label):

  • UserInterface/Views/NewTabContentView.js: Added.

(WebInspector.NewTabContentView):
(WebInspector.NewTabContentView.prototype.get type):
(WebInspector.NewTabContentView.prototype._createNewTab):

  • UserInterface/Views/TabBar.css:

(.tab-bar > .item:not(.disabled).selected):
(.tab-bar > .item.new-tab-button:not(.disabled):hover):
(.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover + .item):
(.tab-bar > .item.disabled > .icon):
(.tab-bar > .item.new-tab-button:not(.disabled):hover > .icon):
(.tab-bar > .item.selected): Deleted.
(.tab-bar > .item.new-tab-button:hover): Deleted.
(.tab-bar:not(.animating) > .item:not(.selected):hover + .item): Deleted.
(.tab-bar > .item.new-tab-button:hover > .icon): Deleted.

  • UserInterface/Views/TabBar.js:

(WebInspector.TabBar.prototype.set selectedTabBarItem):
(WebInspector.TabBar.prototype._handleMouseDown):

  • UserInterface/Views/TabBarItem.js:

(WebInspector.TabBarItem.prototype.get disabled):
(WebInspector.TabBarItem.prototype.set disabled):

  • UserInterface/Views/TabBrowser.js:

(WebInspector.TabBrowser):
(WebInspector.TabBrowser.prototype.addTabForContentView):
(WebInspector.TabBrowser.prototype.showTabForContentView):
(WebInspector.TabBrowser.prototype.closeTabForContentView):

Location:
trunk/Source/WebInspectorUI
Files:
3 added
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r183455 r183468  
     12015-04-27  Timothy Hatcher  <timothy@apple.com>
     2
     3        Web Inspector: Add new tab button to make it easy to bring a closed tab back
     4        https://bugs.webkit.org/show_bug.cgi?id=144297
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * Localizations/en.lproj/localizedStrings.js:
     9        * UserInterface/Base/Main.js:
     10        (WebInspector.contentLoaded):
     11        (WebInspector.isTabTypeAllowed):
     12        (WebInspector._tabContentViewForType):
     13        (WebInspector._rememberOpenTabs):
     14        (WebInspector._updateNewTabButtonState):
     15        (WebInspector._newTabItemClicked):
     16        (WebInspector.isNewTabWithTypeAllowed):
     17        (WebInspector.createNewTab):
     18        (WebInspector.activateExtraDomains):
     19        (WebInspector._restoreCookieForOpenTabs):
     20        (WebInspector._saveCookieForOpenTabs):
     21        (WebInspector._isTabTypeAllowed): Deleted.
     22        * UserInterface/Images/NewTab.svg: Added.
     23        * UserInterface/Images/NewTabPlus.svg:
     24        * UserInterface/Main.html:
     25        * UserInterface/Views/NewTabContentView.css: Added.
     26        (.new-tab.tab.content-view):
     27        (.new-tab.tab.content-view > .tab-item):
     28        (.new-tab.tab.content-view > .tab-item.disabled):
     29        (.new-tab.tab.content-view > .tab-item > .box):
     30        (.new-tab.tab.content-view > .tab-item:not(.disabled):active > .box):
     31        (.new-tab.tab.content-view > .tab-item > .box > img):
     32        (.new-tab.tab.content-view > .tab-item > label):
     33        * UserInterface/Views/NewTabContentView.js: Added.
     34        (WebInspector.NewTabContentView):
     35        (WebInspector.NewTabContentView.prototype.get type):
     36        (WebInspector.NewTabContentView.prototype._createNewTab):
     37        * UserInterface/Views/TabBar.css:
     38        (.tab-bar > .item:not(.disabled).selected):
     39        (.tab-bar > .item.new-tab-button:not(.disabled):hover):
     40        (.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover + .item):
     41        (.tab-bar > .item.disabled > .icon):
     42        (.tab-bar > .item.new-tab-button:not(.disabled):hover > .icon):
     43        (.tab-bar > .item.selected): Deleted.
     44        (.tab-bar > .item.new-tab-button:hover): Deleted.
     45        (.tab-bar:not(.animating) > .item:not(.selected):hover + .item): Deleted.
     46        (.tab-bar > .item.new-tab-button:hover > .icon): Deleted.
     47        * UserInterface/Views/TabBar.js:
     48        (WebInspector.TabBar.prototype.set selectedTabBarItem):
     49        (WebInspector.TabBar.prototype._handleMouseDown):
     50        * UserInterface/Views/TabBarItem.js:
     51        (WebInspector.TabBarItem.prototype.get disabled):
     52        (WebInspector.TabBarItem.prototype.set disabled):
     53        * UserInterface/Views/TabBrowser.js:
     54        (WebInspector.TabBrowser):
     55        (WebInspector.TabBrowser.prototype.addTabForContentView):
     56        (WebInspector.TabBrowser.prototype.showTabForContentView):
     57        (WebInspector.TabBrowser.prototype.closeTabForContentView):
     58
    1592015-04-27  Joseph Pecoraro  <pecoraro@apple.com>
    260

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r183342 r183468  
    315315localizedStrings["Network Requests"] = "Network Requests";
    316316localizedStrings["New Rule"] = "New Rule";
     317localizedStrings["New Tab"] = "New Tab";
    317318localizedStrings["No"] = "No";
    318319localizedStrings["No Accessibility Information"] = "No Accessibility Information";

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

    r183341 r183468  
    198198
    199199    this.tabBar = new WebInspector.TabBar(document.getElementById("tab-bar"));
     200    this.tabBar.addEventListener(WebInspector.TabBar.Event.NewTabItemClicked, this._newTabItemClicked, this);
    200201
    201202    var contentElement = document.getElementById("content");
    … …  
    228229    this.tabBrowser = new WebInspector.TabBrowser(document.getElementById("tab-browser"), this.tabBar, this.navigationSidebar, this.detailsSidebar);
    229230    this.tabBrowser.addEventListener(WebInspector.TabBrowser.Event.SelectedTabContentViewDidChange, this._tabBrowserSelectedTabContentViewDidChange, this);
     231
     232    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._updateNewTabButtonState, this);
     233    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._updateNewTabButtonState, this);
    230234
    231235    this._reloadPageKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "R", this._reloadPage.bind(this));
    … …  
    330334
    331335    for (var tabType of this._openTabsSetting.value) {
    332         if (!this._isTabTypeAllowed(tabType)) {
     336        if (!this.isTabTypeAllowed(tabType)) {
    333337            this._pendingOpenTabTypes.push(tabType);
    334338            continue;
    … …  
    370374};
    371375
    372 WebInspector._isTabTypeAllowed = function(tabType)
     376WebInspector.isTabTypeAllowed = function(tabType)
    373377{
    374378    switch (tabType) {
    … …  
    397401    case WebInspector.SearchTabContentView.Type:
    398402        return new WebInspector.SearchTabContentView;
     403    case WebInspector.NewTabTabContentView.Type:
     404        return new WebInspector.NewTabTabContentView;
    399405    default:
    400406        console.error("Unknown tab type", tabType);
    … …  
    410416    for (var tabBarItem of this.tabBar.tabBarItems) {
    411417        var tabContentView = tabBarItem.representedObject;
    412         if (tabContentView instanceof WebInspector.SettingsTabContentView)
     418        if (!(tabContentView instanceof WebInspector.TabContentView))
     419            continue;
     420        if (tabContentView instanceof WebInspector.SettingsTabContentView || tabContentView instanceof WebInspector.NewTabContentView)
    413421            continue;
    414422        console.assert(tabContentView.type, "Tab type can't be null, undefined, or empty string", tabContentView.type, tabContentView);
    … …  
    417425
    418426    this._openTabsSetting.value = openTabs;
     427};
     428
     429WebInspector._updateNewTabButtonState = function(event)
     430{
     431    var newTabAllowed = this.isNewTabWithTypeAllowed(WebInspector.ConsoleTabContentView.Type) || this.isNewTabWithTypeAllowed(WebInspector.ElementsTabContentView.Type);
     432    this.tabBar.newTabItem.disabled = !newTabAllowed;
     433};
     434
     435WebInspector._newTabItemClicked = function(event)
     436{
     437    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.NewTabContentView);
     438    if (!tabContentView)
     439        tabContentView = new WebInspector.NewTabContentView;
     440    this.tabBrowser.showTabForContentView(tabContentView);
     441};
     442
     443WebInspector.isNewTabWithTypeAllowed = function(tabType)
     444{
     445    if (!this.isTabTypeAllowed(tabType))
     446        return false;
     447
     448    // Only allow one tab per class for now.
     449    for (var tabBarItem of this.tabBar.tabBarItems) {
     450        var tabContentView = tabBarItem.representedObject;
     451        if (!(tabContentView instanceof WebInspector.TabContentView))
     452            continue;
     453        if (tabContentView.type === tabType)
     454            return false;
     455    }
     456
     457    return true;
     458};
     459
     460WebInspector.createNewTab = function(tabType, newTabContentViewToReplace)
     461{
     462    console.assert(this.isNewTabWithTypeAllowed(tabType));
     463
     464    var tabContentView = this._tabContentViewForType(tabType);
     465
     466    if (newTabContentViewToReplace) {
     467        var insertionIndex = this.tabBar.tabBarItems.indexOf(newTabContentViewToReplace.tabBarItem);
     468        this.tabBrowser.closeTabForContentView(newTabContentViewToReplace, true);
     469        this.tabBrowser.showTabForContentView(tabContentView, true, insertionIndex);
     470        return;
     471    }
     472
     473    this.tabBrowser.showTabForContentView(tabContentView);
    419474};
    420475
    … …  
    438493    var stillPendingOpenTabTypes = [];
    439494    for (var tabType of this._pendingOpenTabTypes) {
    440         if (!this._isTabTypeAllowed(tabType)) {
     495        if (!this.isTabTypeAllowed(tabType)) {
    441496            stillPendingOpenTabTypes.push(tabType);
    442497            continue;
    … …  
    10621117    for (var tabBarItem of this.tabBar.tabBarItems) {
    10631118        var tabContentView = tabBarItem.representedObject;
     1119        if (!(tabContentView instanceof WebInspector.TabContentView))
     1120            continue;
    10641121        tabContentView.restoreStateFromCookie(causedByReload);
    10651122    }
    … …  
    10701127    for (var tabBarItem of this.tabBar.tabBarItems) {
    10711128        var tabContentView = tabBarItem.representedObject;
     1129        if (!(tabContentView instanceof WebInspector.TabContentView))
     1130            continue;
    10721131        tabContentView.saveStateToCookie();
    10731132    }

  • trunk/Source/WebInspectorUI/UserInterface/Images/NewTabPlus.svg

    r183323 r183468  
    22<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
    33<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
    4     <path d="M 8 2 L 8 13 M 2.5 7.5 L 13.5 7.5" class="stroked" fill="none" stroke="black"/>
     4    <path d="M 8 2 L 8 14 M 2 8 L 14 8" class="stroked" fill="none" stroke="black"/>
    55</svg>

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r183339 r183468  
    102102    <link rel="stylesheet" href="Views/NetworkTimelineOverviewGraph.css">
    103103    <link rel="stylesheet" href="Views/NetworkTimelineView.css">
     104    <link rel="stylesheet" href="Views/NewTabContentView.css">
    104105    <link rel="stylesheet" href="Views/ObjectPreviewView.css">
    105106    <link rel="stylesheet" href="Views/ObjectTreeArrayIndexTreeElement.css">
    … …  
    338339    <script src="Views/FolderTreeElement.js"></script>
    339340    <script src="Views/FolderizedTreeElement.js"></script>
     341    <script src="Views/NewTabContentView.js"></script>
    340342    <script src="Views/ObjectTreeBaseTreeElement.js"></script>
    341343    <script src="Views/SourceCodeTreeElement.js"></script>

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

    r183322 r183468  
    107107}
    108108
    109 .tab-bar > .item.selected {
     109.tab-bar > .item:not(.disabled).selected {
    110110    border-top-color: rgb(190, 190, 190);
    111111    background-image: linear-gradient(to bottom, rgb(222, 222, 222), rgb(211, 211, 211));
    … …  
    113113}
    114114
    115 .tab-bar:not(.animating) > .item:not(.selected):hover,
    116 .tab-bar > .item.new-tab-button:hover {
     115.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover,
     116.tab-bar > .item.new-tab-button:not(.disabled):hover {
    117117    background-position: 0 100%;
    118118    border-top-color: rgb(152, 152, 152);
    … …  
    120120}
    121121
    122 .tab-bar:not(.animating) > .item:not(.selected):hover + .item {
     122.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover + .item {
    123123    border-left-color: rgb(152, 152, 152);
    124124}
    … …  
    202202}
    203203
    204 .tab-bar:not(.animating) > .item:not(.selected):hover > .icon,
    205 .tab-bar > .item.new-tab-button:hover > .icon {
     204.tab-bar > .item.disabled > .icon {
     205    opacity: 0.35;
     206}
     207
     208.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover > .icon,
     209.tab-bar > .item.new-tab-button:not(.disabled):hover > .icon {
    206210    opacity: 0.6;
    207211}

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

    r183322 r183468  
    352352    {
    353353        var tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
     354        if (tabBarItem === this._newTabItem)
     355            tabBarItem = this._tabBarItems[this._tabBarItems.length - 2];
    354356
    355357        if (this._selectedTabBarItem === tabBarItem)
    … …  
    499501
    500502        var tabBarItem = itemElement[WebInspector.TabBarItem.ElementReferenceSymbol];
    501         if (!tabBarItem || tabBarItem === this._newTabItem)
    502             return;
     503        if (!tabBarItem)
     504            return;
     505
     506        if (tabBarItem.disabled)
     507            return;
     508
     509        if (tabBarItem === this._newTabItem) {
     510            this.dispatchEventToListeners(WebInspector.TabBar.Event.NewTabItemClicked);
     511            return;
     512        }
    503513
    504514        var closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.CloseButtonStyleClassName);
    … …  
    669679    TabBarItemAdded: "tab-bar-tab-bar-item-added",
    670680    TabBarItemRemoved: "tab-bar-tab-bar-item-removed",
    671     TabBarItemsReordered: "tab-bar-tab-bar-items-reordered"
     681    TabBarItemsReordered: "tab-bar-tab-bar-items-reordered",
     682    NewTabItemClicked: "tab-bar-new-tab-item-clicked"
    672683};

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

    r183322 r183468  
    101101    }
    102102
     103    get disabled()
     104    {
     105        return this._element.classList.contains("disabled");
     106    }
     107
     108    set disabled(disabled)
     109    {
     110        this._element.classList.toggle("disabled", disabled);
     111    }
     112
    103113    get hideCloseButton()
    104114    {

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

    r183333 r183468  
    5151        this._element.appendChild(this._contentViewContainer.element);
    5252
    53         // FIXME: Support creating new tabs.
    54         // this._tabBar.newTabItem = new WebInspector.TabBarItem(platformImagePath("NewTabPlus.svg"), WebInspector.UIString("Create a new tab"), true);
     53        this._tabBar.newTabItem = new WebInspector.TabBarItem(platformImagePath("NewTabPlus.svg"), WebInspector.UIString("Create a new tab"), true);
    5554
    5655        this._tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemSelected, this._tabBarItemSelected, this);
    … …  
    117116    }
    118117
    119     addTabForContentView(tabContentView, doNotAnimate)
     118    addTabForContentView(tabContentView, doNotAnimate, insertionIndex)
    120119    {
    121120        console.assert(tabContentView instanceof WebInspector.TabContentView);
    … …  
    144143            this._recentTabContentViews.push(tabContentView);
    145144
    146         this._tabBar.addTabBarItem(tabBarItem, doNotAnimate);
     145        if (typeof insertionIndex === "number")
     146            this._tabBar.insertTabBarItem(tabBarItem, insertionIndex, doNotAnimate);
     147        else
     148            this._tabBar.addTabBarItem(tabBarItem, doNotAnimate);
    147149
    148150        console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
    … …  
    152154    }
    153155
    154     showTabForContentView(tabContentView, doNotAnimate)
    155     {
    156         if (!this.addTabForContentView(tabContentView, doNotAnimate))
     156    showTabForContentView(tabContentView, doNotAnimate, insertionIndex)
     157    {
     158        if (!this.addTabForContentView(tabContentView, doNotAnimate, insertionIndex))
    157159            return false;
    158160
    … …  
    172174            return false;
    173175
    174         if (tabBarItem.parentTabBar !== this._tabBar)
    175             return false;
    176 
    177         this._tabBar.removeTabBarItem(tabBarItem, doNotAnimate);
     176        if (tabContentView.tabBarItem.parentTabBar !== this._tabBar)
     177            return false;
     178
     179        this._tabBar.removeTabBarItem(tabContentView.tabBarItem, doNotAnimate);
    178180
    179181        console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
Note: See TracChangeset for help on using the changeset viewer.