Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiCode/Block] Avoid recomputing code syntax colors #7486

3 changes: 3 additions & 0 deletions changelogs/upcoming/7486.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Performance**

- Improved the amount of recomputed styles being generated by `EuiCode` and `EuiCodeBlock`
14 changes: 8 additions & 6 deletions src/components/code/code.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@
import { css } from '@emotion/react';
import { logicalShorthandCSS } from '../../global_styling';
import { UseEuiTheme } from '../../services';
import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';

export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
export const euiCodeStyles = (
euiThemeContext: UseEuiTheme,
euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
) => {
const { euiTheme } = euiThemeContext;
const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);

return {
/*
Expand All @@ -23,12 +25,12 @@ export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
font-family: ${euiTheme.font.familyCode};
font-size: 0.9em; /* 1 */
${logicalShorthandCSS('padding', '0.2em 0.5em')} /* 1 */
background: ${euiCodeSyntax.backgroundColor};
background: ${euiCodeSyntaxVariables.backgroundColor};
border-radius: ${euiTheme.border.radius.small};
font-weight: ${euiTheme.font.weight.bold};
color: ${euiCodeSyntax.inlineCodeColor};
color: ${euiCodeSyntaxVariables.inlineCodeColor};

${euiCodeSyntaxTokens(euiThemeContext)}
${euiCodeSyntaxVariables.tokensCss}
`,
transparentBackground: css`
background: transparent;
Expand Down
4 changes: 2 additions & 2 deletions src/components/code/code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
getHtmlContent,
} from './utils';
import { useEuiTheme } from '../../services';
import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
import { euiCodeStyles } from './code.styles';

export type EuiCodeProps = EuiCodeSharedProps;
Expand Down Expand Up @@ -46,8 +47,7 @@ export const EuiCode: FunctionComponent<EuiCodeProps> = ({

const classes = classNames('euiCode', className);

const euiTheme = useEuiTheme();
const styles = euiCodeStyles(euiTheme);
const styles = euiCodeStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
const cssStyles = [
styles.euiCode,
transparentBackground && styles.transparentBackground,
Expand Down
21 changes: 13 additions & 8 deletions src/components/code/code_block.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,23 @@ import {
mathWithUnits,
} from '../../global_styling';
import { UseEuiTheme } from '../../services';
import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';

export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';

export const euiCodeBlockStyles = (
euiThemeContext: UseEuiTheme,
euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
) => {
const { euiTheme } = euiThemeContext;
const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);

return {
euiCodeBlock: css`
max-inline-size: 100%;
display: block;
position: relative;
background: ${euiCodeSyntax.backgroundColor};
background: ${euiCodeSyntaxVariables.backgroundColor};

${euiCodeSyntaxTokens(euiThemeContext)}
${euiCodeSyntaxVariables.tokensCss}
`,
// Font size
s: css`
Expand Down Expand Up @@ -131,15 +134,17 @@ export const euiCodeBlockPreStyles = (euiThemeContext: UseEuiTheme) => {
};
};

export const euiCodeBlockCodeStyles = (euiThemeContext: UseEuiTheme) => {
export const euiCodeBlockCodeStyles = (
euiThemeContext: UseEuiTheme,
euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
) => {
const { euiTheme } = euiThemeContext;
const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);

return {
euiCodeBlock__code: css`
font-family: ${euiTheme.font.familyCode};
font-size: inherit;
color: ${euiCodeSyntax.color};
color: ${euiCodeSyntaxVariables.color};
display: block;
`,
isVirtualized: css`
Expand Down
8 changes: 5 additions & 3 deletions src/components/code/code_block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
euiCodeBlockPreStyles,
euiCodeBlockCodeStyles,
} from './code_block.styles';
import { useEuiCodeSyntaxVariables } from './code_syntax.styles';

// Based on observed line height for non-virtualized code blocks
const fontSizeToRowHeightMap = {
Expand Down Expand Up @@ -122,6 +123,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
...rest
}) => {
const euiTheme = useEuiTheme();
const euiCodeSyntaxVariables = useEuiCodeSyntaxVariables();
const language = useMemo(
() => checkSupportedLanguage(_language),
[_language]
Expand Down Expand Up @@ -175,7 +177,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
const hasControls = !!(copyButton || fullScreenButton);
const hasBothControls = !!(copyButton && fullScreenButton);

const styles = euiCodeBlockStyles(euiTheme);
const styles = euiCodeBlockStyles(euiTheme, euiCodeSyntaxVariables);
const cssStyles = [
styles.euiCodeBlock,
styles[fontSize],
Expand Down Expand Up @@ -236,7 +238,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
]);

const codeProps = useMemo(() => {
const styles = euiCodeBlockCodeStyles(euiTheme);
const styles = euiCodeBlockCodeStyles(euiTheme, euiCodeSyntaxVariables);
const cssStyles = [
styles.euiCodeBlock__code,
isVirtualized && styles.isVirtualized,
Expand All @@ -248,7 +250,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
'data-code-language': language,
...rest,
};
}, [language, euiTheme, isVirtualized, rest]);
}, [language, euiTheme, euiCodeSyntaxVariables, isVirtualized, rest]);

return (
<div
Expand Down
10 changes: 6 additions & 4 deletions src/components/code/code_block_controls.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,21 @@
import { css } from '@emotion/react';
import { euiPaddingSize } from '../../global_styling';
import { UseEuiTheme } from '../../services';
import { euiCodeSyntaxColors } from './code_syntax.styles';
import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';

export const euiCodeBlockControlsStyles = (euiThemeContext: UseEuiTheme) => {
export const euiCodeBlockControlsStyles = (
euiThemeContext: UseEuiTheme,
euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
) => {
const { euiTheme } = euiThemeContext;
const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);

return {
euiCodeBlock__controls: css`
position: absolute;
display: flex;
flex-direction: column;
gap: ${euiTheme.size.xs};
background: ${euiCodeSyntax.backgroundColor};
background: ${euiCodeSyntaxVariables.backgroundColor};
`,
offset: {
none: css`
Expand Down
7 changes: 5 additions & 2 deletions src/components/code/code_block_controls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,17 @@
import React, { FC, Fragment, ReactNode } from 'react';
import { useEuiTheme } from '../../services';
import type { EuiCodeBlockPaddingSize } from './code_block';
import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
import { euiCodeBlockControlsStyles } from './code_block_controls.styles';

export const EuiCodeBlockControls: FC<{
controls: ReactNode[];
paddingSize: EuiCodeBlockPaddingSize;
}> = ({ paddingSize, controls }) => {
const euiTheme = useEuiTheme();
const styles = euiCodeBlockControlsStyles(euiTheme);
const styles = euiCodeBlockControlsStyles(
useEuiTheme(),
useEuiCodeSyntaxVariables()
);
const cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];

const hasControls = controls.some((control) => !!control);
Expand Down
5 changes: 2 additions & 3 deletions src/components/code/code_block_full_screen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { useEuiI18n } from '../i18n';
import { EuiButtonIcon } from '../button';
import { EuiFocusTrap } from '../focus_trap';
import { EuiOverlayMask } from '../overlay_mask';
import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
import { euiCodeBlockStyles } from './code_block.styles';

/**
Expand Down Expand Up @@ -91,9 +92,7 @@ export const useFullScreen = ({
export const EuiCodeBlockFullScreenWrapper: FunctionComponent<
PropsWithChildren
> = ({ children }) => {
const euiThemeContext = useEuiTheme();

const styles = euiCodeBlockStyles(euiThemeContext);
const styles = euiCodeBlockStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
const cssStyles = [
styles.euiCodeBlock,
styles.l, // Force fullscreen to use large font
Expand Down
Loading
Loading