[webkit-reviews] review canceled: [Bug 200801] results.webkit.org: Add ToolTips : [Attachment 376450] Patch

[bugzilla-daemon at webkit.org]

Zhifei Fang <zhifei_fang at apple.com> has canceled Jonathan Bedard
<jbedard at apple.com>'s request for review:
Bug 200801: results.webkit.org: Add ToolTips
https://bugs.webkit.org/show_bug.cgi?id=200801

Attachment 376450: Patch

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




--- Comment #7 from Zhifei Fang <zhifei_fang at apple.com> ---
Comment on attachment 376450
  --> https://bugs.webkit.org/attachment.cgi?id=376450
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/TimelineCompone
nts.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/TimelineCompone
nts.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/TimelineCompone
nts.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.