Merge branch 'canary' into 02-26-_dev-overlay_control_dark_theme_in_one_place

Author: huozhi

docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx

@@ -151,15 +151,7 @@ Debugging server-side code works similarly to client-side debugging. When search
 
 When you encounter an error, inspecting the source code can help trace the root cause of errors.
 
-Next.js will display a Node.js logo like a green button on the dev overlay. By clicking that button, the DevTools URL is copied to your clipboard. You can open a new browser tab with that URL to inspect the Next.js server process.
-
-<Image
-  alt="Copy DevTools url example"
-  srcLight="/docs/dark/copy-devtool-url-example.png"
-  srcDark="/docs/dark/copy-devtool-url-example.png"
-  width="1600"
-  height="594"
-/>
+Next.js will display a Node.js icon underneath the Next.js version indicator on the error overlay. By clicking that icon, the DevTools URL is copied to your clipboard. You can open a new browser tab with that URL to inspect the Next.js server process.
 
 ### Debugging on Windows
 

docs/01-app/04-api-reference/05-config/01-next-config-js/devIndicators.mdx

@@ -1,28 +1,26 @@
 ---
 title: devIndicators
-description: Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.
+description: Configuration options for the on-screen indicator that gives context about the current route you're viewing during development.
 ---
 
-{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
-
-<AppOnly>
-
-`devIndicators` allows you to configure the on-screen indicators that give context about the current route you're viewing during development.
+`devIndicators` allows you to configure the on-screen indicator that gives context about the current route you're viewing during development.
 
 ```ts filename="Types"
-  devIndicators: {
-    buildActivityPosition?: 'bottom-right'
+  devIndicators: false | {
+    position?: 'bottom-right'
     | 'bottom-left'
     | 'top-right'
-    | 'top-left', // defaults to 'bottom-right'
+    | 'top-left', // defaults to 'bottom-left',
   },
 ```
 
+Setting `devIndicators` to `false` will hide the indicator, however Next.js will continue to surface any build or runtime errors that were encountered.
+
 ## Troubleshooting
 
-### Static route not showing the indicator
+### Indicator not marking a route as static
 
-If you expect a route to be static and the indicator is enabled but not showing, it's likely the route has opted out of static rendering.
+If you expect a route to be static and the indicator has marked it as dynamic, it's likely the route has opted out of static rendering.
 
 You can confirm if a route is [static](/docs/app/building-your-application/rendering/server-components#static-rendering-default) or [dynamic](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) by building your application using `next build --debug`, and checking the output in your terminal. Static (or prerendered) routes will display a `○` symbol, whereas dynamic routes will display a `ƒ` symbol. For example:
 
@@ -35,6 +33,8 @@ Route (app)                              Size     First Load JS
 ƒ  (Dynamic)  server-rendered on demand
 ```
 
+<AppOnly>
+
 There are two reasons a route might opt out of static rendering:
 
 - The presence of [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-apis) which rely on runtime information.
@@ -46,20 +46,6 @@ Check your route for any of these conditions, and if you are not able to statica
 
 <PagesOnly>
 
-> **Good to know**: This indicator was removed in Next.js version 10.0.1. We recommend upgrading to the latest version of Next.js.
-
-When a page qualifies for [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization) we show an indicator to let you know.
-
-This is helpful since automatic static optimization can be very beneficial and knowing immediately in development if the page qualifies can be useful.
-
-In some cases this indicator might not be useful, like when working on electron applications. To remove it open `next.config.js` and disable the `autoPrerender` config in `devIndicators`:
-
-```js filename="next.config.js"
-module.exports = {
-  devIndicators: {
-    autoPrerender: false,
-  },
-}
-```
+When exporting [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) or [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props) from a page, it will be marked as dynamic.
 
 </PagesOnly>

packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx

@@ -71,7 +71,7 @@ export function CallStack({ frames, dialogResizerRef }: CallStackProps) {
             className="error-overlay-call-stack-ignored-list-toggle-button"
             onClick={onToggleIgnoreList}
           >
-            {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoreListLength} Ignored-listed Frames`}
+            {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoreListLength} Ignore-listed Frames`}
             <ChevronUpDown />
           </button>
         )}

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx

@@ -62,6 +62,7 @@ export const styles = `
     }
 
     &:disabled {
+      background-color: var(--color-gray-100);
       cursor: not-allowed;
     }
   }

packages/next/src/client/components/react-dev-overlay/ui/styles/colors.tsx

@@ -48,15 +48,15 @@ export function Colors() {
           --color-background-200: #fafafa;
 
           /* Syntax Light */
-          --color-syntax-comment: #666666;
+          --color-syntax-comment: #545454;
           --color-syntax-constant: #171717;
-          --color-syntax-function: #0068d6;
-          --color-syntax-keyword: #c01b5d;
-          --color-syntax-link: #067a6e;
-          --color-syntax-parameter: #ad4b00;
+          --color-syntax-function: #0054ad;
+          --color-syntax-keyword: #a51850;
+          --color-syntax-link: #066056;
+          --color-syntax-parameter: #8f3e00;
           --color-syntax-punctuation: #171717;
-          --color-syntax-string: #067a6e;
-          --color-syntax-string-expression: #067a6e;
+          --color-syntax-string: #036157;
+          --color-syntax-string-expression: #066056;
 
           /* Gray Scale Light */
           --color-gray-100: #f2f2f2;

packages/next/src/server/config-shared.ts

@@ -823,13 +823,13 @@ export interface NextConfig extends Record<string, any> {
     | false
     | {
         /**
-         * @deprecated The dev tools indicator has it enabled by default.
+         * @deprecated The dev tools indicator has it enabled by default. To disable, set `devIndicators` to `false`.
          * */
         appIsrStatus?: boolean
 
         /**
          * Show "building..." indicator in development
-         * @deprecated The dev tools indicator has it enabled by default.
+         * @deprecated The dev tools indicator has it enabled by default. To disable, set `devIndicators` to `false`.
          */
         buildActivity?: boolean