Fix heap snapshot rename UX

This change fixes three problems:
- When the snapshot is renamed to empty string, there is no way
  to turn on edit mode anymore. To fix this, we cancel the edit
  if the new name is the empty string.
- Because both the .title and the .title-container classes are
  set to overflow:hidden and text-overflow:ellipsis, we observe
  the issue in issue 383014858. To fix this, we only apply
  text-overflow:ellipsis when not editing. We also apply
  display:flex to auto-adjust the size of the .title span to avoid
  an overlap with the .subtitle span when editing
- We add a small padding-left so that the .title span does not get
  slightly truncated from the left in some situations after an
  edit that changes the snapshot to a longer name is committed.

Fixed: 383014858
Change-Id: I20967e209d86f59fcbcc29175366e8a62fec41bc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6088098
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Yang Guo <[email protected]>
Commit-Queue: Yang Guo <[email protected]>

Author: hashseed

front_end/panels/profiler/ProfileSidebarTreeElement.ts

@@ -99,8 +99,14 @@ export class ProfileSidebarTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   editingCommitted(_container: Element, newTitle: string): void {
-    this.editing = null;
-    this.profile.setTitle(newTitle);
+    if (newTitle.trim().length === 0) {
+      if (this.editing) {
+        this.editing.cancel();
+      }
+    } else {
+      this.editing = null;
+      this.profile.setTitle(newTitle);
+    }
   }
 
   editingCancelled(): void {

front_end/panels/profiler/profilesSidebarTree.css

@@ -184,8 +184,18 @@ li .titles {
 
 li .titles > .title-container {
   z-index: 1;
+  overflow: hidden;
+}
+
+li .titles > .title-container:has(:not(.editing)) {
   text-overflow: ellipsis;
+}
+
+li .titles > .title-container .title.editing {
+  display: flex;
   overflow: hidden;
+  margin-inline: 0;
+  padding-inline: 0;
 }
 
 li.small .titles {