Refactor browser style. (All-Hands-AI#1358)

* delete useless assets and css class. * add waiting for page loaded (networkidle with 3s timeout)
nicelife729 · Apr 25, 2024 · bf5a2af · bf5a2af
1 parent 88397e0
commit bf5a2af
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 51 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -3,16 +3,4 @@
 @tailwind components;
 @tailwind utilities;
 
-.tab {
-  padding: 10px 20px;
-  cursor: pointer;
-  color: #ffffffb3;
-  font-weight: light;
-  position: relative;
-}
-
-.tab.active {
-  color: #fff;
-  font-weight: bolder;
-}
 
diff --git a/frontend/src/assets/assistant-avatar.png b/frontend/src/assets/assistant-avatar.png
diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
diff --git a/frontend/src/assets/user-avatar.png b/frontend/src/assets/user-avatar.png
diff --git a/frontend/src/components/Browser.test.tsx b/frontend/src/components/Browser.test.tsx
@@ -4,7 +4,7 @@ import { renderWithProviders } from "../../test-utils";
 
 describe("Browser", () => {
   it("renders a message if no screenshotSrc is provided", () => {
-    const { getByText } = renderWithProviders(<Browser />, {
+    const { getByText, getByAltText } = renderWithProviders(<Browser />, {
       preloadedState: {
         browser: {
           url: "https://example.com",
@@ -13,7 +13,8 @@ describe("Browser", () => {
       },
     });
 
-    expect(getByText(/no screenshot available/i)).toBeInTheDocument();
+    expect(getByText(/OpenDevin: Code Less, Make More./i)).toBeInTheDocument();
+    expect(getByAltText(/Blank Page/i)).toBeInTheDocument();
   });
 
   it("renders the url and a screenshot", () => {

diff --git a/frontend/src/components/Browser.tsx b/frontend/src/components/Browser.tsx
@@ -1,7 +1,24 @@
 import React from "react";
 import { useSelector } from "react-redux";
+import { HiOutlineMagnifyingGlass } from "react-icons/hi2";
+import { HiCursorClick } from "react-icons/hi";
 import { RootState } from "#/store";
 
+import logo from "../assets/logo.png";
+
+function BlankPage(): JSX.Element {
+  return (
+    <div className="h-full bg-slate-200 flex flex-col items-center justify-center">
+      <img src={logo} alt="Blank Page" className="w-28 h-28" />
+      <div className="h-8 flex items-center bg-slate-900 px-2 rounded-3xl ml-3 space-x-2">
+        <HiOutlineMagnifyingGlass size={20} />
+        <span>OpenDevin: Code Less, Make More.</span>
+        <HiCursorClick size={20} />
+      </div>
+    </div>
+  );
+}
+
 function Browser(): JSX.Element {
   const { url, screenshotSrc } = useSelector(
     (state: RootState) => state.browser,
@@ -13,19 +30,17 @@ function Browser(): JSX.Element {
       : `data:image/png;base64,${screenshotSrc || ""}`;
 
   return (
-    <div className="h-full m-2 bg-neutral-700 mockup-browser">
-      <div className="mockup-browser-toolbar">
-        <div className="input">{url}</div>
+    <div className="h-full w-full flex flex-col justify-evenly p-2 space-y-2">
+      <div className="w-full py-2 px-5 rounded-3xl bg-neutral-700 text-gray-200 truncate">
+        {url}
+      </div>
+      <div className="overflow-y-auto h-4/5 scrollbar-hide rounded-xl">
+        {screenshotSrc ? (
+          <img src={imgSrc} className="rounded-xl" alt="Browser Screenshot" />
+        ) : (
+          <BlankPage />
+        )}
       </div>
-      {screenshotSrc ? (
-        <img
-          src={imgSrc}
-          alt="Browser Screenshot"
-          style={{ maxWidth: "100%", height: "auto" }}
-        />
-      ) : (
-        <div>No screenshot available.</div>
-      )}
     </div>
   );
 }

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -25,22 +25,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-
-.editor-accordion h2 > button{
-  padding: 0;
-}
-
-.editor-accordion-title {
-  color: var(--bg-neutral-400) !important;
-}
-
-.editor-accordion-content {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-.editor-accordion-content ul {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
diff --git a/frontend/src/state/browserSlice.ts b/frontend/src/state/browserSlice.ts
@@ -4,8 +4,7 @@ export const initialState = {
   // URL of browser window (placeholder for now, will be replaced with the actual URL later)
   url: "https://github.com/OpenDevin/OpenDevin",
   // Base64-encoded screenshot of browser window (placeholder for now, will be replaced with the actual screenshot later)
-  screenshotSrc:
-    "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN0uGvyHwAFCAJS091fQwAAAABJRU5ErkJggg==",
+  screenshotSrc: "",
 };
 
 export const browserSlice = createSlice({

diff --git a/opendevin/action/browse.py b/opendevin/action/browse.py
@@ -26,6 +26,13 @@ async def run(self, controller: 'AgentController') -> BrowserOutputObservation:
                 browser = await p.chromium.launch()
                 page = await browser.new_page()
                 response = await page.goto(asked_url)
+                try:
+                    # domcontentloaded: Wait for the DOMContentLoaded event to be fired.
+                    # load: Wait for the load event to be fired.
+                    # networkidle: Wait until there are no more network connections
+                    await page.wait_for_load_state('networkidle', timeout=3000)
+                except TimeoutError:
+                    pass
                 # content = await page.content()
                 inner_text = await page.evaluate('() => document.body.innerText')
                 screenshot_bytes = await page.screenshot(full_page=True)
@@ -40,10 +47,7 @@ async def run(self, controller: 'AgentController') -> BrowserOutputObservation:
                 )
         except Exception as e:
             return BrowserOutputObservation(
-                content=str(e),
-                screenshot='',
-                error=True,
-                url=asked_url
+                content=str(e), screenshot='', error=True, url=asked_url
             )
 
     @property