Fix 19570 tree chart not compliant strict csp styles

src/.eslintrc.yaml

@@ -34,10 +34,11 @@ parserOptions:
     sourceType: module
     ecmaFeatures:
         modules: true
-    project: "tsconfig.json"
+    project: "**/tsconfig.json"
 plugins: ["@typescript-eslint"]
 env:
     es6: false
+    browser: true
 globals:
     jQuery: false
     Promise: false

src/component/tooltip/TooltipHTMLContent.ts

@@ -73,34 +73,49 @@ function assembleArrow(
     borderColor = convertToColorString(borderColor);
     const arrowPos = mirrorPos(arrowPosition);
     const arrowSize = Math.max(Math.round(borderWidth) * 1.5, 6);
-    let positionStyle = '';
-    let transformStyle = CSS_TRANSFORM_VENDOR + ':';
+
+    const arrowClasses = ['tooltip-arrow'];
+    const transformClasses = [];
     let rotateDeg;
-    if (indexOf(['left', 'right'], arrowPos) > -1) {
-        positionStyle += 'top:50%';
-        transformStyle += `translateY(-50%) rotate(${rotateDeg = arrowPos === 'left' ? -225 : -45}deg)`;
+
+    if (['left', 'right'].includes(arrowPos)) {
+        arrowClasses.push('tooltip-arrow-horizontal');
+        transformClasses.push(`tooltip-arrow-rotate-${rotateDeg = arrowPos === 'left' ? -225 : -45}`);
     }
     else {
-        positionStyle += 'left:50%';
-        transformStyle += `translateX(-50%) rotate(${rotateDeg = arrowPos === 'top' ? 225 : 45}deg)`;
+        arrowClasses.push('tooltip-arrow-vertical');
+        transformClasses.push(`tooltip-arrow-rotate-${rotateDeg = arrowPos === 'top' ? 225 : 45}`);
+    }
+
+    function calculateArrowOffset(rotatedWH: number, borderWidth: number, arrowWH: number) {
+        return Math.round(
+            (
+                ((rotatedWH - Math.SQRT2 * borderWidth) / 2
+                    + Math.SQRT2 * borderWidth
+                    - (rotatedWH - arrowWH) / 2)
+                * 100
+            ) / 100
+        );
     }
+
+    function getColorClassName(color: ZRColor) {
+        const colorValue = convertToColorString(color);
+        return colorValue.replace(/[^a-zA-Z0-9]/g, '');
+    }
+
     const rotateRadian = rotateDeg * Math.PI / 180;
     const arrowWH = arrowSize + borderWidth;
     const rotatedWH = arrowWH * Math.abs(Math.cos(rotateRadian)) + arrowWH * Math.abs(Math.sin(rotateRadian));
-    const arrowOffset = Math.round(((rotatedWH - Math.SQRT2 * borderWidth) / 2
-        + Math.SQRT2 * borderWidth - (rotatedWH - arrowWH) / 2) * 100) / 100;
-    positionStyle += `;${arrowPos}:-${arrowOffset}px`;
-
-    const borderStyle = `${borderColor} solid ${borderWidth}px;`;
-    const styleCss = [
-        `position:absolute;width:${arrowSize}px;height:${arrowSize}px;z-index:-1;`,
-        `${positionStyle};${transformStyle};`,
-        `border-bottom:${borderStyle}`,
-        `border-right:${borderStyle}`,
-        `background-color:${backgroundColor};`
-    ];
-
-    return `<div style="${styleCss.join('')}"></div>`;
+    const arrowOffset = calculateArrowOffset(rotatedWH, borderWidth, arrowWH);
+
+    arrowClasses.push(`tooltip-arrow-offset-${arrowPos}-${arrowOffset}`);
+
+    const borderColorClass = `tooltip-arrow-border-color-${getColorClassName(borderColor)}`;
+    const backgroundColorClass = `tooltip-arrow-background-color-${getColorClassName(backgroundColor)}`;
+
+    const classes = [...arrowClasses, borderColorClass, backgroundColorClass, ...transformClasses];
+
+    return `<div class="${classes.join(' ')}"></div>`;
 }
 
 function assembleTransition(duration: number, onlyFade?: boolean): string {
@@ -418,24 +433,53 @@ class TooltipHTMLContent {
         borderColor?: ZRColor,
         arrowPosition?: TooltipOption['position']
     ) {
+        function clearContent(el: HTMLElement) {
+            while (el.firstChild) {
+                el.removeChild(el.firstChild);
+            }
+        }
+
+        function setTextContent(el: HTMLElement, text: string) {
+            clearContent(el);
+
+            const fragment = document.createRange().createContextualFragment(text);
+            while (fragment.firstChild) {
+                el.appendChild(fragment.firstChild);
+            }
+        }
+
+        function appendArrow(el: HTMLElement, arrow: string) {
+            if (!arrow) {
+                return;
+            }
+            const arrowEl = document.createElement('div');
+            arrowEl.classList.add('tooltip-arrow');
+            arrowEl.innerHTML = arrow;
+            el.appendChild(arrowEl);
+        }
+
         const el = this.el;
 
         if (content == null) {
-            el.innerHTML = '';
+            clearContent(el);
             return;
         }
 
         let arrow = '';
-        if (isString(arrowPosition) && tooltipModel.get('trigger') === 'item'
-            && !shouldTooltipConfine(tooltipModel)) {
+        if (
+            isString(arrowPosition)
+            && tooltipModel.get('trigger') === 'item'
+            && !shouldTooltipConfine(tooltipModel)
+        ) {
             arrow = assembleArrow(tooltipModel, borderColor, arrowPosition);
         }
         if (isString(content)) {
-            el.innerHTML = content + arrow;
+            setTextContent(el, content);
+            appendArrow(el, arrow);
         }
         else if (content) {
             // Clear previous
-            el.innerHTML = '';
+            clearContent(el);
             if (!isArray(content)) {
                 content = [content];
             }
@@ -448,9 +492,7 @@ class TooltipHTMLContent {
             if (arrow && el.childNodes.length) {
                 // no need to create a new parent element, but it's not supported by IE 10 and older.
                 // const arrowEl = document.createRange().createContextualFragment(arrow);
-                const arrowEl = document.createElement('div');
-                arrowEl.innerHTML = arrow;
-                el.appendChild(arrowEl);
+                appendArrow(el, arrow);
             }
         }
     }

src/component/tooltip/tooltipMarkup.ts

@@ -40,8 +40,6 @@ type RichTextStyle = {
 
 type TextStyle = string | RichTextStyle;
 
-const TOOLTIP_LINE_HEIGHT_CSS = 'line-height:1';
-
 // TODO: more textStyle option
 function getTooltipTextStyle(
     textStyle: TooltipOption['textStyle'],
@@ -60,24 +58,28 @@ function getTooltipTextStyle(
     if (renderMode === 'html') {
         // `textStyle` is probably from user input, should be encoded to reduce security risk.
         return {
-            // eslint-disable-next-line max-len
-            nameStyle: `font-size:${encodeHTML(nameFontSize + '')}px;color:${encodeHTML(nameFontColor)};font-weight:${encodeHTML(nameFontWeight + '')}`,
-            // eslint-disable-next-line max-len
-            valueStyle: `font-size:${encodeHTML(valueFontSize + '')}px;color:${encodeHTML(valueFontColor)};font-weight:${encodeHTML(valueFontWeight + '')}`
+            nameStyle: `tooltip-name-style tooltip-name-color-${nameFontColor.replace(
+                '#',
+                ''
+            )} tooltip-name-size-${nameFontSize} tooltip-name-weight-${nameFontWeight}`,
+            valueStyle: `tooltip-value-style tooltip-value-color-${valueFontColor.replace(
+                '#',
+                ''
+            )} tooltip-value-size-${valueFontSize} tooltip-value-weight-${valueFontWeight}`,
         };
     }
     else {
         return {
             nameStyle: {
                 fontSize: nameFontSize,
                 fill: nameFontColor,
-                fontWeight: nameFontWeight
+                fontWeight: nameFontWeight,
             },
             valueStyle: {
                 fontSize: valueFontSize,
                 fill: valueFontColor,
-                fontWeight: valueFontWeight
-            }
+                fontWeight: valueFontWeight,
+            },
         };
     }
 }
@@ -288,7 +290,7 @@ function buildSection(
     }
     else {
         return wrapBlockHTML(
-            `<div style="${nameStyle};${TOOLTIP_LINE_HEIGHT_CSS};">`
+            '<div class="tooltip-content">'
                 + encodeHTML(displayableHeader)
                 + '</div>'
                 + subMarkupText,
@@ -409,20 +411,40 @@ function wrapBlockHTML(
     encodedContent: string,
     topGap: number
 ): string {
-    const clearfix = '<div style="clear:both"></div>';
-    const marginCSS = `margin: ${topGap}px 0 0`;
-    return `<div style="${marginCSS};${TOOLTIP_LINE_HEIGHT_CSS};">`
-        + encodedContent + clearfix
-        + '</div>';
+    function createElementFromHTML(htmlString: string) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(htmlString.trim(), 'text/html');
+        const fragment = document.createDocumentFragment();
+
+        for (const child of doc.body.childNodes as any) {
+            fragment.appendChild(child);
+        }
+
+        return fragment;
+    }
+
+    const clearfixDiv = document.createElement('div');
+    clearfixDiv.classList.add('clearfix');
+
+    const contentDiv = document.createElement('div');
+    contentDiv.classList.add('tooltip-content');
+    contentDiv.classList.add(`margin-top-${topGap}`);
+
+    const contentFragment = createElementFromHTML(encodedContent);
+    contentDiv.appendChild(contentFragment);
+
+    contentDiv.appendChild(clearfixDiv);
+
+    return contentDiv.outerHTML;
 }
 
 function wrapInlineNameHTML(
     name: string,
     leftHasMarker: boolean,
     style: string
 ): string {
-    const marginCss = leftHasMarker ? 'margin-left:2px' : '';
-    return `<span style="${style};${marginCss}">`
+    const marginCss = leftHasMarker ? 'margin-left-2px' : '';
+    return `<span class="${style} ${marginCss}">`
         + encodeHTML(name)
         + '</span>';
 }
@@ -432,17 +454,34 @@ function wrapInlineValueHTML(
     alignRight: boolean,
     valueCloseToMarker: boolean,
     style: string
-): string {
+): HTMLElement {
     // Do not too close to marker, considering there are multiple values separated by spaces.
-    const paddingStr = valueCloseToMarker ? '10px' : '20px';
-    const alignCSS = alignRight ? `float:right;margin-left:${paddingStr}` : '';
+    const padding = valueCloseToMarker ? '10px' : '20px';
+    const alignClass = alignRight
+        ? 'tooltip-value-right'
+        : 'tooltip-value-left';
+    const styleClasses = `tooltip-value-container ${alignClass} ${padding}`;
+
     valueList = isArray(valueList) ? valueList : [valueList];
-    return (
-        `<span style="${alignCSS};${style}">`
-        // Value has commas inside, so use '  ' as delimiter for multiple values.
-        + map(valueList, value => encodeHTML(value)).join('&nbsp;&nbsp;')
-        + '</span>'
-    );
+
+    const valueSpan = document.createElement('span');
+    valueSpan.classList.add(...styleClasses.split(' '));
+
+    // Split the style argument by spaces and add each class separately
+    const styleClassList = style.split(' ');
+    valueSpan.classList.add(...styleClassList);
+
+    valueList.forEach((value) => {
+        const valueNode = document.createTextNode(encodeHTML(value));
+        valueSpan.appendChild(valueNode);
+
+        if (value !== valueList[valueList.length - 1]) {
+            const spacer = document.createTextNode('\u00A0\u00A0'); // Non-breaking spaces
+            valueSpan.appendChild(spacer);
+        }
+    });
+
+    return valueSpan;
 }
 
 function wrapInlineNameRichText(ctx: TooltipMarkupBuildContext, name: string, style: RichTextStyle): string {

src/util/format.ts

@@ -192,22 +192,19 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra
     } : (inOpt || {}) as GetTooltipMarkerOpt;
     const color = opt.color;
     const type = opt.type;
-    extraCssText = opt.extraCssText;
+    const extraCssClasses = opt.extraCssText ? opt.extraCssText.split(' ') : [];
     const renderMode = opt.renderMode || 'html';
 
     if (!color) {
         return '';
     }
 
     if (renderMode === 'html') {
-        return type === 'subItem'
-        ? '<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;'
-            + 'border-radius:4px;width:4px;height:4px;background-color:'
-            // Only support string
-            + encodeHTML(color) + ';' + (extraCssText || '') + '"></span>'
-        : '<span style="display:inline-block;margin-right:4px;'
-            + 'border-radius:10px;width:10px;height:10px;background-color:'
-            + encodeHTML(color) + ';' + (extraCssText || '') + '"></span>';
+        const markerClass = type === 'subItem' ? 'tooltip-marker-sub' : 'tooltip-marker';
+        const colorClass = `tooltip-marker-color-${color.replace('#', '')}`;
+        const classes = [markerClass, colorClass, ...extraCssClasses];
+
+        return `<span class="${classes.join(' ')}"></span>`;
     }
     else {
         // Should better not to auto generate style name by auto-increment number here.