Web Inspector: Remove redundant tooltips
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Mar 2018 19:35:00 +0000 (19:35 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Mar 2018 19:35:00 +0000 (19:35 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@229543 268f45cc-cd09-0410-ab3c-d52691b4dbfc

18 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js
Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js
Source/WebInspectorUI/UserInterface/Views/DOMNodeTreeElement.js
Source/WebInspectorUI/UserInterface/Views/FindBanner.js
Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.js
Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js
Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js
Source/WebInspectorUI/UserInterface/Views/QuickConsole.js
Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js
Source/WebInspectorUI/UserInterface/Views/TabBarItem.js
Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js
Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js

index fb23e96..f9b7550 100644 (file)
@@ -1,3 +1,84 @@
+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>
 
         Web Inspector: Sources: Open all resources in Sources tab instead of Resources/Debugger
index e54b866..59f15d8 100644 (file)
@@ -420,6 +420,8 @@ localizedStrings["Fill"] = "Fill";
 localizedStrings["Fill Mode"] = "Fill Mode";
 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";
 localizedStrings["Float and Clear"] = "Float and Clear";
@@ -474,6 +476,7 @@ localizedStrings["Heading Level"] = "Heading Level";
 localizedStrings["Heap Snapshot Object (%s)"] = "Heap Snapshot Object (%s)";
 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";
 localizedStrings["Hide compositing borders"] = "Hide compositing borders";
index 47e5eca..0294bca 100644 (file)
@@ -281,10 +281,6 @@ WI.contentLoaded = function()
     this._contentElement.setAttribute("role", "main");
     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));
 
     // FIXME: <https://webkit.org/b/151310> Web Inspector: Command-E should propagate to other search fields (including the system)
@@ -293,6 +289,10 @@ WI.contentLoaded = function()
     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"));
 
     this._consoleRepresentedObject = new WI.LogObject;
index 39948ed..9edfad6 100644 (file)
@@ -62,6 +62,7 @@ WI.BreakpointTreeElement = class BreakpointTreeElement extends WI.GeneralTreeEle
 
         this._iconAnimationLayerElement = document.createElement("span");
         this.iconElement.appendChild(this._iconAnimationLayerElement);
+        this.tooltipHandledSeparately = true;
     }
 
     // Public
index aab24da..7d03153 100644 (file)
@@ -34,8 +34,6 @@ WI.ButtonNavigationItem = class ButtonNavigationItem extends WI.NavigationItem
 
         this._enabled = true;
 
-        this.tooltip = toolTipOrLabel;
-
         this.element.addEventListener("click", this._mouseClicked.bind(this));
 
         if (label)
@@ -49,6 +47,9 @@ WI.ButtonNavigationItem = class ButtonNavigationItem extends WI.NavigationItem
         this._label = toolTipOrLabel;
 
         this.buttonStyle = this._image ? WI.ButtonNavigationItem.Style.Image : WI.ButtonNavigationItem.Style.Text;
+
+        if (this.buttonStyle === WI.ButtonNavigationItem.Style.Image)
+            this.tooltip = toolTipOrLabel;
     }
 
     // Public
index 8fb1b30..e58231a 100644 (file)
@@ -39,6 +39,7 @@ WI.ConsoleDrawer = class ConsoleDrawer extends WI.ContentBrowser
         this.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
 
         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(); });
         this.navigationBar.insertNavigationItem(this._toggleDrawerButton, 0);
@@ -50,6 +51,11 @@ WI.ConsoleDrawer = class ConsoleDrawer extends WI.ContentBrowser
 
     // Public
 
+    toggleButtonShortcutTooltip(keyboardShortcut)
+    {
+        this._toggleDrawerButton.defaultToolTip = WI.UIString("Hide Console (%s)").format(keyboardShortcut.displayName);
+    }
+
     get collapsed()
     {
         return this._collapsed;
index 926b139..be05e3d 100644 (file)
@@ -40,6 +40,7 @@ WI.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends WI.GeneralT
         this._statusImageElement = document.createElement("img");
         this._statusImageElement.classList.add("status-image", "resolved");
         this.status = this._statusImageElement;
+        this.tooltipHandledSeparately = true;
 
         breakpoint.addEventListener(WI.DOMBreakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
 
index fedc7ac..02e260e 100644 (file)
@@ -33,6 +33,7 @@ WI.DOMNodeTreeElement = class DOMNodeTreeElement extends WI.GeneralTreeElement
         super("dom-node", domNode.displayName, subtitle, domNode, {hasChildren: true});
 
         this.status = WI.linkifyNodeReferenceElement(domNode, WI.createGoToArrowButton());
+        this.tooltipHandledSeparately = true;
     }
 
     // Protected
index c2b27dd..b6981cf 100644 (file)
@@ -53,6 +53,7 @@ WI.FindBanner = class FindBanner extends WI.NavigationItem
         this._previousResultButton = document.createElement("button");
         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);
 
@@ -63,6 +64,7 @@ WI.FindBanner = class FindBanner extends WI.NavigationItem
         this._nextResultButton = document.createElement("button");
         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);
 
index 2465199..f66fbff 100644 (file)
@@ -81,6 +81,7 @@ WI.HierarchicalPathComponent = class HierarchicalPathComponent extends WI.Object
         this._selectorArrows = false;
 
         this.displayName = displayName;
+        this.tooltip = displayName;
         this.selectorArrows = showSelectorArrows;
     }
 
@@ -217,6 +218,32 @@ WI.HierarchicalPathComponent = class HierarchicalPathComponent extends WI.Object
         this._element.classList.toggle("show-selector-arrows", !!this._selectorArrows);
     }
 
+    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; }
     get nextSibling() { return this._nextSibling; }
@@ -230,8 +257,12 @@ WI.HierarchicalPathComponent = class HierarchicalPathComponent extends WI.Object
         if (this._truncatedDisplayNameLength && truncatedDisplayName.length > this._truncatedDisplayNameLength)
             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;
     }
 
     _updateSelectElement()
index ecfc1c0..ae87ac1 100644 (file)
@@ -118,6 +118,7 @@ WI.HierarchicalPathNavigationItem = class HierarchicalPathNavigationItem extends
         for (var i = 0; i < this._components.length; ++i) {
             this._components[i].hidden = false;
             this._components[i].forcedWidth = null;
+            this._components[i].hideTooltip = true;
         }
 
         if (expandOnly)
@@ -161,6 +162,8 @@ WI.HierarchicalPathNavigationItem = class HierarchicalPathNavigationItem extends
         for (var i = 0; i < this._components.length; ++i) {
             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;
             this._components[i].forcedWidth = forcedWidth;
index f35e430..9b0bcc7 100644 (file)
@@ -39,6 +39,11 @@ WI.PinnedTabBarItem = class PinnedTabBarItem extends WI.TabBarItem
         return new WI.PinnedTabBarItem(image, title);
     }
 
+    titleDidChange()
+    {
+        this.element.title = this.title;
+    }
+
     // Private
 
     _handleContextMenuEvent(event)
index 689fca5..9072afa 100644 (file)
@@ -66,6 +66,9 @@ WI.QuickConsole = class QuickConsole extends WI.View
 
         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,8 +79,6 @@ WI.QuickConsole = class QuickConsole extends WI.View
         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);
     }
 
index ab3c92e..791f495 100644 (file)
@@ -31,6 +31,7 @@ WI.StorageTreeElement = class StorageTreeElement extends WI.GeneralTreeElement
         super(classNames, title, subtitle, representedObject);
 
         this.flattened = false;
+        this.tooltipHandledSeparately = true;
     }
 
     // Public
index b095f84..c8676d0 100644 (file)
@@ -99,8 +99,25 @@ WI.TabBarItem = class TabBarItem extends WI.Object
     get image() { return this._iconElement.src; }
     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.
+    }
 };
 
 WI.TabBarItem.StyleClassName = "item";
index 5db0273..94a0713 100644 (file)
@@ -35,6 +35,7 @@ WI.TimelineTreeElement = class TimelineTreeElement extends WI.GeneralTreeElement
 
         this._placeholder = placeholder || false;
         this.editing = this._placeholder;
+        this.tooltipHandledSeparately = true;
     }
 
     // Public
index 464ef4b..72a5838 100644 (file)
@@ -43,6 +43,14 @@ WI.ToggleButtonNavigationItem = class ToggleButtonNavigationItem extends WI.Butt
         return this._defaultToolTip;
     }
 
+    set defaultToolTip(toolTip)
+    {
+        this._defaultToolTip = toolTip;
+
+        if (!this._toggled)
+            this.tooltip = this._defaultToolTip;
+    }
+
     get alternateToolTip()
     {
         return this._alternateToolTip;
index 44d71d2..f06c031 100644 (file)
@@ -46,6 +46,7 @@ WI.XHRBreakpointTreeElement = class XHRBreakpointTreeElement extends WI.GeneralT
         this._statusImageElement = document.createElement("img");
         this._statusImageElement.classList.add("status-image", "resolved");
         this.status = this._statusImageElement;
+        this.tooltipHandledSeparately = true;
 
         breakpoint.addEventListener(WI.XHRBreakpoint.Event.DisabledStateDidChange, this._updateStatus, this);