Title: [249111] trunk/Tools
Revision
249111
Author
[email protected]
Date
2019-08-26 12:18:15 -0700 (Mon, 26 Aug 2019)

Log 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.

Modified Paths

Diff

Modified: trunk/Tools/ChangeLog (249110 => 249111)


--- trunk/Tools/ChangeLog	2019-08-26 19:08:57 UTC (rev 249110)
+++ trunk/Tools/ChangeLog	2019-08-26 19:18:15 UTC (rev 249111)
@@ -1,3 +1,22 @@
+2019-08-26  Jonathan Bedard  <[email protected]>
+
+        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  <[email protected]>
 
         [EWS] Do not append additional '(failure)' string at the end of custom failure message in EWS Buildbot

Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js (249110 => 249111)


--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js	2019-08-26 19:08:57 UTC (rev 249110)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js	2019-08-26 19:18:15 UTC (rev 249111)
@@ -205,21 +205,23 @@
         });
     }
 
+    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;
             ToolTip.set(
@@ -230,7 +232,8 @@
                 </div>`,
                 node.tipPoints.map((point) => {
                     return {x: canvas.x + point.x, y: canvas.y + scrollDelta + point.y};
-                })
+                }),
+                (event) => {return onScaleClick(node);},
             );
         },
         onScaleLeave: (event, canvas) => {
@@ -620,7 +623,8 @@
                     </div>`,
                     data.tipPoints.map((point) => {
                         return {x: canvas.x + point.x, y: canvas.y + scrollDelta + point.y};
-                    })
+                    }),
+                    (event) => {onDotClickFactory(configuration)(data);},
                 );
             }
         }

Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/tooltip.js (249110 => 249111)


--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/tooltip.js	2019-08-26 19:08:57 UTC (rev 249110)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/tooltip.js	2019-08-26 19:18:15 UTC (rev 249111)
@@ -35,6 +35,7 @@
     constructor() {
         this.ref = null;
         this.arrow = null;
+        this._onArrowClick_ = null;
     }
     toString() {
         const self = this;
@@ -99,9 +100,19 @@
             onStateUpdate: (element, stateDiff, state) => {
                 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;
+                }
+
                 element.classList = [`tooltip arrow-${state.direction}`];
                 element.style.left = `${state.location.x - 15}px`;
                 if (state.direction == 'down')
@@ -116,7 +127,7 @@
             <div class="tooltip-content" ref="${this.ref}">
             </div>`;
     }
-    set(content, points) {
+    set(content, points, _onArrowClick_ = null) {
         if (!this.ref) {
             console.error('Cannot set ToolTip content, no tooltip on the page');
             return;
@@ -125,7 +136,7 @@
             console.error('Tool tips require a location');
             return;
         }
-        
+        this._onArrowClick_ = onArrowClick;
         this.ref.setState({content: content, points: points});
     }
     unset() {
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to