Changeset 229543 in webkit

Timestamp:

Mar 12, 2018 12:35:00 PM (6 years ago)

Author:

Jon Davis

Message:

Web Inspector: Remove redundant tooltips
​https://bugs.webkit.org/show_bug.cgi?id=183099

Reviewed by Matt Baker.

• Localizations/en.lproj/localizedStrings.js:
• UserInterface/Base/Main.js:

(WI.contentLoaded):
Instantiate ConsoleDrawer so the keyboard shortcuts for FindBanner are available.

• UserInterface/Views/BreakpointTreeElement.js:

(WI.BreakpointTreeElement):
Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.

• UserInterface/Views/ButtonNavigationItem.js:

(WI.ButtonNavigationItem):
Only show tooltips when the button style is an image.

• UserInterface/Views/ConsoleDrawer.js:

(WI.ConsoleDrawer):
(WI.ConsoleDrawer.prototype.toggleButtonShortcutTooltip):
Added helper to set the toggle button keyboard shortcut tooltip.

• UserInterface/Views/DOMBreakpointTreeElement.js:

(WI.DOMBreakpointTreeElement):
Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.

• UserInterface/Views/DOMNodeTreeElement.js:

(WI.DOMNodeTreeElement):
Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.

• UserInterface/Views/FindBanner.js:

(WI.FindBanner):

• UserInterface/Views/HierarchicalPathComponent.js:

(WI.HierarchicalPathComponent):
(WI.HierarchicalPathComponent.prototype.get tooltip):
(WI.HierarchicalPathComponent.prototype.set tooltip):
(WI.HierarchicalPathComponent.prototype.get hideTooltip):
(WI.HierarchicalPathComponent.prototype.set hideTooltip):
(WI.HierarchicalPathComponent.prototype._updateElementTitleAndText):
Add tooltip management features to manage tooltips separately of the displayName,
and provide a behavior to hide tooltips while retaining the tooltip data.

• UserInterface/Views/HierarchicalPathNavigationItem.js:

(WI.HierarchicalPathNavigationItem.prototype.updateLayout):
Hide tooltips when fully visible, show tooltips for collapsed items.

• UserInterface/Views/PinnedTabBarItem.js:

(WI.PinnedTabBarItem.prototype.titleDidChange):
Set tooltips for pinned tab bar items.

• UserInterface/Views/QuickConsole.js:

(WI.QuickConsole):
Set the ConsoleDrawer toggle button tooltip after the keyboard shortcut is registered.

• UserInterface/Views/StorageTreeElement.js:

(WI.StorageTreeElement):
Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.

• UserInterface/Views/TabBarItem.js:

(WI.TabBarItem.prototype.get title):
(WI.TabBarItem.prototype.set title):
(WI.TabBarItem.prototype.titleDidChange):
(WI.TabBarItem):
Add title property management with an overridable titleDidChange handler for
setting tooltips when needed.

• UserInterface/Views/TimelineTreeElement.js:

(WI.TimelineTreeElement):
Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.

• UserInterface/Views/ToggleButtonNavigationItem.js:

(WI.ToggleButtonNavigationItem.prototype.set defaultToolTip):
Added a setter for manging the default tooltip of a toggle button.

• UserInterface/Views/XHRBreakpointTreeElement.js:

(WI.XHRBreakpointTreeElement):
Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (2 diffs)
• UserInterface/Base/Main.js (modified) (2 diffs)
• UserInterface/Views/BreakpointTreeElement.js (modified) (1 diff)
• UserInterface/Views/ButtonNavigationItem.js (modified) (2 diffs)
• UserInterface/Views/ConsoleDrawer.js (modified) (2 diffs)
• UserInterface/Views/DOMBreakpointTreeElement.js (modified) (1 diff)
• UserInterface/Views/DOMNodeTreeElement.js (modified) (1 diff)
• UserInterface/Views/FindBanner.js (modified) (2 diffs)
• UserInterface/Views/HierarchicalPathComponent.js (modified) (3 diffs)
• UserInterface/Views/HierarchicalPathNavigationItem.js (modified) (2 diffs)
• UserInterface/Views/PinnedTabBarItem.js (modified) (1 diff)
• UserInterface/Views/QuickConsole.js (modified) (2 diffs)
• UserInterface/Views/StorageTreeElement.js (modified) (1 diff)
• UserInterface/Views/TabBarItem.js (modified) (1 diff)
• UserInterface/Views/TimelineTreeElement.js (modified) (1 diff)
• UserInterface/Views/ToggleButtonNavigationItem.js (modified) (1 diff)
• UserInterface/Views/XHRBreakpointTreeElement.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-03-12  Jon Davis  <jond@apple.com>
+
+        Web Inspector: Remove redundant tooltips
+        https://bugs.webkit.org/show_bug.cgi?id=183099
+
+        Reviewed by Matt Baker.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Base/Main.js:
+        (WI.contentLoaded):
+        Instantiate ConsoleDrawer so the keyboard shortcuts for FindBanner are available.
+
+        * UserInterface/Views/BreakpointTreeElement.js:
+        (WI.BreakpointTreeElement):
+        Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.
+
+        * UserInterface/Views/ButtonNavigationItem.js:
+        (WI.ButtonNavigationItem):
+        Only show tooltips when the button style is an image.
+
+        * UserInterface/Views/ConsoleDrawer.js:
+        (WI.ConsoleDrawer):
+        (WI.ConsoleDrawer.prototype.toggleButtonShortcutTooltip):
+        Added helper to set the toggle button keyboard shortcut tooltip.
+
+        * UserInterface/Views/DOMBreakpointTreeElement.js:
+        (WI.DOMBreakpointTreeElement):
+        Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.
+
+        * UserInterface/Views/DOMNodeTreeElement.js:
+        (WI.DOMNodeTreeElement):
+        Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.
+
+        * UserInterface/Views/FindBanner.js:
+        (WI.FindBanner):
+        * UserInterface/Views/HierarchicalPathComponent.js:
+        (WI.HierarchicalPathComponent):
+        (WI.HierarchicalPathComponent.prototype.get tooltip):
+        (WI.HierarchicalPathComponent.prototype.set tooltip):
+        (WI.HierarchicalPathComponent.prototype.get hideTooltip):
+        (WI.HierarchicalPathComponent.prototype.set hideTooltip):
+        (WI.HierarchicalPathComponent.prototype._updateElementTitleAndText):
+        Add tooltip management features to manage tooltips separately of the displayName,
+        and provide a behavior to hide tooltips while retaining the tooltip data.
+
+        * UserInterface/Views/HierarchicalPathNavigationItem.js:
+        (WI.HierarchicalPathNavigationItem.prototype.updateLayout):
+        Hide tooltips when fully visible, show tooltips for collapsed items.
+
+        * UserInterface/Views/PinnedTabBarItem.js:
+        (WI.PinnedTabBarItem.prototype.titleDidChange):
+        Set tooltips for pinned tab bar items.
+
+        * UserInterface/Views/QuickConsole.js:
+        (WI.QuickConsole):
+        Set the ConsoleDrawer toggle button tooltip after the keyboard shortcut is registered.
+
+        * UserInterface/Views/StorageTreeElement.js:
+        (WI.StorageTreeElement):
+        Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.
+
+        * UserInterface/Views/TabBarItem.js:
+        (WI.TabBarItem.prototype.get title):
+        (WI.TabBarItem.prototype.set title):
+        (WI.TabBarItem.prototype.titleDidChange):
+        (WI.TabBarItem):
+        Add title property management with an overridable titleDidChange handler for
+        setting tooltips when needed.
+
+        * UserInterface/Views/TimelineTreeElement.js:
+        (WI.TimelineTreeElement):
+        Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.
+
+        * UserInterface/Views/ToggleButtonNavigationItem.js:
+        (WI.ToggleButtonNavigationItem.prototype.set defaultToolTip):
+        Added a setter for manging the default tooltip of a toggle button.
+
+        * UserInterface/Views/XHRBreakpointTreeElement.js:
+        (WI.XHRBreakpointTreeElement):
+        Suppress tooltips by setting the tooltipHandledSeprately flag with no custom handler.
+
 2018-03-09  Nikita Vasilyev  <nvasilyev@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -421 +421 @@
 localizedStrings["Filter"] = "Filter";
 localizedStrings["Filter Full URL"] = "Filter Full URL";
+localizedStrings["Find Next (%s)"] = "Find Next (%s)";
+localizedStrings["Find Previous (%s)"] = "Find Previous (%s)";
 localizedStrings["Flexbox"] = "Flexbox";
 localizedStrings["Float"] = "Float";
@@ -475 +477 @@
 localizedStrings["Height"] = "Height";
 localizedStrings["Hide Console"] = "Hide Console";
+localizedStrings["Hide Console (%s)"] = "Hide Console (%s)";
 localizedStrings["Hide Grid"] = "Hide Grid";
 localizedStrings["Hide Path"] = "Hide Path";

trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

@@ -282 +282 @@
     this._contentElement.setAttribute("aria-label", WI.UIString("Content"));
 
-    this.consoleDrawer = new WI.ConsoleDrawer(document.getElementById("console-drawer"));
-    this.consoleDrawer.addEventListener(WI.ConsoleDrawer.Event.CollapsedStateChanged, this._consoleDrawerCollapsedStateDidChange, this);
-    this.consoleDrawer.addEventListener(WI.ConsoleDrawer.Event.Resized, this._consoleDrawerDidResize, this);
-
     this.clearKeyboardShortcut = new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl, "K", this._clear.bind(this));
 
@@ -293 +289 @@
     this.findNextKeyboardShortcut = new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl, "G", this._findNext.bind(this));
     this.findPreviousKeyboardShortcut = new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.Shift | WI.KeyboardShortcut.Modifier.CommandOrControl, "G", this._findPrevious.bind(this));
+
+    this.consoleDrawer = new WI.ConsoleDrawer(document.getElementById("console-drawer"));
+    this.consoleDrawer.addEventListener(WI.ConsoleDrawer.Event.CollapsedStateChanged, this._consoleDrawerCollapsedStateDidChange, this);
+    this.consoleDrawer.addEventListener(WI.ConsoleDrawer.Event.Resized, this._consoleDrawerDidResize, this);
 
     this.quickConsole = new WI.QuickConsole(document.getElementById("quick-console"));

trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js

@@ -63 +63 @@
         this._iconAnimationLayerElement = document.createElement("span");
         this.iconElement.appendChild(this._iconAnimationLayerElement);
+        this.tooltipHandledSeparately = true;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js

@@ -35 +35 @@
         this._enabled = true;
 
-        this.tooltip = toolTipOrLabel;
-
         this.element.addEventListener("click", this._mouseClicked.bind(this));
 
@@ -50 +48 @@
 
         this.buttonStyle = this._image ? WI.ButtonNavigationItem.Style.Image : WI.ButtonNavigationItem.Style.Text;
+
+        if (this.buttonStyle === WI.ButtonNavigationItem.Style.Image)
+            this.tooltip = toolTipOrLabel;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js

@@ -40 +40 @@
 
         this._toggleDrawerButton = new WI.ToggleButtonNavigationItem("toggle-drawer", WI.UIString("Hide Console"), WI.UIString("Show Console"), "Images/HideConsoleDrawer.svg", "Images/ShowConsoleDrawer.svg");
+
         this._toggleDrawerButton.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;
         this._toggleDrawerButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => { WI.toggleSplitConsole(); });
@@ -50 +51 @@
 
     // Public
+
+    toggleButtonShortcutTooltip(keyboardShortcut)
+    {
+        this._toggleDrawerButton.defaultToolTip = WI.UIString("Hide Console (%s)").format(keyboardShortcut.displayName);
+    }
 
     get collapsed()

trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js

@@ -41 +41 @@
         this._statusImageElement.classList.add("status-image", "resolved");
         this.status = this._statusImageElement;
+        this.tooltipHandledSeparately = true;
 
         breakpoint.addEventListener(WI.DOMBreakpoint.Event.DisabledStateDidChange, this._updateStatus, this);

trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeTreeElement.js

@@ -34 +34 @@
 
         this.status = WI.linkifyNodeReferenceElement(domNode, WI.createGoToArrowButton());
+        this.tooltipHandledSeparately = true;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.js

@@ -54 +54 @@
         this._previousResultButton.classList.add("segmented", "previous-result");
         this._previousResultButton.disabled = true;
+        this._previousResultButton.title = WI.UIString("Find Previous (%s)").format(WI.findPreviousKeyboardShortcut.displayName);;
         this._previousResultButton.addEventListener("click", this._previousResultButtonClicked.bind(this));
         this.element.appendChild(this._previousResultButton);
@@ -64 +65 @@
         this._nextResultButton.classList.add("segmented", "next-result");
         this._nextResultButton.disabled = true;
+        this._nextResultButton.title = WI.UIString("Find Next (%s)").format(WI.findNextKeyboardShortcut.displayName);;
         this._nextResultButton.addEventListener("click", this._nextResultButtonClicked.bind(this));
         this.element.appendChild(this._nextResultButton);

trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.js

@@ -82 +82 @@
 
         this.displayName = displayName;
+        this.tooltip = displayName;
         this.selectorArrows = showSelectorArrows;
     }
@@ -218 +219 @@
     }
 
+    get tooltip()
+    {
+        return this._tooltip;
+    }
+
+    set tooltip(x)
+    {
+        if (x === this._tooltip)
+            return;
+
+
+        this._tooltip = x;
+        this._updateElementTitleAndText();
+    }
+
+    get hideTooltip ()
+    {
+        return this._hideTooltip;
+    }
+
+    set hideTooltip(hide)
+    {
+        this._hideTooltip = hide;
+        this._updateElementTitleAndText();
+    }
+
     get previousSibling() { return this._previousSibling; }
     set previousSibling(newSlibling) { this._previousSibling = newSlibling || null; }
@@ -231 +258 @@
             truncatedDisplayName = truncatedDisplayName.substring(0, this._truncatedDisplayNameLength) + ellipsis;
 
-        this._element.title = this._displayName;
         this._titleContentElement.textContent = truncatedDisplayName;
+
+        if (this.hideTooltip)
+            this._element.title = "";
+        else
+            this._element.title = this._tooltip;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js

@@ -119 +119 @@
             this._components[i].hidden = false;
             this._components[i].forcedWidth = null;
+            this._components[i].hideTooltip = true;
         }
 
@@ -162 +163 @@
             var componentWidth = componentWidths[i];
 
+            this._components[i].hideTooltip = false;
+
             // Try to take the whole width we need to remove from each component.
             var forcedWidth = componentWidth - widthToRemove;

trunk/Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js

@@ -40 +40 @@
     }
 
+    titleDidChange()
+    {
+        this.element.title = this.title;
+    }
+
     // Private
 

trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js

@@ -67 +67 @@
         this._rebuildExecutionContextPathComponents();
 
+        WI.consoleDrawer.toggleButtonShortcutTooltip(this._toggleOrFocusKeyboardShortcut);
+        WI.consoleDrawer.addEventListener(WI.ConsoleDrawer.Event.CollapsedStateChanged, this._updateStyles, this);
+
         WI.Frame.addEventListener(WI.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextsChanged, this);
         WI.Frame.addEventListener(WI.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
@@ -76 +79 @@
         WI.targetManager.addEventListener(WI.TargetManager.Event.TargetAdded, this._targetAdded, this);
         WI.targetManager.addEventListener(WI.TargetManager.Event.TargetRemoved, this._targetRemoved, this);
-
-        WI.consoleDrawer.addEventListener(WI.ConsoleDrawer.Event.CollapsedStateChanged, this._updateStyles, this);
 
         WI.TabBrowser.addEventListener(WI.TabBrowser.Event.SelectedTabContentViewDidChange, this._updateStyles, this);

trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js

@@ -32 +32 @@
 
         this.flattened = false;
+        this.tooltipHandledSeparately = true;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js

@@ -100 +100 @@
     set image(url) { this._iconElement.src = url || ""; }
 
-    get title() { return this._element.title || ""; }
-    set title(title) { this._element.title = title || ""; }
+    get title()
+    {
+        return this._title;
+    }
+
+    set title(title)
+    {
+        title = title || "";
+        if (this._title === title)
+            return;
+
+        this._title = title;
+        this.titleDidChange();
+    }
+
+    titleDidChange()
+    {
+        // Implemented by subclasses.
+    }
 };
 

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js

@@ -36 +36 @@
         this._placeholder = placeholder || false;
         this.editing = this._placeholder;
+        this.tooltipHandledSeparately = true;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js

@@ -42 +42 @@
     {
         return this._defaultToolTip;
+    }
+
+    set defaultToolTip(toolTip)
+    {
+        this._defaultToolTip = toolTip;
+
+        if (!this._toggled)
+            this.tooltip = this._defaultToolTip;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js

@@ -47 +47 @@
         this._statusImageElement.classList.add("status-image", "resolved");
         this.status = this._statusImageElement;
+        this.tooltipHandledSeparately = true;
 
         breakpoint.addEventListener(WI.XHRBreakpoint.Event.DisabledStateDidChange, this._updateStatus, this);