Add remote debugging deprecation header (#2081)

huntie · web-flow · commit 29db2ac4c24f · 2023-09-20T17:10:15.000+02:00
diff --git a/packages/cli-debugger-ui/src/ui/index.css b/packages/cli-debugger-ui/src/ui/index.css
@@ -35,3 +35,32 @@ body.dark {
 input[type='checkbox'] {
   vertical-align: middle;
 }
+
+.warning {
+  box-sizing: border-box;
+  max-width: 800px;
+  padding: 16px;
+  margin-bottom: 1em;
+  border-left: 5px solid rgb(230, 167, 0);
+  border-radius: 6px;
+  background-color: rgb(255, 248, 230);
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
+  color: rgb(77, 56, 0);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.6;
+}
+
+.warning p {
+  margin-top: 0;
+}
+
+.warning p:last-child {
+  margin: 0;
+}
+
+.dark .warning {
+  background: rgb(77, 56, 0);
+  border-left-color: rgb(230, 167, 0);
+  color: rgb(255, 248, 230);
+}
diff --git a/packages/cli-debugger-ui/src/ui/index.html b/packages/cli-debugger-ui/src/ui/index.html
@@ -14,6 +14,27 @@
   </head>
   <body>
     <div class="content">
+      <div class="warning">
+        <p>
+          Remote JavaScript debugging (this workflow) is
+          <strong>deprecated</strong> in React Native 0.73 and will be removed
+          in React Native 0.74.
+        </p>
+        <p>
+          Please use the
+          <strong>Open Debugger</strong> workflow to debug apps using Hermes
+          directly. This can be accessed from the Dev Menu or by pressing
+          <kbd class="shortcut">j</kbd> in the CLI.
+        </p>
+        <p>
+          Learn more about debugging in React Native in the
+          <strong
+            ><a href="https://reactnative.dev/docs/debugging"
+              >refreshed docs</a
+            ></strong
+          > 📖.
+        </p>
+      </div>
       <label for="dark">
         <input type="checkbox" id="dark" onclick="Page.toggleDarkTheme()" />
         Dark Theme
