hide sources on mobile (dev)

crabnebula-dev · Jan 15, 2024 · 965fa1b · 965fa1b
1 parent 16ae869
commit 965fa1b
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 26 deletions.
diff --git a/crates/devtools/src/server.rs b/crates/devtools/src/server.rs
@@ -268,6 +268,7 @@ impl<R: Runtime> metadata_server::Metadata for MetaService<R> {
             os: std::env::consts::OS.to_string(),
             arch: std::env::consts::ARCH.to_string(),
             debug_assertions: cfg!(debug_assertions),
+            has_embedded_assets: self.app_handle.asset_resolver().iter().count() > 0,
         };
 
         Ok(Response::new(meta))

diff --git a/crates/wire/proto/meta.proto b/crates/wire/proto/meta.proto
@@ -36,4 +36,6 @@ message AppMetadata {
     string arch = 6;
     /// Whether the app was compiled with debug assertions enabled.
     bool debug_assertions = 7;
+    /// Whether the app has embedded assets or not.
+    bool has_embedded_assets = 8;
 }
diff --git a/crates/wire/src/generated/rs.devtools.meta.rs b/crates/wire/src/generated/rs.devtools.meta.rs
@@ -38,6 +38,9 @@ pub struct AppMetadata {
     /// / Whether the app was compiled with debug assertions enabled.
     #[prost(bool, tag = "7")]
     pub debug_assertions: bool,
+    /// / Whether the app has embedded assets or not.
+    #[prost(bool, tag = "8")]
+    pub has_embedded_assets: bool,
 }
 /// Generated server implementations.
 #[allow(clippy::all)]

diff --git a/tauri-v1/devtools/src/server.rs b/tauri-v1/devtools/src/server.rs
@@ -258,6 +258,7 @@ impl<R: Runtime> metadata_server::Metadata for MetaService<R> {
             os: std::env::consts::OS.to_string(),
             arch: std::env::consts::ARCH.to_string(),
             debug_assertions: cfg!(debug_assertions),
+            has_embedded_assets: self.app_handle.asset_resolver().iter().count() == 0,
         };
 
         Ok(Response::new(meta))

diff --git a/web-client/src/components/navigation.tsx b/web-client/src/components/navigation.tsx
@@ -1,21 +1,26 @@
-import { For } from "solid-js";
+import { For, Show } from "solid-js";
 import { A, useParams, useLocation } from "@solidjs/router";
 import clsx from "clsx";
+import { useMonitor } from "~/context/monitor-provider";
 
 const TABS = [
   {
+    id: "console",
     url: (host: string, port: string) => `/app/dash/${host}/${port}/console`,
     title: "Console",
   },
   {
+    id: "calls",
     url: (host: string, port: string) => `/app/dash/${host}/${port}/calls`,
     title: "Calls",
   },
   {
+    id: "sources",
     url: (host: string, port: string) => `/app/dash/${host}/${port}/sources`,
     title: "Sources",
   },
   {
+    id: "tauri",
     url: (host: string, port: string) => `/app/dash/${host}/${port}/tauri`,
     title: "Tauri",
   },
@@ -24,38 +29,49 @@ const TABS = [
 export function Navigation() {
   const { host, port } = useParams();
   const location = useLocation();
+  const { monitorData } = useMonitor();
   return (
     <nav>
       <ul class="flex border-b flex-start border-b-neutral-800">
         <For each={TABS}>
           {(tab) => (
-            <li>
-              <A
-                // Maximum a11y: respond to both Enter _and_ Space
-                // Buttons natively do this, anchor links not but we
-                // want these to behave like buttons also.
-                // Ref: https://www.w3.org/WAI/ARIA/apg/patterns/button
-                onkeydown={(e) => {
-                  if (e.key !== " ") {
-                    return;
-                  }
+            <Show
+              when={
+                // hide the Sources tab when the app does not have embedded assets on mobile
+                tab.id !== "sources" ||
+                monitorData.appMetadata?.hasEmbeddedAssets ||
+                (monitorData.appMetadata?.os !== "android" &&
+                  monitorData.appMetadata?.os !== "ios")
+              }
+            >
+              <li>
+                <A
+                  // Maximum a11y: respond to both Enter _and_ Space
+                  // Buttons natively do this, anchor links not but we
+                  // want these to behave like buttons also.
+                  // Ref: https://www.w3.org/WAI/ARIA/apg/patterns/button
+                  onkeydown={(e) => {
+                    if (e.key !== " ") {
+                      return;
+                    }
 
-                  e.preventDefault();
-                  e.currentTarget.click();
-                }}
-                href={tab.url(host, port)}
-                class={clsx(
-                  location.pathname === tab.url(host, port)
-                    ? "border-b-gray-500 hover:border-b-gray-400"
-                    : "border-b-gray-800 hover:border-b-gray-600",
+                    e.preventDefault();
+                    e.currentTarget.click();
+                  }}
+                  href={tab.url(host, port)}
+                  class={clsx(
+                    location.pathname === tab.url(host, port)
+                      ? "border-b-gray-500 hover:border-b-gray-400"
+                      : "border-b-gray-800 hover:border-b-gray-600",
 
-                  // The rest
-                  "flex -mb-[1px] items-center justify-center leading-none border-b py-2 px-4 hover:bg-gray-800 hover:border-gray-800"
-                )}
-              >
-                {tab.title}
-              </A>
-            </li>
+                    // The rest
+                    "flex -mb-[1px] items-center justify-center leading-none border-b py-2 px-4 hover:bg-gray-800 hover:border-gray-800"
+                  )}
+                >
+                  {tab.title}
+                </A>
+              </li>
+            </Show>
           )}
         </For>
       </ul>

diff --git a/web-client/src/context/monitor-provider.tsx b/web-client/src/context/monitor-provider.tsx
@@ -7,6 +7,7 @@ import {
 } from "solid-js";
 import { SetStoreFunction, createStore } from "solid-js/store";
 import {
+  getMetadata,
   getTauriConfig,
   getTauriMetrics,
   getVersions,
@@ -38,11 +39,16 @@ export function MonitorProvider(props: ProviderProps) {
   const [tauriMetrics] = getTauriMetrics(connectionStore.client.tauri);
   const [tauriConfig] = getTauriConfig(connectionStore.client.tauri);
   const [tauriVersions] = getVersions(connectionStore.client.tauri);
+  const [appMetadata] = getMetadata(connectionStore.client.meta);
 
   createEffect(() => {
     setMonitorData("tauriConfig", tauriConfig());
   });
 
+  createEffect(() => {
+    setMonitorData("appMetadata", appMetadata());
+  });
+
   createEffect(() => {
     const versions = tauriVersions();
     if (versions) {