[DevTools] Implement dock to left.

third_party/WebKit/Source/devtools/front_end/components/DockController.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 27 matching lines @@
   constructor(canDock) {
     super();
     this._canDock = canDock;
 
     this._closeButton = new UI.ToolbarButton(Common.UIString('Close'), 'largeicon-delete');
     this._closeButton.addEventListener(
         UI.ToolbarButton.Events.Click, InspectorFrontendHost.closeWindow.bind(InspectorFrontendHost));
 
     if (!canDock) {
       this._dockSide = Components.DockController.State.Undocked;
-      this._updateUI();
+      this._closeButton.setVisible(false);
       return;
     }
 
     this._states = [
       Components.DockController.State.DockedToRight, Components.DockController.State.DockedToBottom,
-      Components.DockController.State.Undocked
+      Components.DockController.State.DockedToLeft, Components.DockController.State.Undocked
     ];
     this._currentDockStateSetting = Common.settings.moduleSetting('currentDockState');
     this._currentDockStateSetting.addChangeListener(this._dockSideChanged, this);
     this._lastDockStateSetting = Common.settings.createSetting('lastDockState', 'bottom');
     if (this._states.indexOf(this._currentDockStateSetting.get()) === -1)
       this._currentDockStateSetting.set('right');
     if (this._states.indexOf(this._lastDockStateSetting.get()) === -1)
       this._currentDockStateSetting.set('bottom');
   }
 
   initialize() {
     if (!this._canDock)
       return;
 
     this._titles = [
-      Common.UIString('Dock to right'), Common.UIString('Dock to bottom'),
+      Common.UIString('Dock to right'), Common.UIString('Dock to bottom'), Common.UIString('Dock to left'),
       Common.UIString('Undock into separate window')
     ];
     this._dockSideChanged();
   }
 
   _dockSideChanged() {
     this.setDockSide(this._currentDockStateSetting.get());
   }
 
   /**
    * @return {string}
    */
   dockSide() {
     return this._dockSide;
   }
 
   /**
    * @return {boolean}
    */
   canDock() {
     return this._canDock;
   }
 
   /**
    * @return {boolean}
    */
   isVertical() {
-    return this._dockSide === Components.DockController.State.DockedToRight;
+    return this._dockSide === Components.DockController.State.DockedToRight ||
+        this._dockSide === Components.DockController.State.DockedToLeft;
   }
 
   /**
    * @param {string} dockSide
    * @suppressGlobalPropertiesCheck
    */
   setDockSide(dockSide) {
     if (this._states.indexOf(dockSide) === -1)
       dockSide = this._states[0];
 
     if (this._dockSide === dockSide)
       return;
 
     if (this._dockSide)
       this._lastDockStateSetting.set(this._dockSide);
 
     this._savedFocus = document.deepActiveElement();
     var eventData = {from: this._dockSide, to: dockSide};
     this.dispatchEventToListeners(Components.DockController.Events.BeforeDockSideChanged, eventData);
     console.timeStamp('DockController.setIsDocked');
     this._dockSide = dockSide;
     this._currentDockStateSetting.set(dockSide);
     InspectorFrontendHost.setIsDocked(
         dockSide !== Components.DockController.State.Undocked, this._setIsDockedResponse.bind(this, eventData));
-    this._updateUI();
+    this._closeButton.setVisible(this._dockSide !== Components.DockController.State.Undocked);
     this.dispatchEventToListeners(Components.DockController.Events.DockSideChanged, eventData);
   }
 
   /**
    * @param {{from: string, to: string}} eventData
    */
   _setIsDockedResponse(eventData) {
     this.dispatchEventToListeners(Components.DockController.Events.AfterDockSideChanged, eventData);
     if (this._savedFocus) {
       this._savedFocus.focus();
       this._savedFocus = null;
     }
   }
 
-  /**
-   * @suppressGlobalPropertiesCheck
-   */
-  _updateUI() {
-    var body = document.body;  // Only for main window.
-    switch (this._dockSide) {
-      case Components.DockController.State.DockedToBottom:
-        body.classList.remove('undocked');
-        body.classList.remove('dock-to-right');
-        body.classList.add('dock-to-bottom');
-        break;
-      case Components.DockController.State.DockedToRight:
-        body.classList.remove('undocked');
-        body.classList.add('dock-to-right');
-        body.classList.remove('dock-to-bottom');
-        break;
-      case Components.DockController.State.Undocked:
-        body.classList.add('undocked');
-        body.classList.remove('dock-to-right');
-        body.classList.remove('dock-to-bottom');
-        break;
-    }
-    this._closeButton.setVisible(this._dockSide !== Components.DockController.State.Undocked);
-  }
-
   _toggleDockSide() {
     if (this._lastDockStateSetting.get() === this._currentDockStateSetting.get()) {
       var index = this._states.indexOf(this._currentDockStateSetting.get()) || 0;
       this._lastDockStateSetting.set(this._states[(index + 1) % this._states.length]);
     }
     this.setDockSide(this._lastDockStateSetting.get());
   }
 };
 
 Components.DockController.State = {
   DockedToBottom: 'bottom',
   DockedToRight: 'right',
+  DockedToLeft: 'left',
   Undocked: 'undocked'
 };
 
 // Use BeforeDockSideChanged to do something before all the UI bits are updated,
 // DockSideChanged to update UI, and AfterDockSideChanged to perform actions
 // after frontend is docked/undocked in the browser.
 
 /** @enum {symbol} */
 Components.DockController.Events = {
   BeforeDockSideChanged: Symbol('BeforeDockSideChanged'),
@@ skipping 29 matching lines @@
    */
   item() {
     return Components.dockController._closeButton;
   }
 };
 
 /**
  * @type {!Components.DockController}
  */
 Components.dockController;