Limit value display in KeyValueStorageItemsView.

The UI was previously freezing when the user tries to render large values.

We are now truncating the value to 4096 chars.

Bug: 408976043
Fixed: 410744529
Change-Id: I75fec294ae474b6cc5871fc5c9c6e722561b122a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6455747
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
(cherry picked from commit b75904f)
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6476906
Commit-Queue: Rubber Stamper <[email protected]>
Bot-Commit: Rubber Stamper <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Auto-Submit: Connor Clark <[email protected]>

Author: danilsomsikov

front_end/panels/application/KeyValueStorageItemsView.ts

@@ -85,6 +85,8 @@ export interface ViewInput {
   onDelete: (event: CustomEvent<HTMLElement>) => void;
 }
 
+const MAX_VALUE_LENGTH = 4096;
+
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 /**
  * A helper typically used in the Application panel. Renders a split view
@@ -135,7 +137,7 @@ export abstract class KeyValueStorageItemsView extends StorageItemsView {
                       <tr data-key=${item.key} data-value=${item.value}
                           selected=${(input.selectedKey === item.key) || nothing}>
                         <td>${item.key}</td>
-                        <td>${item.value}</td>
+                        <td>${item.value.substr(0, MAX_VALUE_LENGTH)}</td>
                       </tr>`)}
                       <tr placeholder></tr>
                   </table>