diff --git a/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx b/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx index 8a7a6f9c6a4f2..6664ddb7f6a57 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx @@ -108,7 +108,6 @@ export const CODE_FRAME_STYLES = ` --code-frame-padding: 12px; --code-frame-line-height: var(--size-16); background-color: var(--color-background-200); - overflow: hidden; color: var(--color-gray-1000); text-overflow: ellipsis; border: 1px solid var(--color-gray-400); diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/devtools-panel-tab.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/devtools-panel-tab.tsx index 7b3c379027b23..f51121d8f10fa 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/devtools-panel-tab.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/devtools-panel-tab.tsx @@ -1,5 +1,5 @@ import type { DevToolsPanelTabType } from '../devtools-panel' -import type { Corners } from '../../../shared' +import type { Corners, OverlayState } from '../../../shared' import type { DebugInfo } from '../../../../shared/types' import type { ReadyRuntimeError } from '../../../utils/get-error-by-type' import type { HydrationErrorState } from '../../../../shared/hydration-error' @@ -16,6 +16,7 @@ export function DevToolsPanelTab({ debugInfo, runtimeErrors, getSquashedHydrationErrorDetails, + buildError, }: { activeTab: DevToolsPanelTabType devToolsPosition: Corners @@ -25,6 +26,7 @@ export function DevToolsPanelTab({ debugInfo: DebugInfo runtimeErrors: ReadyRuntimeError[] getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null + buildError: OverlayState['buildError'] }) { switch (activeTab) { case 'settings': @@ -44,6 +46,7 @@ export function DevToolsPanelTab({ debugInfo={debugInfo} runtimeErrors={runtimeErrors} getSquashedHydrationErrorDetails={getSquashedHydrationErrorDetails} + buildError={buildError} /> ) default: diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab-content.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab-content.tsx new file mode 100644 index 0000000000000..283c47e0db786 --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab-content.tsx @@ -0,0 +1,174 @@ +import type { OverlayState } from '../../../../shared' +import type { DebugInfo } from '../../../../../shared/types' +import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type' +import type { ErrorType } from '../../../errors/error-type-label/error-type-label' + +import { Suspense, useMemo, useState } from 'react' + +import { + GenericErrorDescription, + HydrationErrorDescription, +} from '../../../../container/errors' +import { EnvironmentNameLabel } from '../../../errors/environment-name-label/environment-name-label' +import { ErrorMessage } from '../../../errors/error-message/error-message' +import { ErrorOverlayToolbar } from '../../../errors/error-overlay-toolbar/error-overlay-toolbar' +import { ErrorTypeLabel } from '../../../errors/error-type-label/error-type-label' +import { IssueFeedbackButton } from '../../../errors/error-overlay-toolbar/issue-feedback-button' +import { Terminal } from '../../../terminal' +import { HotlinkedText } from '../../../hot-linked-text' +import { PseudoHtmlDiff } from '../../../../container/runtime-error/component-stack-pseudo-html' +import { useFrames } from '../../../../utils/get-error-by-type' +import { CodeFrame } from '../../../code-frame/code-frame' +import { CallStack } from '../../../call-stack/call-stack' +import { NEXTJS_HYDRATION_ERROR_LINK } from '../../../../../shared/react-19-hydration-error' +import { ErrorContentSkeleton } from '../../../../container/runtime-error/error-content-skeleton' +import { css } from '../../../../utils/css' + +export function IssuesTabContent({ + notes, + buildError, + hydrationWarning, + errorDetails, + activeError, + errorCode, + errorType, + debugInfo, +}: { + notes: string | null + buildError: OverlayState['buildError'] + hydrationWarning: string | null + errorDetails: { + hydrationWarning: string | null + notes: string | null + reactOutputComponentDiff: string | null + } + activeError: ReadyRuntimeError + errorCode: string | undefined + errorType: ErrorType + debugInfo: DebugInfo +}) { + if (buildError) { + return + } + + const errorMessage = hydrationWarning ? ( + + ) : ( + + ) + + return ( +
+
+
+ + + {activeError.error.environmentName && ( + + )} + + + } + /> +
+ +
+
+ {notes ? ( + <> +

+ {notes} +

+ + ) : null} + {hydrationWarning ? ( +

+ +

+ ) : null} +
+ {errorDetails.reactOutputComponentDiff ? ( + + ) : null} + }> + + +
+ ) +} + +/* Ported the content from container/runtime-error/index.tsx */ +function RuntimeError({ error }: { error: ReadyRuntimeError }) { + const [isIgnoreListOpen, setIsIgnoreListOpen] = useState(false) + const frames = useFrames(error) + + const ignoredFramesTally = useMemo(() => { + return frames.reduce((tally, frame) => tally + (frame.ignored ? 1 : 0), 0) + }, [frames]) + + const firstFrame = useMemo(() => { + const firstFirstPartyFrameIndex = frames.findIndex( + (entry) => + !entry.ignored && + Boolean(entry.originalCodeFrame) && + Boolean(entry.originalStackFrame) + ) + + return frames[firstFirstPartyFrameIndex] ?? null + }, [frames]) + + return ( + <> + {firstFrame && + firstFrame.originalStackFrame && + firstFrame.originalCodeFrame && ( + + )} + + {frames.length > 0 && ( + setIsIgnoreListOpen(!isIgnoreListOpen)} + ignoredFramesTally={ignoredFramesTally} + /> + )} + + ) +} + +// The components in this file shares the style with the Error Overlay. +export const DEVTOOLS_PANEL_TAB_ISSUES_CONTENT_STYLES = css` + [data-nextjs-devtools-panel-tab-issues-content-container] { + flex: 1; + display: flex; + flex-direction: column; + overflow-y: auto; + min-height: 0; + padding: 14px; + } +` diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab.tsx index d88484deba0fc..bebfc262bf58a 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab.tsx @@ -1,53 +1,54 @@ +import type { OverlayState } from '../../../../shared' import type { DebugInfo } from '../../../../../shared/types' import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type' import type { HydrationErrorState } from '../../../../../shared/hydration-error' import { IssuesTabSidebar } from './issues-tab-sidebar' -import { - GenericErrorDescription, - HydrationErrorDescription, -} from '../../../../container/errors' -import { EnvironmentNameLabel } from '../../../errors/environment-name-label/environment-name-label' -import { ErrorMessage } from '../../../errors/error-message/error-message' -import { ErrorOverlayToolbar } from '../../../errors/error-overlay-toolbar/error-overlay-toolbar' -import { ErrorTypeLabel } from '../../../errors/error-type-label/error-type-label' +import { IssuesTabContent } from './issues-tab-content' import { css } from '../../../../utils/css' import { useActiveRuntimeError } from '../../../../hooks/use-active-runtime-error' +import { Warning } from '../../../../icons/warning' export function IssuesTab({ debugInfo, runtimeErrors, getSquashedHydrationErrorDetails, + buildError, }: { debugInfo: DebugInfo runtimeErrors: ReadyRuntimeError[] getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null + buildError: OverlayState['buildError'] }) { const { - isLoading, errorCode, errorType, hydrationWarning, activeError, activeIdx, setActiveIndex, + notes, + errorDetails, } = useActiveRuntimeError({ runtimeErrors, getSquashedHydrationErrorDetails }) - if (isLoading) { - // TODO: better loading state - return null - } - if (!activeError) { - return null + return ( +
+
+
+ +
+

+ No Issues Found +

+

+ Issues will appear here when they occur. +

+
+
+ ) } - const errorMessage = hydrationWarning ? ( - - ) : ( - - ) - return (
-
-
-
- - - {activeError.error.environmentName && ( - - )} - - -
- -
- {/* TODO: Content */} -
Content
-
+ {/* This is the copy of the Error Overlay content. */} +
) } @@ -93,11 +80,45 @@ export const DEVTOOLS_PANEL_TAB_ISSUES_STYLES = css` min-height: 0; } - [data-nextjs-devtools-panel-tab-issues-content] { + [data-nextjs-devtools-panel-tab-issues-empty] { + display: flex; flex: 1; + padding: 12px; + min-height: 0; + } + + [data-nextjs-devtools-panel-tab-issues-empty-content] { display: flex; flex-direction: column; - overflow-y: auto; - min-height: 0; + align-items: center; + justify-content: center; + flex: 1; + border: 1px dashed var(--color-gray-alpha-500); + border-radius: 4px; + } + + [data-nextjs-devtools-panel-tab-issues-empty-icon] { + margin-bottom: 16px; + padding: 8px; + border: 1px solid var(--color-gray-alpha-400); + border-radius: 6px; + + background-color: var(--color-background-100); + display: flex; + align-items: center; + justify-content: center; + } + + [data-nextjs-devtools-panel-tab-issues-empty-title] { + color: var(--color-gray-1000); + font-size: 16px; + font-weight: 500; + line-height: var(--line-height-20); + } + + [data-nextjs-devtools-panel-tab-issues-empty-subtitle] { + color: var(--color-gray-900); + font-size: 14px; + line-height: var(--line-height-21); } ` diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx index c25191c6ea6cb..e170d03b4ced8 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx @@ -37,9 +37,7 @@ export function DevToolsPanel({ runtimeErrors: ReadyRuntimeError[] getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null }) { - const [activeTab, setActiveTab] = useState<'issues' | 'route' | 'settings'>( - 'settings' - ) + const [activeTab, setActiveTab] = useState('issues') const [vertical, horizontal] = state.devToolsPosition.split('-', 2) const onCloseDevToolsPanel = () => { @@ -155,6 +153,7 @@ export function DevToolsPanel({ getSquashedHydrationErrorDetails={ getSquashedHydrationErrorDetails } + buildError={state.buildError} /> diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx index 1fe7660635b7e..7aca01f9a68f0 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx @@ -7,14 +7,18 @@ import { RestartServerButton } from './restart-server-button' type ErrorOverlayToolbarProps = { error: Error debugInfo: DebugInfo | undefined + feedbackButton?: React.ReactNode } export function ErrorOverlayToolbar({ error, debugInfo, + feedbackButton, }: ErrorOverlayToolbarProps) { return ( + {/* TODO: Move the button inside and remove the feedback on the footer of the error overlay. */} + {feedbackButton} {process.env.__NEXT_BUNDLER_HAS_PERSISTENT_CACHE && ( )} diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/issue-feedback-button.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/issue-feedback-button.stories.tsx new file mode 100644 index 0000000000000..1d4eac1591c4b --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/issue-feedback-button.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { IssueFeedbackButton } from './issue-feedback-button' +import { withShadowPortal } from '../../../storybook/with-shadow-portal' + +const meta: Meta = { + component: IssueFeedbackButton, + parameters: { + layout: 'centered', + }, + decorators: [withShadowPortal], +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + errorCode: 'E001_FAKE', + }, +} diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/issue-feedback-button.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/issue-feedback-button.tsx new file mode 100644 index 0000000000000..fb42f38e6cc99 --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/issue-feedback-button.tsx @@ -0,0 +1,115 @@ +import { useCallback, useState } from 'react' + +import { ThumbsDown } from '../../../icons/thumbs/thumbs-down' +import { ThumbsUp } from '../../../icons/thumbs/thumbs-up' +import { cx } from '../../../utils/cx' +import { css } from '../../../utils/css' + +export function IssueFeedbackButton({ errorCode }: { errorCode: string }) { + const [votedMap, setVotedMap] = useState>({}) + const voted = votedMap[errorCode] + const disabled = process.env.__NEXT_TELEMETRY_DISABLED + + const handleFeedback = useCallback( + async (wasHelpful: boolean) => { + // Optimistically set feedback state without loading/error states to keep implementation simple + setVotedMap((prev) => ({ + ...prev, + [errorCode]: wasHelpful, + })) + + try { + const response = await fetch( + `${process.env.__NEXT_ROUTER_BASEPATH || ''}/__nextjs_error_feedback?${new URLSearchParams( + { + errorCode, + wasHelpful: wasHelpful.toString(), + } + )}` + ) + + if (!response.ok) { + // Handle non-2xx HTTP responses here if needed + console.error('Failed to record feedback on the server.') + } + } catch (error) { + console.error('Failed to record feedback:', error) + } + }, + [errorCode] + ) + + return ( +
+ +
+ +
+ ) +} + +export const ISSUE_FEEDBACK_BUTTON_STYLES = css` + [data-nextjs-issue-feedback-button-group] { + display: flex; + align-items: center; + border: 1px solid var(--color-gray-400); + border-radius: var(--rounded-full); + background: var(--color-background-100); + box-shadow: var(--shadow-small); + } + + [data-nextjs-issue-feedback-button-group] button { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + [data-nextjs-issue-feedback-button-group] button:first-child { + padding: 4px 3px 4px 5px; + border-radius: var(--rounded-full) 0 0 var(--rounded-full); + } + + [data-nextjs-issue-feedback-button-group] button:last-child { + padding: 4px 5px 4px 3px; + border-radius: 0 var(--rounded-full) var(--rounded-full) 0; + } + + [data-nextjs-issue-feedback-separator] { + width: 1px; + height: 100%; + background: var(--color-gray-400); + } +` diff --git a/packages/next/src/next-devtools/dev-overlay/container/runtime-error/error-content-skeleton.tsx b/packages/next/src/next-devtools/dev-overlay/container/runtime-error/error-content-skeleton.tsx new file mode 100644 index 0000000000000..2518551121623 --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/container/runtime-error/error-content-skeleton.tsx @@ -0,0 +1,203 @@ +import { css } from '../../utils/css' + +export function ErrorContentSkeleton() { + return ( + <> +
+
+
+
+
+
+
+
+
+
+
+
+
+

+ Call Stack{' '} + +

+ +
+
+ + ) +} + +export const ERROR_CONTENT_SKELETON_STYLES = css` + [data-nextjs-codeframe-skeleton] { + margin: 8px 0; + border-radius: 8px; + background-color: var(--color-background-200); + border: 1px solid var(--color-gray-400); + overflow: hidden; + } + + [data-nextjs-codeframe-skeleton-header] { + display: flex; + align-items: center; + padding: 12px; + border-bottom: 1px solid var(--color-gray-400); + border-radius: 8px 8px 0 0; + gap: 6px; + } + + [data-nextjs-codeframe-skeleton-icon] { + width: var(--size-16); + height: var(--size-16); + border-radius: 4px; + background: linear-gradient( + 90deg, + var(--color-gray-200) 25%, + var(--color-gray-100) 50%, + var(--color-gray-200) 75% + ); + background-size: 200% 100%; + animation: skeleton-shimmer 1.5s ease-in-out infinite; + flex-shrink: 0; + } + + [data-nextjs-codeframe-skeleton-header-bar] { + width: 42.9%; + } + + [data-nextjs-codeframe-skeleton-button] { + width: var(--size-16); + height: var(--size-16); + border-radius: var(--rounded-full); + background: linear-gradient( + 90deg, + var(--color-gray-200) 25%, + var(--color-gray-100) 50%, + var(--color-gray-200) 75% + ); + background-size: 200% 100%; + animation: skeleton-shimmer 1.5s ease-in-out infinite; + flex-shrink: 0; + } + + [data-nextjs-codeframe-skeleton-content] { + padding: 12px; + } + + [data-nextjs-codeframe-skeleton-line] { + height: var(--size-16); + border-radius: 100px; + background: linear-gradient( + 90deg, + var(--color-gray-200) 25%, + var(--color-gray-100) 50%, + var(--color-gray-200) 75% + ); + background-size: 200% 100%; + animation: skeleton-shimmer 1.5s ease-in-out infinite; + margin-bottom: 8px; + } + + [data-nextjs-codeframe-skeleton-line]:last-child { + margin-bottom: 0; + } + + [data-nextjs-codeframe-skeleton-line-1] { + width: 32.5%; + } + + [data-nextjs-codeframe-skeleton-line-2] { + width: 56.8%; + } + + [data-nextjs-codeframe-skeleton-line-3] { + width: 29.6%; + } + + [data-nextjs-call-stack-container] { + position: relative; + margin-top: 8px; + } + + [data-nextjs-call-stack-count-skeleton] { + display: flex; + justify-content: center; + align-items: center; + width: var(--size-20); + height: var(--size-20); + border-radius: var(--rounded-full); + background: linear-gradient( + 90deg, + var(--color-gray-200) 25%, + var(--color-gray-100) 50%, + var(--color-gray-200) 75% + ); + background-size: 200% 100%; + animation: skeleton-shimmer 1.5s ease-in-out infinite; + } + + [data-nextjs-call-stack-ignored-list-toggle-button-skeleton] { + all: unset; + display: flex; + align-items: center; + border-radius: 6px; + padding: 4px 6px; + margin-right: -6px; + } + + [data-nextjs-call-stack-skeleton-bar] { + height: var(--size-12); + width: 148px; + border-radius: 100px; + background: linear-gradient( + 90deg, + var(--color-gray-200) 25%, + var(--color-gray-100) 50%, + var(--color-gray-200) 75% + ); + background-size: 200% 100%; + animation: skeleton-shimmer 1.5s ease-in-out infinite; + } + + @keyframes skeleton-shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } + } + + /* Respect user's motion preferences */ + @media (prefers-reduced-motion: reduce) { + [data-nextjs-codeframe-skeleton-icon], + [data-nextjs-codeframe-skeleton-header-bar], + [data-nextjs-codeframe-skeleton-button], + [data-nextjs-codeframe-skeleton-line], + [data-nextjs-call-stack-count-skeleton], + [data-nextjs-call-stack-skeleton-bar] { + animation: none; + background: var(--color-gray-200); + } + } +` diff --git a/packages/next/src/next-devtools/dev-overlay/icons/warning.tsx b/packages/next/src/next-devtools/dev-overlay/icons/warning.tsx index 8ff102e5053d0..28c431adc33df 100644 --- a/packages/next/src/next-devtools/dev-overlay/icons/warning.tsx +++ b/packages/next/src/next-devtools/dev-overlay/icons/warning.tsx @@ -12,7 +12,7 @@ export function Warning(props: React.SVGProps) { fillRule="evenodd" clipRule="evenodd" d="M3.98071 1.125L1.125 3.98071L1.125 8.01929L3.98071 10.875H8.01929L10.875 8.01929V3.98071L8.01929 1.125H3.98071ZM3.82538 0C3.62647 0 3.4357 0.0790176 3.29505 0.21967L0.21967 3.29505C0.0790176 3.4357 0 3.62647 0 3.82538V8.17462C0 8.37353 0.0790178 8.5643 0.21967 8.70495L3.29505 11.7803C3.4357 11.921 3.62647 12 3.82538 12H8.17462C8.37353 12 8.5643 11.921 8.70495 11.7803L11.7803 8.70495C11.921 8.5643 12 8.37353 12 8.17462V3.82538C12 3.62647 11.921 3.4357 11.7803 3.29505L8.70495 0.21967C8.5643 0.0790177 8.37353 0 8.17462 0H3.82538ZM6.5625 2.8125V3.375V6V6.5625H5.4375V6V3.375V2.8125H6.5625ZM6 9C6.41421 9 6.75 8.66421 6.75 8.25C6.75 7.83579 6.41421 7.5 6 7.5C5.58579 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 5.58579 9 6 9Z" - fill="#EAEAEA" + fill="currentColor" /> ) diff --git a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx index 3a7117693c239..b8c8182971a62 100644 --- a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx +++ b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx @@ -32,6 +32,9 @@ import { CALL_STACK_STYLES } from '../components/call-stack/call-stack' import { DEVTOOLS_PANEL_TAB_ISSUES_STYLES } from '../components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab' import { DEVTOOLS_PANEL_TAB_ISSUES_SIDEBAR_STYLES } from '../components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab-sidebar' import { DEVTOOLS_PANEL_TAB_ISSUES_SIDEBAR_FRAME_SKELETON_STYLES } from '../components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab-sidebar-frame-skeleton' +import { DEVTOOLS_PANEL_TAB_ISSUES_CONTENT_STYLES } from '../components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab-content' +import { ISSUE_FEEDBACK_BUTTON_STYLES } from '../components/errors/error-overlay-toolbar/issue-feedback-button' +import { ERROR_CONTENT_SKELETON_STYLES } from '../container/runtime-error/error-content-skeleton' export function ComponentStyles() { return ( @@ -70,6 +73,9 @@ export function ComponentStyles() { ${DEVTOOLS_PANEL_TAB_ISSUES_STYLES} ${DEVTOOLS_PANEL_TAB_ISSUES_SIDEBAR_STYLES} ${DEVTOOLS_PANEL_TAB_ISSUES_SIDEBAR_FRAME_SKELETON_STYLES} + ${DEVTOOLS_PANEL_TAB_ISSUES_CONTENT_STYLES} + ${ISSUE_FEEDBACK_BUTTON_STYLES} + ${ERROR_CONTENT_SKELETON_STYLES} `} )