Bug 200801 – results.webkit.org: Add ToolTips

• Component: Tools / Tests
• Status: RESOLVED FIXED

[Jonathan Bedard]

We want tool tip text boxes when the user hovers over scale labels and dots.

[Jonathan Bedard]

Created attachment 376450 [details]
Patch

[Aakash Jain]

How does it look like? Can you provide any screenshots, or sample run.

[Jonathan Bedard]

Created attachment 376513 [details]
ToolTip for dot

[Jonathan Bedard]

Created attachment 376514 [details]
ToolTip for scale

[Aakash Jain]

@zhifei can you please have a look at it?

[Zhifei Fang]

(In reply to Aakash Jain from comment #5)
> @zhifei can you please have a look at it?

I will

[Zhifei Fang]

Comment on attachment 376450 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=376450&action=review

> Tools/resultsdbpy/resultsdbpy/view/static/css/tooltip.css:26
> +.tooltip {

Based on this:
<div class="tooltip-arrow-up" ref="${this.arrow}"></div>
     <div class="tooltip" ref="${this.ref}">
 </div>

.tooltip should be .tooltip-content
.tooltip-arrow-up and .tooltip-arrow-down should be a mix-in.
Using a .tooltip class to deduplicate the style for .tooltip-arrow-up  .tooltip-arrow-down

.tooltip {
    z-index: 50;
    position: absolute;
    opacity: 80%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.tooltip.arrow-up {
    border-color: transparent transparent #cccd transparent;
}

.tooltip.arrow-down {
    border-color: #cccd transparent transparent transparent;
}

.tooltip-content {
    z-index: 50;
    position: absolute;
    -webkit-backdrop-filter: blur(10px) brightness(88%);
    backdrop-filter: blur(10px) brightness(88%);
    color: var(--boldInverseColor);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: var(--smallSize);
    list-style: none;
    max-width: 600px;
}

> Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:355
> +                    {x: dots[currentDotIndex]._dotCenter.x, y: dots[currentDotIndex]._dotCenter.y - 3 * radius / 2},

This kind of supervised me, I guess I may have something wrong somewhere, let's keep ASIS, and I will look deep into it.

> Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:709
> +            now.tipPoints = [{

We should put this in the mouse move detect function. Adding more calculation in the render cycle will make it slow.

> Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:753
> +            let elementForMouseMove = null;

You don't need this, you can access ref's element by using cavansRef.element. Once ref have been mounted, ref.element will have value.

[Zhifei Fang]

unofficially r=me

(In reply to Zhifei Fang from comment #7)
> Comment on attachment 376450 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=376450&action=review
> 
> > Tools/resultsdbpy/resultsdbpy/view/static/css/tooltip.css:26
> > +.tooltip {
> 
> Based on this:
> <div class="tooltip-arrow-up" ref="${this.arrow}"></div>
>      <div class="tooltip" ref="${this.ref}">
>  </div>
> 
> .tooltip should be .tooltip-content
> .tooltip-arrow-up and .tooltip-arrow-down should be a mix-in.
> Using a .tooltip class to deduplicate the style for .tooltip-arrow-up 
> .tooltip-arrow-down
> 
> .tooltip {
>     z-index: 50;
>     position: absolute;
>     opacity: 80%;
>     width: 0;
>     height: 0;
>     border-style: solid;
>     border-width: 15px;
>     -webkit-background-clip: padding-box;
>     background-clip: padding-box;
> }
> 
> .tooltip.arrow-up {
>     border-color: transparent transparent #cccd transparent;
> }
> 
> .tooltip.arrow-down {
>     border-color: #cccd transparent transparent transparent;
> }
> 
> .tooltip-content {
>     z-index: 50;
>     position: absolute;
>     -webkit-backdrop-filter: blur(10px) brightness(88%);
>     backdrop-filter: blur(10px) brightness(88%);
>     color: var(--boldInverseColor);
>     border: 1px solid #ccc;
>     border-radius: 5px;
>     padding: 5px;
>     font-size: var(--smallSize);
>     list-style: none;
>     max-width: 600px;
> }
> 
> > Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:355
> > +                    {x: dots[currentDotIndex]._dotCenter.x, y: dots[currentDotIndex]._dotCenter.y - 3 * radius / 2},
> 
> This kind of supervised me, I guess I may have something wrong somewhere,
> let's keep ASIS, and I will look deep into it.
> 
> > Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:709
> > +            now.tipPoints = [{
> 
> We should put this in the mouse move detect function. Adding more
> calculation in the render cycle will make it slow.
> 
> > Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:753
> > +            let elementForMouseMove = null;
> 
> You don't need this, you can access ref's element by using
> cavansRef.element. Once ref have been mounted, ref.element will have value.

[Jonathan Bedard]

Created attachment 376768 [details]
Patch

[Aakash Jain]

Comment on attachment 376768 [details]
Patch

rs=me

[Zhifei Fang]

(In reply to Jonathan Bedard from comment #9)
> Created attachment 376768 [details]
> Patch

unofficially rs=me

[Jonathan Bedard]

Created attachment 376783 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 376783 [details]
Patch

Clearing flags on attachment: 376783

Committed r248910: <https://trac.webkit.org/changeset/248910>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/54522021>