DevTools: Add ability to add and edit cookies

third_party/WebKit/Source/devtools/front_end/components_lazy/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
  */
 Components.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<!UI.DataGrid.ColumnDescriptor>} */ ([
       {
         id: 'name',
         title: Common.UIString('Name'),
         sortable: true,
-        disclosure: expandable,
+        disclosure: !this._readOnly,
         sort: UI.DataGrid.Order.Ascending,
         longText: true,
-        weight: 24
+        weight: 24,
+        editable: true

[allada, 2016/12/14 03:04:15]

Shouldn't we still address this? by setting it when it's readonly? I am not 100%
sure how editable works in DataGrid, I thought we should always set it to false
if it's readonly.

[kdzwinel, 2016/12/14 14:26:50]

Ah! It wasn't intended. I just missed this one.

       },
-      {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: '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: UI.DataGrid.Align.Right, weight: 7},
       {id: 'httpOnly', title: Common.UIString('HTTP'), sortable: true, align: UI.DataGrid.Align.Center, weight: 7},
       {id: 'secure', title: Common.UIString('Secure'), sortable: true, align: UI.DataGrid.Align.Center, weight: 7}, {
         id: 'sameSite',
         title: Common.UIString('SameSite'),
         sortable: true,
         align: UI.DataGrid.Align.Center,
         weight: 7
       }
     ]);
 
-    if (readOnly) {
+    if (this._readOnly) {
       this._dataGrid = new UI.DataGrid(columns);
     } else {
-      this._dataGrid = new UI.DataGrid(columns, undefined, this._onDeleteCookie.bind(this), refreshCallback);
+      this._dataGrid = new UI.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(UI.DataGrid.Events.SortingChanged, this._rebuildTable, this);
 
     if (selectedCallback)
       this._dataGrid.addEventListener(UI.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 {!UI.DataGridNode} node
    */
   _onRowContextMenu(contextMenu, node) {
-    if (node === this._dataGrid.creationNode)
+    if (node.isCreationNode)
       return;
-    var domain = node.cookie.domain();
+
+    const cookie = node.cookie;
+    const checkmark = '\u2713';
+    contextMenu.appendCheckboxItem(
+      Common.UIString('Secure flag'),
+      this._setCookieFlag.bind(this, node, 'secure', cookie.secure() ? '' : checkmark),
+      cookie.secure(),
+      false
+    );
+    contextMenu.appendCheckboxItem(
+      Common.UIString('HttpOnly flag'),
+      this._setCookieFlag.bind(this, node, 'httpOnly', cookie.httpOnly() ? '' : checkmark),
+      cookie.httpOnly(),
+      false
+    );
+
+    var sameSiteSubmenu = contextMenu.appendSubMenuItem(Common.UIString('SameSite flag'));
+    sameSiteSubmenu.appendItem(
+      Common.UIString('No Restriction'),
+      this._setCookieFlag.bind(this, node, 'sameSite', ''),
+      false
+    );
+    sameSiteSubmenu.appendCheckboxItem(
+      Protocol.Network.CookieSameSite.Lax,
+      this._setCookieFlag.bind(this, node, 'sameSite', Protocol.Network.CookieSameSite.Lax),
+      cookie.sameSite() === Protocol.Network.CookieSameSite.Lax,
+      false
+    );
+    sameSiteSubmenu.appendCheckboxItem(
+      Protocol.Network.CookieSameSite.Strict,
+      this._setCookieFlag.bind(this, node, 'sameSite', Protocol.Network.CookieSameSite.Strict),
+      cookie.sameSite() === Protocol.Network.CookieSameSite.Strict,
+      false
+    );
+    contextMenu.appendSeparator();
+
+    var 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));
   }
 
+  _setCookieFlag(node, flag, value) {
+    node.data[flag] = value;
+    node.refresh();
+    this._saveNode(node);
+  }
+
   /**
    * @param {!Array.<!SDK.Cookie>} cookies
    */
   setCookies(cookies) {
     this.setCookieFolders([{cookies: cookies}]);
   }
 
   /**
    * @param {!Array.<!{folderName: ?string, cookies: !Array.<!SDK.Cookie>}>} cookieFolders
    */
@@ skipping 16 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 UI.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 (!this._readOnly)
+      this._dataGrid.addCreationNode(false);
   }
 
   /**
    * @param {!UI.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);
+      }
     }
   }
 
   _totalSize(cookies) {
     var totalSize = 0;
     for (var i = 0; cookies && i < cookies.length; ++i)
       totalSize += cookies[i].size();
     return totalSize;
   }
 
@@ skipping 94 matching lines @@
 
   _onDeleteCookie(node) {
     var cookie = node.cookie;
     var neighbour = node.traverseNextNode() || node.traversePreviousNode();
     if (neighbour)
       this._nextSelectedCookie = neighbour.cookie;
     cookie.remove();
     this._refresh();
   }
 
+  /**
+   * @param {!UI.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.unsaved = true;
+  }
+
+  /**
+   * @param {!UI.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;
+    if (node.data.path === null)
+      node.data.path = '/';
+    if (node.data.expires === null)
+      node.data.expires = Common.UIString('Session');
+  }
+
+  /**
+   * @param {!UI.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.unsaved = 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 !== Common.UIString('Session')) {
+      var secondsSinceEpoch = Math.floor(Date.parse(data.expires) / 1000);
+      cookie.addAttribute('expires', secondsSinceEpoch || undefined);
+    }
+    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;

[allada, 2016/12/14 03:04:15]

Any reason we are double-banging this? I thought it'll be null or an object
always? I think we should just get rid of the double bang as it'll do the same
thing.

[kdzwinel, 2016/12/14 14:26:50]

without the double-bang this method may return null (when parsing fails and
parsedURL is null). IMO `is*` methods should always return boolean and, as far
as I can see, there are no `is*` methods in the DT codebase that return
{?boolean}.

+  }
+
+  /**
+   * @param {string} path
+   * @returns {boolean}
+   */
+  _isValidPath(path) {
+    var parsedURL = ('http://example.com' + path).asParsedURL();
+    return !!parsedURL && parsedURL.path === path;

[allada, 2016/12/14 03:04:15]

Same as above.

+  }
+
+  /**
+   * @param {string} date
+   * @returns {boolean}
+   */
+  _isValidDate(date) {
+    return date === '' || date === Common.UIString('Session') || !isNaN(Date.parse(date));

[allada, 2016/12/14 03:04:15]

I think we can just this here:
return !isNaN(Date.parse(date));

[kdzwinel, 2016/12/14 14:26:50]

This will cause empty string and `Common.UIString('Session')` to be considered
invalid. I don't think we want that? 

+  }
+
   _refresh() {
     if (this._refreshCallback)
       this._refreshCallback();
   }
 };