Changeset 249111 in webkit

Timestamp:

Aug 26, 2019, 12:18:15 PM (7 years ago)

Author:

Jonathan Bedard

Message:

results.webkit.org: Allow clicking on the tooltip arrow
​https://bugs.webkit.org/show_bug.cgi?id=201103

Rubber-stamped by Aakash Jain.

By design, the arrow sits above the canvas and intercepts mouse events from it.
This will often make an element that has a tooltip unclickable.

• resultsdbpy/resultsdbpy/view/static/js/timeline.js:

(xAxisFromScale):
(TimelineFromEndpoint.prototype.render.onDotEnterFactory):
(TimelineFromEndpoint.prototype.render):

• resultsdbpy/resultsdbpy/view/static/js/tooltip.js:

(_ToolTip):
(_ToolTip.prototype.toString): Trigger onClick callback when the arrow is clicked.
(_ToolTip.prototype.set): Set the onClick callback.

Location:

trunk/Tools

Files:

• ChangeLog (modified) (1 diff)
• resultsdbpy/resultsdbpy/view/static/js/timeline.js (modified) (3 diffs)
• resultsdbpy/resultsdbpy/view/static/js/tooltip.js (modified) (4 diffs)

trunk/Tools/ChangeLog

@@ +1 @@
+2019-08-26  Jonathan Bedard  <jbedard@apple.com>
+
+        results.webkit.org: Allow clicking on the tooltip arrow
+        https://bugs.webkit.org/show_bug.cgi?id=201103
+
+        Rubber-stamped by Aakash Jain.
+
+        By design, the arrow sits above the canvas and intercepts mouse events from it.
+        This will often make an element that has a tooltip unclickable.
+
+        * resultsdbpy/resultsdbpy/view/static/js/timeline.js:
+        (xAxisFromScale):
+        (TimelineFromEndpoint.prototype.render.onDotEnterFactory):
+        (TimelineFromEndpoint.prototype.render):
+        * resultsdbpy/resultsdbpy/view/static/js/tooltip.js:
+        (_ToolTip):
+        (_ToolTip.prototype.toString): Trigger onClick callback when the arrow is clicked.
+        (_ToolTip.prototype.set): Set the onClick callback.
+
 2019-08-26  Aakash Jain  <aakash_jain@apple.com>
 

trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js

@@ -206 +206 @@
     }
 
+    function onScaleClick(node) {
+        if (!node.label.id)
+            return;
+        let params = {
+            branch: node.label.branch ? [node.label.branch] : queryToParams(document.URL.split('?')[1]).branch,
+            uuid: [node.label.uuid],
+        }
+        if (!params.branch)
+            delete params.branch;
+        const query = paramsToQuery(params);
+        window.open(`/commit?${query}`, '_blank');
+    }
+
     return Timeline.CanvasXAxisComponent(scaleForRepository(scale), {
         isTop: isTop,
         height: 130,
-        onScaleClick: (node) => {
-            if (!node.label.id)
-                return;
-            let params = {
-                branch: node.label.branch ? [node.label.branch] : queryToParams(document.URL.split('?')[1]).branch,
-                uuid: [node.label.uuid],
-            }
-            if (!params.branch)
-                delete params.branch;
-            const query = paramsToQuery(params);
-            window.open(`/commit?${query}`, '_blank');
-        },
+        onScaleClick: onScaleClick,
         onScaleEnter: (node, event, canvas) => {
             const scrollDelta = document.documentElement.scrollTop || document.body.scrollTop;
@@ -231 +233 @@
                 node.tipPoints.map((point) => {
                     return {x: canvas.x + point.x, y: canvas.y + scrollDelta + point.y};
-                })
+                }),
+                (event) => {return onScaleClick(node);},
             );
         },
@@ -621 +624 @@
                     data.tipPoints.map((point) => {
                         return {x: canvas.x + point.x, y: canvas.y + scrollDelta + point.y};
-                    })
+                    }),
+                    (event) => {onDotClickFactory(configuration)(data);},
                 );
             }

trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/tooltip.js

@@ -36 +36 @@
         this.ref = null;
         this.arrow = null;
+        this.onArrowClick = null;
     }
     toString() {
@@ -100 +101 @@
                 if (!state.direction || !state.location) {
                     element.style.display = 'none';
+                    element.onclick = null;
+                    element.style.cursor = null;
                     return;
+                }
+
+                if (self.onArrowClick) {
+                    element.onclick = self.onArrowClick;
+                    element.style.cursor = 'pointer';
+                } else {
+                    element.onclick = null;
+                    element.style.cursor = null;
                 }
 
@@ -117 +128 @@
             </div>`;
     }
-    set(content, points) {
+    set(content, points, onArrowClick = null) {
         if (!this.ref) {
             console.error('Cannot set ToolTip content, no tooltip on the page');
@@ -126 +137 @@
             return;
         }
-        
+        this.onArrowClick = onArrowClick;
         this.ref.setState({content: content, points: points});
     }