DevTools: Add ability to add and edit cookies

third_party/WebKit/Source/devtools/front_end/cookie_table/CookiesTable.js

 /*
  * Copyright (C) 2009 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  * Copyright (C) 2010 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 15 matching lines @@
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @unrestricted
  */
 CookieTable.CookiesTable = class extends UI.VBox {
   /**
-   * @param {boolean} expandable
+   * @param {boolean} readOnly
    * @param {function()=} refreshCallback
    * @param {function()=} selectedCallback
+   * @param {string=} cookieDomain
    */
-  constructor(expandable, refreshCallback, selectedCallback) {
+  constructor(readOnly, refreshCallback, selectedCallback, cookieDomain) {
     super();
 
-    var readOnly = expandable;
+    this._readOnly = readOnly;
     this._refreshCallback = refreshCallback;
+    this._cookieDomain = cookieDomain;
 
     var columns = /** @type {!Array<!DataGrid.DataGrid.ColumnDescriptor>} */ ([
       {
         id: 'name',
         title: Common.UIString('Name'),
         sortable: true,
-        disclosure: expandable,
+        disclosure: !this._readOnly,
         sort: DataGrid.DataGrid.Order.Ascending,
         longText: true,
-        weight: 24
+        weight: 24,
+        editable: !this._readOnly
       },
-      {id: 'value', title: Common.UIString('Value'), sortable: true, longText: true, weight: 34},
-      {id: 'domain', title: Common.UIString('Domain'), sortable: true, weight: 7},
-      {id: 'path', title: Common.UIString('Path'), sortable: true, weight: 7},
-      {id: 'expires', title: Common.UIString('Expires / Max-Age'), sortable: true, weight: 7},
-      {id: 'size', title: Common.UIString('Size'), sortable: true, align: DataGrid.DataGrid.Align.Right, weight: 7}, {
+      {
+        id: 'value',
+        title: Common.UIString('Value'),
+        sortable: true,
+        longText: true,
+        weight: 34,
+        editable: !this._readOnly
+      },
+      {id: 'domain', title: Common.UIString('Domain'), sortable: true, weight: 7, editable: !this._readOnly},
+      {id: 'path', title: Common.UIString('Path'), sortable: true, weight: 7, editable: !this._readOnly},
+      {
+        id: 'expires',
+        title: Common.UIString('Expires / Max-Age'),
+        sortable: true,
+        weight: 7,
+        editable: !this._readOnly
+      },
+      {id: 'size', title: Common.UIString('Size'), sortable: true, align: DataGrid.DataGrid.Align.Right, weight: 7},
+      {
         id: 'httpOnly',
         title: Common.UIString('HTTP'),
         sortable: true,
         align: DataGrid.DataGrid.Align.Center,
         weight: 7
       },
       {
         id: 'secure',
         title: Common.UIString('Secure'),
         sortable: true,
         align: DataGrid.DataGrid.Align.Center,
         weight: 7
       },
       {
         id: 'sameSite',
         title: Common.UIString('SameSite'),
         sortable: true,
         align: DataGrid.DataGrid.Align.Center,
         weight: 7
       }
     ]);
 
-    if (readOnly) {
+    if (this._readOnly) {
       this._dataGrid = new DataGrid.DataGrid(columns);
     } else {
-      this._dataGrid = new DataGrid.DataGrid(columns, undefined, this._onDeleteCookie.bind(this), refreshCallback);
+      this._dataGrid = new DataGrid.DataGrid(columns, this._onUpdateCookie.bind(this), this._onDeleteCookie.bind(this), refreshCallback);
       this._dataGrid.setRowContextMenuCallback(this._onRowContextMenu.bind(this));
     }
 
     this._dataGrid.setName('cookiesTable');
     this._dataGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this._rebuildTable, this);
 
     if (selectedCallback)
       this._dataGrid.addEventListener(DataGrid.DataGrid.Events.SelectedNode, selectedCallback, this);
 
     this._nextSelectedCookie = /** @type {?SDK.Cookie} */ (null);
+    /** @type {?string} */
+    this._lastEditedColumnId = null;
 
     this._dataGrid.asWidget().show(this.element);
     this._data = [];
   }
 
   /**
    * @param {?string} domain
    */
   _clearAndRefresh(domain) {
     this.clear(domain);
     this._refresh();
   }
 
   /**
    * @param {!UI.ContextMenu} contextMenu
    * @param {!DataGrid.DataGridNode} node
    */
   _onRowContextMenu(contextMenu, node) {
-    if (node === this._dataGrid.creationNode)
+    if (node.isCreationNode)
       return;
-    var domain = node.cookie.domain();
+
+    const cookie = node.cookie;
+    const domain = cookie.domain();
     if (domain) {
       contextMenu.appendItem(
           Common.UIString.capitalize('Clear ^all from "%s"', domain), this._clearAndRefresh.bind(this, domain));
     }
     contextMenu.appendItem(Common.UIString.capitalize('Clear ^all'), this._clearAndRefresh.bind(this, null));
   }
 
   /**
    * @param {!Array.<!SDK.Cookie>} cookies
    */
@@ skipping 23 matching lines @@
   clear(domain) {
     for (var i = 0, length = this._data.length; i < length; ++i) {
       var cookies = this._data[i].cookies;
       for (var j = 0, cookieCount = cookies.length; j < cookieCount; ++j) {
         if (!domain || cookies[j].domain() === domain)
           cookies[j].remove();
       }
     }
   }
 
+  /**
+   * @override
+   */
+  willHide() {
+    this._lastEditedColumnId = null;
+  }
+
   _rebuildTable() {
     var selectedCookie = this._nextSelectedCookie || this.selectedCookie();
+    var lastEditedColumnId = this._lastEditedColumnId;
     this._nextSelectedCookie = null;
+    this._lastEditedColumnId = null;
     this._dataGrid.rootNode().removeChildren();
     for (var i = 0; i < this._data.length; ++i) {
       var item = this._data[i];
       if (item.folderName) {
         var groupData = {
           name: item.folderName,
           value: '',
           domain: '',
           path: '',
           expires: '',
           size: this._totalSize(item.cookies),
           httpOnly: '',
           secure: '',
           sameSite: ''
         };
         var groupNode = new DataGrid.DataGridNode(groupData);
         groupNode.selectable = true;
         this._dataGrid.rootNode().appendChild(groupNode);
         groupNode.element().classList.add('row-group');
-        this._populateNode(groupNode, item.cookies, selectedCookie);
+        this._populateNode(groupNode, item.cookies, selectedCookie, lastEditedColumnId);
         groupNode.expand();
       } else {
-        this._populateNode(this._dataGrid.rootNode(), item.cookies, selectedCookie);
+        this._populateNode(this._dataGrid.rootNode(), item.cookies, selectedCookie, lastEditedColumnId);
       }
     }
+    if (selectedCookie && lastEditedColumnId && !this._dataGrid.selectedNode)
+        this._addInactiveNode(this._dataGrid.rootNode(), selectedCookie, lastEditedColumnId);

[dgozman, 2017/01/20 01:54:51]

style: 2 spaces indent

[kdzwinel, 2017/01/21 02:12:20]

thanks! It looks like linter isn't configured to report indentation errors yet.

+    if (!this._readOnly)
+      this._dataGrid.addCreationNode(false);
   }
 
   /**
    * @param {!DataGrid.DataGridNode} parentNode
    * @param {?Array.<!SDK.Cookie>} cookies
    * @param {?SDK.Cookie} selectedCookie
+   * @param {?string} lastEditedColumnId
    */
-  _populateNode(parentNode, cookies, selectedCookie) {
+  _populateNode(parentNode, cookies, selectedCookie, lastEditedColumnId) {
     parentNode.removeChildren();
     if (!cookies)
       return;
 
     this._sortCookies(cookies);
     for (var i = 0; i < cookies.length; ++i) {
       var cookie = cookies[i];
       var cookieNode = this._createGridNode(cookie);
       parentNode.appendChild(cookieNode);
       if (selectedCookie && selectedCookie.name() === cookie.name() && selectedCookie.domain() === cookie.domain() &&
-          selectedCookie.path() === cookie.path())
+          selectedCookie.path() === cookie.path()) {
         cookieNode.select();
+        if (lastEditedColumnId !== null)
+          this._dataGrid.startEditingNextEditableColumnOfDataGridNode(cookieNode, lastEditedColumnId);
+      }
     }
   }
 
+  /**
+   * @param {!DataGrid.DataGridNode} parentNode
+   * @param {!SDK.Cookie} cookie
+   * @param {?string} editedColumnId
+   */
+  _addInactiveNode(parentNode, cookie, editedColumnId) {
+    const cookieNode = this._createGridNode(cookie);
+    parentNode.appendChild(cookieNode);
+    cookieNode.select();
+    cookieNode.setInactive(true);
+    if (editedColumnId !== null)
+      this._dataGrid.startEditingNextEditableColumnOfDataGridNode(cookieNode, editedColumnId);
+  }
+
   _totalSize(cookies) {
     var totalSize = 0;
     for (var i = 0; cookies && i < cookies.length; ++i)
       totalSize += cookies[i].size();
     return totalSize;
   }
 
   /**
    * @param {!Array.<!SDK.Cookie>} cookies
    */
@@ skipping 68 matching lines @@
       data.path = Common.UIString('N/A');
       data.expires = Common.UIString('N/A');
     } else {
       data.domain = cookie.domain() || '';
       data.path = cookie.path() || '';
       if (cookie.maxAge())
         data.expires = Number.secondsToString(parseInt(cookie.maxAge(), 10));
       else if (cookie.expires())
         data.expires = new Date(cookie.expires()).toISOString();
       else
-        data.expires = Common.UIString('Session');
+        data.expires = CookieTable.CookiesTable._expiresSessionValue;
     }
     data.size = cookie.size();
     const checkmark = '\u2713';
     data.httpOnly = (cookie.httpOnly() ? checkmark : '');
     data.secure = (cookie.secure() ? checkmark : '');
     data.sameSite = cookie.sameSite() || '';
 
     var node = new DataGrid.DataGridNode(data);
     node.cookie = cookie;
     node.selectable = true;
     return node;
   }
 
   _onDeleteCookie(node) {
     var cookie = node.cookie;
     var neighbour = node.traverseNextNode() || node.traversePreviousNode();
     if (neighbour)
       this._nextSelectedCookie = neighbour.cookie;
     cookie.remove();
     this._refresh();
   }
 
+  /**
+   * @param {!DataGrid.DataGridNode} editingNode
+   * @param {string} columnIdentifier
+   * @param {string} oldText
+   * @param {string} newText
+   */
+  _onUpdateCookie(editingNode, columnIdentifier, oldText, newText) {
+    this._lastEditedColumnId = columnIdentifier;
+    this._setDefaults(editingNode);
+    if (this._isValidCookieData(editingNode.data))
+      this._saveNode(editingNode);
+    else
+      editingNode.setDirty(true);
+  }
+
+  /**
+   * @param {!DataGrid.DataGridNode} node
+   */
+  _setDefaults(node) {
+    if (node.data.name === null)
+      node.data.name = '';
+    if (node.data.value === null)
+      node.data.value = '';
+    if (node.data.domain === null)
+      node.data.domain = this._cookieDomain;

[dgozman, 2017/01/20 01:54:51]

You should strip down the port number. Try adding a cookie on localhost:1234 -
it breaks.

[kdzwinel, 2017/01/21 02:12:20]

I haven't realized that `"...".asParsedURL().domain()` result contains a port
number! I replaced it with `.host`.

+    if (node.data.path === null)
+      node.data.path = '/';
+    if (node.data.expires === null)
+      node.data.expires = CookieTable.CookiesTable._expiresSessionValue;
+  }
+
+  /**
+   * @param {!DataGrid.DataGridNode} node
+   */
+  _saveNode(node) {
+    var oldCookie = node.cookie;
+    var newCookie = this._createCookieFromData(node.data);
+    if (oldCookie && (newCookie.name() !== oldCookie.name() || newCookie.url() !== oldCookie.url()))
+      oldCookie.remove();
+    node.cookie = newCookie;
+    newCookie.save((error, success) => {
+      if (success)
+        this._refresh();
+      else
+        node.setDirty(true);
+    });
+    this._nextSelectedCookie = newCookie;
+  }
+
+  /**
+   * @param {!Object.<string, *>} data
+   * @returns {SDK.Cookie}
+   */
+  _createCookieFromData(data) {
+    var target = SDK.targetManager.targets(SDK.Target.Capability.Network)[0];
+    var cookie = new SDK.Cookie(target, data.name, data.value, null);
+    cookie.addAttribute('domain', data.domain);
+    cookie.addAttribute('path', data.path);
+    if (data.expires && data.expires !== CookieTable.CookiesTable._expiresSessionValue)
+      cookie.addAttribute('expires', (new Date(data.expires)).toUTCString());
+    if (data.httpOnly)
+      cookie.addAttribute('httpOnly');
+    if (data.secure)
+      cookie.addAttribute('secure');
+    if (data.sameSite)
+      cookie.addAttribute('sameSite', data.sameSite);
+    cookie.setSize(data.name.length + data.value.length);
+    return cookie;
+  }
+
+  /**
+   * @param {!Object.<string, *>} data
+   * @returns {boolean}
+   */
+  _isValidCookieData(data) {
+    return (data.name || data.value) && this._isValidDomain(data.domain) && this._isValidPath(data.path) && this._isValidDate(data.expires);
+  }
+
+  /**
+   * @param {string} domain
+   * @returns {boolean}
+   */
+  _isValidDomain(domain) {
+    if (!domain)
+      return true;
+    var parsedURL = ('http://' + domain).asParsedURL();
+    return !!parsedURL && parsedURL.domain() === domain;
+  }
+
+  /**
+   * @param {string} path
+   * @returns {boolean}
+   */
+  _isValidPath(path) {
+    var parsedURL = ('http://example.com' + path).asParsedURL();
+    return !!parsedURL && parsedURL.path === path;
+  }
+
+  /**
+   * @param {string} date
+   * @returns {boolean}
+   */
+  _isValidDate(date) {
+    return date === '' || date === CookieTable.CookiesTable._expiresSessionValue || !isNaN(Date.parse(date));
+  }
+
   _refresh() {
     if (this._refreshCallback)
       this._refreshCallback();
   }
 };
+
+/** @const */
+CookieTable.CookiesTable._expiresSessionValue = Common.UIString('Session');