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 33 matching lines @@
     this._refreshCallback = refreshCallback;
 
     var columns = /** @type {!Array<!UI.DataGrid.ColumnDescriptor>} */ ([
       {
         id: 'name',
         title: Common.UIString('Name'),
         sortable: true,
         disclosure: expandable,
         sort: UI.DataGrid.Order.Ascending,
         longText: true,
-        weight: 24
+        weight: 24,
+        editable: true
       },
-      {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: true},
+      {id: 'domain', title: Common.UIString('Domain'), sortable: true, weight: 7, editable: true},
+      {id: 'path', title: Common.UIString('Path'), sortable: true, weight: 7, editable: true},
+      {id: 'expires', title: Common.UIString('Expires / Max-Age'), sortable: true, weight: 7, editable: true},
       {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) {
       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);
+    this._lastEditedColumnId = /** @type {?string} */ (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.appendCheckboxItem(
+      Common.UIString('<empty>'),
+      this._setCookieFlag.bind(this, node, 'sameSite', ''),
+      !cookie.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 44 matching lines @@
         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);
         groupNode.expand();
       } else {
         this._populateNode(this._dataGrid.rootNode(), item.cookies, selectedCookie);
       }
     }
+
+    this._dataGrid.addCreationNode(false);
   }
 
   /**
    * @param {!UI.DataGridNode} parentNode
    * @param {?Array.<!SDK.Cookie>} cookies
    * @param {?SDK.Cookie} selectedCookie
    */
   _populateNode(parentNode, cookies, selectedCookie) {
     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 (this._lastEditedColumnId !== null) {
+          const column = this._dataGrid._columns[this._lastEditedColumnId];
+          const cellIndex = this._dataGrid._visibleColumnsArray.indexOf(column);
+          const nextEditableColumn = this._dataGrid._nextEditableColumn(cellIndex);
+          if (nextEditableColumn !== -1)
+            this._dataGrid._startEditingColumnOfDataGridNode(cookieNode, nextEditableColumn);
+          this._lastEditedColumnId = null;
+        }
+      }
     }
   }
 
   _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();
   }
 
+  _onUpdateCookie(editingNode, columnIdentifier, oldText, newText) {
+    this._lastEditedColumnId = columnIdentifier;
+    this._setDefaults(editingNode);
+    this._saveNode(editingNode);
+  }
+
+  _setDefaults(node) {
+    if (node.data.name === null)
+      node.data.name = '';
+    if (node.data.value === null)
+      node.data.value = '';
+    if (node.data.domain === null) {
+      var target = SDK.targetManager.targets(SDK.Target.Capability.Network)[0];
+      var url = new URL(target.inspectedURL());
+      node.data.domain = url.hostname;
+    }
+    if (node.data.path === null)
+      node.data.path = '/';
+    if (node.data.expires === null)
+      node.data.expires = '';
+  }
+
+  _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();
+    this._nextSelectedCookie = newCookie;
+    this._refresh();
+  }
+
+  _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) {
+      var secondsSinceEpoch = 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;
+  }
+
   _refresh() {
     if (this._refreshCallback)
       this._refreshCallback();
   }
 };