Changeset 130288 in webkit


Ignore:
Timestamp:
Oct 3, 2012, 7:46:59 AM (13 years ago)
Author:
pfeldman@chromium.org
Message:

Web Inspector: remember the last dock option so that user could toggle between dock to bottom and right
​https://bugs.webkit.org/show_bug.cgi?id=98255

Reviewed by Vsevolod Vlasov.

  • Introduced DockController.js that covers the dock mechanics
  • Removed dock orientation from the settings
  • Storing the last dock option to present it as default
  • Simplified the multi-option status bar button
  • WebCore.gypi:
  • WebCore.vcproj/WebCore.vcproj:
  • inspector/compile-front-end.py:
  • inspector/front-end/DockController.js: Added.

(WebInspector.DockController):
(WebInspector.DockController.prototype.get element):
(WebInspector.DockController.prototype.setDocked.set if):
(WebInspector.DockController.prototype.setDocked):
(WebInspector.DockController.prototype.setDockingUnavailable):
(WebInspector.DockController.prototype._updateUI.get states):
(WebInspector.DockController.prototype._updateUI):
(WebInspector.DockController.prototype._decorateButtonForTargetState):
(WebInspector.DockController.prototype._createDockOptions):
(WebInspector.DockController.prototype._toggleDockState):
(WebInspector.DockController.prototype.isCompactMode):
(WebInspector.DockController.prototype.setCompactMode):

  • inspector/front-end/InspectorFrontendAPI.js:

(InspectorFrontendAPI.setAttachedWindow):

  • inspector/front-end/InspectorFrontendHostStub.js:

(.WebInspector.InspectorFrontendHostStub.prototype.requestAttachWindow):
(.WebInspector.InspectorFrontendHostStub.prototype.requestDetachWindow):

  • inspector/front-end/Settings.js:
  • inspector/front-end/SettingsScreen.js:

(WebInspector.GenericSettingsTab):

  • inspector/front-end/StatusBarButton.js:

(WebInspector.StatusBarButton):

  • inspector/front-end/Toolbar.js:

(WebInspector.Toolbar):
(WebInspector.Toolbar.prototype.setCompactMode):
(WebInspector.Toolbar.prototype._toolbarDragStart):
(WebInspector.Toolbar.prototype._toolbarDrag):

  • inspector/front-end/WebKit.qrc:
  • inspector/front-end/externs.js:

(WebInspector.toggleSearchingForNode):

  • inspector/front-end/inspector.css:

(body.undocked.platform-mac-snowleopard #toolbar):
(body.undocked.platform-mac-snowleopard #toolbar-dropdown):

  • inspector/front-end/inspector.html:
  • inspector/front-end/inspector.js:

(WebInspector._createGlobalStatusBarItems):
(windowLoaded):
(WebInspector.setDockingUnavailable):

  • inspector/front-end/inspectorCommon.css:

(body.dock-to-right:not(.undocked)):
(body.dock-to-right.inactive:not(.undocked)):

Location:
trunk/Source/WebCore
Files:
1 added
16 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r130287 r130288  
     12012-10-03  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: remember the last dock option so that user could toggle between dock to bottom and right
     4        https://bugs.webkit.org/show_bug.cgi?id=98255
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        - Introduced DockController.js that covers the dock mechanics
     9        - Removed dock orientation from the settings
     10        - Storing the last dock option to present it as default
     11        - Simplified the multi-option status bar button
     12
     13        * WebCore.gypi:
     14        * WebCore.vcproj/WebCore.vcproj:
     15        * inspector/compile-front-end.py:
     16        * inspector/front-end/DockController.js: Added.
     17        (WebInspector.DockController):
     18        (WebInspector.DockController.prototype.get element):
     19        (WebInspector.DockController.prototype.setDocked.set if):
     20        (WebInspector.DockController.prototype.setDocked):
     21        (WebInspector.DockController.prototype.setDockingUnavailable):
     22        (WebInspector.DockController.prototype._updateUI.get states):
     23        (WebInspector.DockController.prototype._updateUI):
     24        (WebInspector.DockController.prototype._decorateButtonForTargetState):
     25        (WebInspector.DockController.prototype._createDockOptions):
     26        (WebInspector.DockController.prototype._toggleDockState):
     27        (WebInspector.DockController.prototype.isCompactMode):
     28        (WebInspector.DockController.prototype.setCompactMode):
     29        * inspector/front-end/InspectorFrontendAPI.js:
     30        (InspectorFrontendAPI.setAttachedWindow):
     31        * inspector/front-end/InspectorFrontendHostStub.js:
     32        (.WebInspector.InspectorFrontendHostStub.prototype.requestAttachWindow):
     33        (.WebInspector.InspectorFrontendHostStub.prototype.requestDetachWindow):
     34        * inspector/front-end/Settings.js:
     35        * inspector/front-end/SettingsScreen.js:
     36        (WebInspector.GenericSettingsTab):
     37        * inspector/front-end/StatusBarButton.js:
     38        (WebInspector.StatusBarButton):
     39        * inspector/front-end/Toolbar.js:
     40        (WebInspector.Toolbar):
     41        (WebInspector.Toolbar.prototype.setCompactMode):
     42        (WebInspector.Toolbar.prototype._toolbarDragStart):
     43        (WebInspector.Toolbar.prototype._toolbarDrag):
     44        * inspector/front-end/WebKit.qrc:
     45        * inspector/front-end/externs.js:
     46        (WebInspector.toggleSearchingForNode):
     47        * inspector/front-end/inspector.css:
     48        (body.undocked.platform-mac-snowleopard #toolbar):
     49        (body.undocked.platform-mac-snowleopard #toolbar-dropdown):
     50        * inspector/front-end/inspector.html:
     51        * inspector/front-end/inspector.js:
     52        (WebInspector._createGlobalStatusBarItems):
     53        (windowLoaded):
     54        (WebInspector.setDockingUnavailable):
     55        * inspector/front-end/inspectorCommon.css:
     56        (body.dock-to-right:not(.undocked)):
     57        (body.dock-to-right.inactive:not(.undocked)):
     58
    1592012-10-03  Vsevolod Vlasov  <vsevik@chromium.org>
    260

  • trunk/Source/WebCore/WebCore.gypi

    r130260 r130288  
    63486348            'inspector/front-end/DOMStorage.js',
    63496349            'inspector/front-end/DOMSyntaxHighlighter.js',
     6350            'inspector/front-end/DockController.js',
    63506351            'inspector/front-end/Drawer.js',
    63516352            'inspector/front-end/ElementsPanelDescriptor.js',

  • trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj

    r130081 r130288  
    7626376263                                </File>
    7626476264                                <File
     76265                                        RelativePath="..\inspector\front-end\DockController.js"
     76266                                        >
     76267                                </File>
     76268                                <File
    7626576269                                        RelativePath="..\inspector\front-end\Drawer.js"
    7626676270                                        >

  • trunk/Source/WebCore/inspector/compile-front-end.py

    r130149 r130288  
    341341        "dependencies": ["ui"],
    342342        "sources": [
     343            "InspectorFrontendAPI.js",
    343344            "InspectorFrontendHostStub.js",
     345        ]
     346    },
     347    {
     348        "name": "inspector",
     349        "dependencies": ["components"],
     350        "sources": [
     351            "DockController.js",
    344352        ]
    345353    },

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

    r129348 r130288  
    2929 */
    3030
    31 InspectorFrontendAPI = {
     31var InspectorFrontendAPI = {
    3232    _pendingCommands: [],
    3333
    … …  
    7777    setAttachedWindow: function(attached)
    7878    {
    79         WebInspector.attached = attached;
     79        if (WebInspector.dockController)
     80            WebInspector.dockController.setDocked(attached);
    8081    },
    8182

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

    r130149 r130288  
    7171    requestAttachWindow: function()
    7272    {
     73        InspectorFrontendAPI.setAttachedWindow(true);
    7374    },
    7475
    7576    requestDetachWindow: function()
    7677    {
     78        InspectorFrontendAPI.setAttachedWindow(false);
    7779    },
    7880

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

    r129861 r130288  
    9393    this.deviceFitWindow = this.createSetting("deviceFitWindow", false);
    9494    this.showScriptFolders = this.createSetting("showScriptFolders", true);
    95     this.dockToRight = this.createSetting("dockToRight", false);
    9695    this.emulateTouchEvents = this.createSetting("emulateTouchEvents", false);
    9796    this.showPaintRects = this.createSetting("showPaintRects", false);
    … …  
    105104    this.searchInContentScripts = this.createSetting("searchInContentScripts", false);
    106105    this.textEditorIndent = this.createSetting("textEditorIndent", "    ");
     106    this.lastDockState = this.createSetting("lastDockState", "");
    107107
    108108    // If there are too many breakpoints in a storage, it is likely due to a recent bug that caused

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

    r130149 r130288  
    251251
    252252    var p = this._appendSection();
    253     if (Preferences.showDockToRight)
    254         p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Dock to right"), WebInspector.settings.dockToRight));
    255253    if (Preferences.exposeDisableCache)
    256254        p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Disable cache"), WebInspector.settings.cacheDisabled));

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

    r130149 r130288  
    5858
    5959    this.title = title;
     60    this.className = className;
    6061    this.disabled = false;
    6162    this._visible = true;
    … …  
    193194    {
    194195        var buttons = buttonsProvider();
     196        var mainButtonClone = new WebInspector.StatusBarButton(this.title, this.className, this.states);
     197        mainButtonClone.addEventListener("click", this._clicked, this);
     198        mainButtonClone.state = this.state;
     199        buttons.push(mainButtonClone);
    195200
    196201        var mouseUpListener = mouseUp.bind(this);
    … …  
    206211        var boundMouseOut = mouseOut.bind(this);
    207212        for (var i = 0; i < buttons.length; ++i) {
    208             buttons[i].element.addEventListener("mousemove", boundMouseOver.bind(this), false);
    209             buttons[i].element.addEventListener("mouseout", boundMouseOut.bind(this), false);
     213            buttons[i].element.addEventListener("mousemove", boundMouseOver, false);
     214            buttons[i].element.addEventListener("mouseout", boundMouseOut, false);
    210215            optionsBarElement.appendChild(buttons[i].element);
    211216        }

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

    r126268 r130288  
    3636{
    3737    this.element = document.getElementById("toolbar");
    38     WebInspector.installDragHandle(this.element, this._toolbarDragStart.bind(this), this._toolbarDrag.bind(this), this._toolbarDragEnd.bind(this), (WebInspector.isCompactMode() ? "row-resize" : "default"));
     38    WebInspector.installDragHandle(this.element, this._toolbarDragStart.bind(this), this._toolbarDrag.bind(this), this._toolbarDragEnd.bind(this), "default");
    3939
    4040    this._dropdownButton = document.getElementById("toolbar-dropdown-arrow");
    … …  
    9898
    9999    /**
     100     * @param {boolean} isCompactMode
     101     */
     102    setCompactMode: function(isCompactMode)
     103    {
     104        this._isCompactMode = isCompactMode;
     105    },
     106
     107    /**
    100108     * @return {boolean}
    101109     */
    102110    _toolbarDragStart: function(event)
    103111    {
    104         if ((!WebInspector.isCompactMode() && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacLeopard && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacSnowLeopard) || WebInspector.port() == "qt")
     112        if ((!this._isCompactMode && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacLeopard && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacSnowLeopard) || WebInspector.port() == "qt")
    105113            return false;
    106114
    … …  
    125133    _toolbarDrag: function(event)
    126134    {
    127         if (WebInspector.isCompactMode()) {
     135        if (this._isCompactMode) {
    128136            var height = window.innerHeight - (event.screenY - this.element.lastScreenY);
    129137

  • trunk/Source/WebCore/inspector/front-end/WebKit.qrc

    r129884 r130288  
    5959    <file>DOMStorageItemsView.js</file>
    6060    <file>DOMSyntaxHighlighter.js</file>
     61    <file>DockController.js</file>
    6162    <file>Drawer.js</file>
    6263    <file>ElementsPanel.js</file>

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

    r130136 r130288  
    178178var WebInspector = {}
    179179
     180WebInspector.queryParamsObject = {}
     181WebInspector.toggleSearchingForNode = function() {}
    180182WebInspector.panels = {};
    181183
    … …  
    264266WebInspector.inspectedPageDomain;
    265267
    266 WebInspector.isCompactMode = function() { return false; }
    267 
    268268WebInspector.SourceJavaScriptTokenizer = {}
    269269WebInspector.SourceJavaScriptTokenizer.Keywords = {}

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

    r129381 r130288  
    6767}
    6868
    69 body.detached.platform-mac-leopard #toolbar,
    70 body.detached.platform-mac-snowleopard #toolbar {
     69body.undocked.platform-mac-leopard #toolbar,
     70body.undocked.platform-mac-snowleopard #toolbar {
    7171    background: transparent;
    7272}
    … …  
    195195}
    196196
    197 body.detached.platform-mac-leopard #toolbar-dropdown,
    198 body.detached.platform-mac-snowleopard #toolbar-dropdown {
     197body.undocked.platform-mac-leopard #toolbar-dropdown,
     198body.undocked.platform-mac-snowleopard #toolbar-dropdown {
    199199    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
    200200}

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

    r129884 r130288  
    168168    <script type="text/javascript" src="NetworkPanelDescriptor.js"></script>
    169169    <script type="text/javascript" src="ScriptsPanelDescriptor.js"></script>
     170    <script type="text/javascript" src="DockController.js"></script>
    170171</head>
    171 <body class="detached" id="-webkit-web-inspector">
     172<body class="undocked" id="-webkit-web-inspector">
    172173    <div id="toolbar">
    173174        <div class="toolbar-item close-left"><button id="close-button-left"></button></div>

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

    r130016 r130288  
    7373    {
    7474        var bottomStatusBarContainer = document.getElementById("bottom-status-bar-container");
    75         this._dockToggleButton = new WebInspector.StatusBarButton("", "dock-status-bar-item", 3);
    76         this._dockToggleButton.makeLongClickEnabled(this._createDockOptions.bind(this));
    77         this._dockToggleButton.addEventListener("click", this._toggleAttach.bind(this), false);
    78         this._updateDockButtonState();
    79 
     75
     76        // Create main dock button and options.
    8077        var mainStatusBar = document.getElementById("main-status-bar");
    81         mainStatusBar.insertBefore(this._dockToggleButton.element, bottomStatusBarContainer);
     78        mainStatusBar.insertBefore(this.dockController.element, bottomStatusBarContainer);
    8279
    8380        this._toggleConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Show console."), "console-status-bar-item");
    … …  
    9289
    9390        mainStatusBar.appendChild(this.settingsController.statusBarItem);
    94     },
    95 
    96     _createDockOptions: function()
    97     {
    98         var alternateDockToggleButton1 = new WebInspector.StatusBarButton("Dock to main window.", "dock-status-bar-item", 3);
    99         var alternateDockToggleButton2 = new WebInspector.StatusBarButton("Undock into separate window.", "dock-status-bar-item", 3);
    100 
    101         if (this.attached) {
    102             alternateDockToggleButton1.state = WebInspector.settings.dockToRight.get() ? "bottom" : "right";
    103             alternateDockToggleButton2.state = "undock";
    104         } else {
    105             alternateDockToggleButton1.state = WebInspector.settings.dockToRight.get() ? "bottom" : "right";
    106             alternateDockToggleButton2.state = WebInspector.settings.dockToRight.get() ? "right" : "bottom";
    107         }
    108 
    109         alternateDockToggleButton1.addEventListener("click", onClick.bind(this), false);
    110         alternateDockToggleButton2.addEventListener("click", onClick.bind(this), false);
    111 
    112         function onClick(e)
    113         {
    114             var state = e.target.state;
    115             if (state === "undock")
    116                 this._toggleAttach();
    117             else if (state === "right") {
    118                 if (!this.attached)
    119                     this._toggleAttach();
    120                 WebInspector.settings.dockToRight.set(true);
    121             } else if (state === "bottom") {
    122                 if (!this.attached)
    123                     this._toggleAttach();
    124                 WebInspector.settings.dockToRight.set(false);
    125             }
    126         }
    127 
    128         return [alternateDockToggleButton1, alternateDockToggleButton2];
    129     },
    130 
    131     _updateDockButtonState: function()
    132     {
    133         if (!this._dockToggleButton)
    134             return;
    135 
    136         if (this.attached) {
    137             this._dockToggleButton.disabled = false;
    138             this._dockToggleButton.state = "undock";
    139             this._dockToggleButton.title = WebInspector.UIString("Undock into separate window.");
    140         } else {
    141             this._dockToggleButton.disabled = this._isDockingUnavailable;
    142             this._dockToggleButton.state = WebInspector.settings.dockToRight.get() ? "right" : "bottom";
    143             this._dockToggleButton.title = WebInspector.UIString("Dock to main window.");
    144         }
    145     },
    146 
    147     _toggleAttach: function()
    148     {
    149         if (!this._attached) {
    150             InspectorFrontendHost.requestAttachWindow();
    151             WebInspector.userMetrics.WindowDocked.record();
    152         } else {
    153             InspectorFrontendHost.requestDetachWindow();
    154             WebInspector.userMetrics.WindowUndocked.record();
    155         }
    15691    },
    15792
    … …  
    222157            delete this._drawerStatusBarHeader;
    223158        }
    224     },
    225 
    226     get attached()
    227     {
    228         return this._attached;
    229     },
    230 
    231     set attached(x)
    232     {
    233         if (this._attached === x)
    234             return;
    235 
    236         this._attached = x;
    237 
    238         if (x)
    239             document.body.removeStyleClass("detached");
    240         else
    241             document.body.addStyleClass("detached");
    242 
    243         this._setCompactMode(x && !WebInspector.settings.dockToRight.get());
    244         this._updateDockButtonState();
    245     },
    246 
    247     isCompactMode: function()
    248     {
    249         return this.attached && !WebInspector.settings.dockToRight.get();
    250     },
    251 
    252     _setCompactMode: function(x)
    253     {
    254         var body = document.body;
    255         if (x)
    256             body.addStyleClass("compact");
    257         else
    258             body.removeStyleClass("compact");
    259         WebInspector.windowResize();
    260159    },
    261160
    … …  
    408307{
    409308    InspectorBackend.loadFromJSONIfNeeded("../Inspector.json");
     309    WebInspector.dockController = new WebInspector.DockController();
    410310
    411311    if (WebInspector.WorkerManager.isDedicatedWorkerFrontend()) {
    … …  
    534434    this._createGlobalStatusBarItems();
    535435
    536     WebInspector._installDockToRight();
    537 
    538436    this.toolbar = new WebInspector.Toolbar();
    539437    WebInspector.startBatchUpdate();
    … …  
    579477    WebInspector.WorkerManager.loadCompleted();
    580478    InspectorFrontendAPI.loadCompleted();
    581 }
    582 
    583 WebInspector._installDockToRight = function()
    584 {
    585     // Re-use Settings infrastructure for the dock-to-right settings UI
    586     WebInspector.settings.dockToRight.set(WebInspector.queryParamsObject.dockSide === "right");
    587 
    588     if (WebInspector.settings.dockToRight.get())
    589         document.body.addStyleClass("dock-to-right");
    590 
    591     if (WebInspector.attached)
    592         WebInspector._setCompactMode(!WebInspector.settings.dockToRight.get());
    593 
    594     WebInspector.settings.dockToRight.addChangeListener(listener.bind(this));
    595 
    596     function listener(event)
    597     {
    598         var value = WebInspector.settings.dockToRight.get();
    599         if (value) {
    600             InspectorFrontendHost.requestSetDockSide("right");
    601             document.body.addStyleClass("dock-to-right");
    602         } else {
    603             InspectorFrontendHost.requestSetDockSide("bottom");
    604             document.body.removeStyleClass("dock-to-right");
    605         }
    606         if (WebInspector.attached)
    607             WebInspector._setCompactMode(!value);
    608         else
    609             WebInspector._updateDockButtonState();
    610     }
    611479}
    612480
    … …  
    623491        WebInspector.loaded();
    624492
    625     WebInspector.attached = WebInspector.queryParamsObject.docked === "true";
    626 
    627493    window.removeEventListener("DOMContentLoaded", windowLoaded, false);
    628494    delete windowLoaded;
    … …  
    669535WebInspector.setDockingUnavailable = function(unavailable)
    670536{
    671     this._isDockingUnavailable = unavailable;
    672     this._updateDockButtonState();
     537    if (this.dockController)
     538        this.dockController.setDockingUnavailable(unavailable);
    673539}
    674540

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

    r122227 r130288  
    1818}
    1919
    20 body.dock-to-right:not(.detached) {
     20body.dock-to-right:not(.undocked) {
    2121    border-left: 1px solid rgb(80, 80, 80);
    2222}
    2323
    24 body.dock-to-right.inactive:not(.detached) {
     24body.dock-to-right.inactive:not(.undocked) {
    2525    border-left: 1px solid rgb(64%, 64%, 64%);
    2626}
Note: See TracChangeset for help on using the changeset viewer.