Update web pages (#2354)

* extend descriptions and improve styling * s/capa explorer web/capa Explorer Web * set htmlWhitespaceSensitivity to ignore and reformat
mandiant · Sep 11, 2024 · e07ff1c · e07ff1c
1 parent f236afe
commit e07ff1c
Show file tree

Hide file tree

Showing 16 changed files with 86 additions and 52 deletions.
diff --git a/.github/workflows/web-deploy.yml b/.github/workflows/web-deploy.yml
@@ -33,7 +33,7 @@ jobs:
           path: './web/public'
 
   build-explorer:
-    name: Build capa explorer web
+    name: Build capa Explorer Web
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ capa detects capabilities in executable files.
 You run it against a PE, ELF, .NET module, shellcode file, or a sandbox report and it tells you what it thinks the program can do.
 For example, it might suggest that the file is a backdoor, is capable of installing services, or relies on HTTP to communicate.
 
-To interactively inspect capa results in your browser use the [capa explorer web](https://mandiant.github.io/capa/explorer/).
+To interactively inspect capa results in your browser use the [capa Explorer Web](https://mandiant.github.io/capa/explorer/).
 
 If you want to inspect or write capa rules, head on over to the [capa-rules repository](https://github.com/mandiant/capa-rules). Otherwise, keep reading.
 
@@ -89,12 +89,12 @@ Download stable releases of the standalone capa binaries [here](https://github.c
 
 To use capa as a library or integrate with another tool, see [doc/installation.md](https://github.com/mandiant/capa/blob/master/doc/installation.md) for further setup instructions.
 
-# capa explorer web
-The [capa explorer web](https://mandiant.github.io/capa/explorer/) enables you to interactively explore capa results in your web browser. Besides the online version you can download a standalone HTML file for local offline usage.
+# capa Explorer Web
+The [capa Explorer Web](https://mandiant.github.io/capa/explorer/) enables you to interactively explore capa results in your web browser. Besides the online version you can download a standalone HTML file for local offline usage.
 
-![capa explorer web screenshot](https://github.com/mandiant/capa/blob/master/doc/img/capa_web_explorer.png)
+![capa Explorer Web screenshot](https://github.com/mandiant/capa/blob/master/doc/img/capa_web_explorer.png)
 
-More details on the web UI is available in the [capa explorer web README](https://github.com/mandiant/capa/blob/master/web/explorer/README.md).
+More details on the web UI is available in the [capa Explorer Web README](https://github.com/mandiant/capa/blob/master/web/explorer/README.md).
 
 # example
 

diff --git a/capa/main.py b/capa/main.py
@@ -881,7 +881,7 @@ def main(argv: Optional[List[str]] = None):
         You can see the rule set here:
           https://github.com/mandiant/capa-rules
 
-        You can load capa JSON output to capa explorer web:
+        You can load capa JSON output to capa Explorer Web:
           https://github.com/mandiant/capa/explorer
 
         To provide your own rule set, use the `-r` flag:

diff --git a/web/explorer/.prettierrc.json b/web/explorer/.prettierrc.json
@@ -4,5 +4,6 @@
     "tabWidth": 4,
     "singleQuote": false,
     "printWidth": 120,
-    "trailingComma": "none"
+    "trailingComma": "none",
+    "htmlWhitespaceSensitivity": "ignore"
 }
diff --git a/web/explorer/DEVELOPMENT.md b/web/explorer/DEVELOPMENT.md
@@ -1,6 +1,6 @@
-# Development Guide for capa explorer web
+# Development Guide for capa Explorer Web
 
-This guide will help you set up the capa explorer web project for local development.
+This guide will help you set up the capa Explorer Web project for local development.
 
 ## Prerequisites
 
@@ -104,7 +104,7 @@ npm run format
 
 ## Working with PrimeVue Components
 
-capa explorer web uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the [PrimeVue documentation](https://primevue.org/vite) for available components and their usage.
+capa Explorer Web uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the [PrimeVue documentation](https://primevue.org/vite) for available components and their usage.
 
 ## Best Practices
 

diff --git a/web/explorer/README.md b/web/explorer/README.md
@@ -1,6 +1,6 @@
-# capa explorer web
+# capa Explorer Web
 
-capa explorer web is a browser-based user interface for exploring program capabilities identified by capa. It provides an intuitive and interactive way to analyze and visualize the results of capa analysis.
+capa Explorer Web is a browser-based user interface for exploring program capabilities identified by capa. It provides an intuitive and interactive way to analyze and visualize the results of capa analysis.
 
 ## Features
 
@@ -11,13 +11,13 @@ capa explorer web is a browser-based user interface for exploring program capabi
 
 ## Getting Started
 
-1. **Access the application**: Open capa explorer web in your web browser.
-   You can start using capa explorer web by accessing [https://mandiant.github.io/capa](https://mandiant.github.io/capa/explorer) or running it locally by downloading the offline release from the top right-hand corner and opening it in your web browser.
+1. **Access the application**: Open capa Explorer Web in your web browser.
+   You can start using capa Explorer Web by accessing [https://mandiant.github.io/capa](https://mandiant.github.io/capa/explorer) or running it locally by downloading the offline release from the top right-hand corner and opening it in your web browser.
 
 2. **Import capa results**:
 
     - Click on "Upload from local" to select a capa analysis document file from your computer (with a version higher than 7.0.0).
-      - You can generate the analysis document by running `capa.exe -j results.json sample.exe_`
+        - You can generate the analysis document by running `capa.exe -j results.json sample.exe_`
     - Or, paste a URL to a capa JSON file and click the arrow button to load it.
         - Like for the other import mechanisms, loading of both plain (`.json`) and GZIP compressed JSON (`.json.gz`) files is supported).
     - Alternatively, use the "Preview Static" or "Preview Dynamic" for sample data.
@@ -41,4 +41,4 @@ We welcome your feedback and contributions to improve the web-based capa explore
 
 ---
 
-For developers interested in building or contributing to capa explorer web, please refer to our [Development Guide](DEVELOPMENT.md).
+For developers interested in building or contributing to capa Explorer Web, please refer to our [Development Guide](DEVELOPMENT.md).
diff --git a/web/explorer/index.html b/web/explorer/index.html
@@ -4,8 +4,12 @@
         <meta charset="UTF-8" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>capa explorer web</title>
-        <script defer src="https://cloud.umami.is/script.js" data-website-id="0bb8ff9e-fbcc-4ee2-9f9f-b337a2e8cc7f"></script>
+        <title>capa Explorer Web</title>
+        <script
+            defer
+            src="https://cloud.umami.is/script.js"
+            data-website-id="0bb8ff9e-fbcc-4ee2-9f9f-b337a2e8cc7f"
+        ></script>
     </head>
     <body>
         <div id="app"></div>

diff --git a/web/explorer/src/components/BannerHeader.vue b/web/explorer/src/components/BannerHeader.vue
@@ -5,7 +5,7 @@
     >
         <div class="font-bold mr-8">This is an early release</div>
         <div class="align-items-center hidden lg:flex">
-            <span class="line-height-3">Please report any bugs, enhancements or features in the </span>
+            <span class="line-height-3">Please report any bugs, enhancements or features in the</span>
             <a
                 v-ripple
                 href="https://github.com/mandiant/capa/issues"

diff --git a/web/explorer/src/components/DescriptionPanel.vue b/web/explorer/src/components/DescriptionPanel.vue
@@ -3,33 +3,62 @@
         <div class="text-center">
             <h1>
                 <img src="@/assets/images/logo-full.png" alt="Capa: identify program capabilities" />
-                <h3 class="font-medium" style="color: rgb(176, 26, 26)">capa: identify program capabilities</h3>
+                <h3 class="font-medium" style="color: rgb(37, 147, 215)">capa: identify program capabilities</h3>
             </h1>
         </div>
         <div>
             <p class="text-xl p-3 max-w-75rem" style="max-width: 75ch">
-                capa explorer web is a web-based tool for exploring the capabilities identified in a program. It can be
-                used to search and display the rule matches in different viewing modes.
+                capa Explorer Web is a web-based tool to explore the capabilities identified by capa. This tool allows
+                you to interactively browse and display capa results in multiple viewing modes.
             </p>
         </div>
         <div class="bg-blue-50 border-round p-3 pb-4 text-center max-w-75rem mt-4">
             <p class="text-700 text-sm m-0">New to capa? Follow these quick steps to get started:</p>
             <p class="text-700 text-sm mb-3"></p>
             <ol class="text-left text-sm pl-4 mb-3">
-                <li class="mb-2">Install capa: <code>pip install flare-capa</code></li>
-                <li class="mb-2">Generate JSON output: <code>capa -j /path/to/file > result.json</code></li>
-                <li>Upload the JSON file here to explore the results</li>
+                <li class="mb-2">
+                    <a href="https://github.com/mandiant/capa/blob/master/doc/installation.md" class="underline">
+                        Install capa
+                    </a>
+                    , e.g.
+                    <ul>
+                        <li>
+                            download the latest
+                            <a href="https://github.com/mandiant/capa/releases" class="underline">
+                                standalone executable release
+                            </a>
+                        </li>
+                        <li>
+                            or run
+                            <code>$ pip install flare-capa</code>
+                        </li>
+                    </ul>
+                </li>
+                <li class="mb-2">
+                    Analyze a sample and save the JSON results:
+                    <ul>
+                        <li><code>$ capa -j /path/to/file > result.json</code></li>
+                    </ul>
+                </li>
+                <li>Load the JSON results file into capa Explorer Web</li>
             </ol>
             <p class="text-700 text-sm m-0">
                 For more detailed information, explore the
                 <a
-                    href="https://github.com/mandiant/capa"
+                    href="https://github.com/mandiant/capa/tree/master/web/explorer"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-blue-800 transition-colors duration-200"
+                    class="underline"
                 >
-                    capa GitHub repository</a
-                >.
+                    capa GitHub repository
+                </a>
+                .
+            </p>
+        </div>
+        <div>
+            <p class="text-base p-3 max-w-75rem">
+                You can download capa Explorer Web for offline usage via the download button in the top-right corner of
+                this page.
             </p>
         </div>
     </div>
@@ -39,7 +68,6 @@
 /* highlight inline code */
 code {
     background-color: #e2e8f0;
-    padding: 2px 4px;
     border-radius: 4px;
     font-family: monospace;
 }

diff --git a/web/explorer/src/components/MetadataPanel.vue b/web/explorer/src/components/MetadataPanel.vue
@@ -11,7 +11,7 @@
             </h1>
             <p class="text-xs mt-1 mb-0 text-white-alpha-70">
                 SHA256:
-                <a :href="`https://www.virustotal.com/gui/file/${sha256}`" target="_blank">{{ sha256 }} </a>
+                <a :href="`https://www.virustotal.com/gui/file/${sha256}`" target="_blank">{{ sha256 }}</a>
             </p>
         </div>
 
@@ -23,20 +23,20 @@
             <!-- OS • Program Format • Arch -->
             <div class="flex align-items-center text-sm m-0 line-height-3 text-white">
                 <span class="capitalize">{{ data.meta.analysis.os }}</span>
-                <span class="ml-2 mr-2 text-white-alpha-30"> • </span>
+                <span class="ml-2 mr-2 text-white-alpha-30">•</span>
                 <span class="uppercase">{{ data.meta.analysis.format }}</span>
-                <span class="ml-2 mr-2 text-white-alpha-30"> • </span>
+                <span class="ml-2 mr-2 text-white-alpha-30">•</span>
                 <span>{{ data.meta.analysis.arch === "i386" ? "i386" : data.meta.analysis.arch.toUpperCase() }}</span>
             </div>
             <!-- Flavor • Extractor • capa Version • Timestamp -->
             <div class="flex-wrap align-items-center text-sm m-0 line-height-3 text-white">
                 <span class="capitalize">
-                    {{ flavor }} analysis with {{ data.meta.analysis.extractor.split(/(Feature)?Extractor/)[0] }}</span
-                >
+                    {{ flavor }} analysis with {{ data.meta.analysis.extractor.split(/(Feature)?Extractor/)[0] }}
+                </span>
                 <!--- Extractor (e.g., CapeExtractor -> Cape, GhidraFeatureExtractor -> Ghidra, ... etc) -->
-                <span class="mx-2 text-white-alpha-30"> • </span>
+                <span class="mx-2 text-white-alpha-30">•</span>
                 <span>capa v{{ data.meta.version }}</span>
-                <span class="mx-2 text-white-alpha-30"> • </span>
+                <span class="mx-2 text-white-alpha-30">•</span>
                 <span>{{ new Date(data.meta.timestamp).toLocaleString() }}</span>
             </div>
         </div>

diff --git a/web/explorer/src/components/NavBar.vue b/web/explorer/src/components/NavBar.vue
@@ -17,10 +17,10 @@ const isBundle = import.meta.env.MODE === "bundle";
                 <a
                     v-if="!isBundle"
                     v-ripple
-                    v-tooltip.bottom="'Download capa explorer web for offline usage'"
+                    v-tooltip.bottom="'Download capa Explorer Web for offline usage'"
                     href="capa-explorer-web.zip"
                     download="capa-explorer-web.zip"
-                    aria-label="Download capa explorer web release"
+                    aria-label="Download capa Explorer Web release"
                 >
                     <i class="pi pi-download text-xl"></i>
                 </a>

diff --git a/web/explorer/src/components/ProcessCapabilities.vue b/web/explorer/src/components/ProcessCapabilities.vue
@@ -22,7 +22,7 @@
                         >
                             {{ slotProps.node.data.processname }}
                         </span>
-                        <span class="ml-2"> - PID: {{ slotProps.node.data.pid }} </span>
+                        <span class="ml-2">- PID: {{ slotProps.node.data.pid }}</span>
                         <span v-if="slotProps.node.data.uniqueMatchCount > 0" class="font-italic ml-2 match-count">
                             ({{ slotProps.node.data.uniqueMatchCount }} unique
                             {{ slotProps.node.data.uniqueMatchCount > 1 ? "matches" : "match" }})
@@ -53,9 +53,9 @@
         >
             <div v-for="rule in currentNode.data.uniqueRules" :key="rule.name">
                 • {{ rule.name }}
-                <span class="font-italic match-count"
-                    >({{ rule.matchCount }} {{ rule.scope }} {{ rule.matchCount > 1 ? "matches" : "match" }})</span
-                >
+                <span class="font-italic match-count">
+                    ({{ rule.matchCount }} {{ rule.scope }} {{ rule.matchCount > 1 ? "matches" : "match" }})
+                </span>
                 <LibraryTag v-if="rule.lib" />
             </div>
         </div>

diff --git a/web/explorer/src/components/RuleMatchesTable.vue b/web/explorer/src/components/RuleMatchesTable.vue
@@ -67,7 +67,7 @@
                 />
             </template>
             <template #body="{ node }">
-                <span class="font-monospace text-sm"> {{ node.data.address }} </span>
+                <span class="font-monospace text-sm">{{ node.data.address }}</span>
             </template>
         </Column>
 

diff --git a/web/explorer/src/components/SettingsPanel.vue b/web/explorer/src/components/SettingsPanel.vue
@@ -28,7 +28,7 @@
                 </div>
                 <div class="flex flex-row align-items-center gap-2">
                     <Checkbox v-model="showNamespaceChart" inputId="showNamespaceChart" :binary="true" />
-                    <label for="showNamespaceChart"> Show namespace chart </label>
+                    <label for="showNamespaceChart">Show namespace chart</label>
                 </div>
                 <div class="flex flex-row align-items-center gap-2">
                     <Checkbox
@@ -37,7 +37,7 @@
                         :binary="true"
                         :disabled="showNamespaceChart"
                     />
-                    <label for="showColumnFilters"> Show column filters </label>
+                    <label for="showColumnFilters">Show column filters</label>
                 </div>
             </div>
         </template>

diff --git a/web/explorer/src/components/columns/RuleColumn.vue b/web/explorer/src/components/columns/RuleColumn.vue
@@ -17,8 +17,8 @@
         </template>
 
         <!-- example node: "- or", "- and" -->
-        <template v-else-if="node.data.type === 'statement'"
-            >-
+        <template v-else-if="node.data.type === 'statement'">
+            -
             <span
                 :class="{
                     'text-green-700': node.data.typeValue === 'range',
@@ -49,7 +49,8 @@
 
         <!-- example node: "- malware.exe" (these are the captures (i.e. children nodes) of regex nodes) -->
         <template v-else-if="node.data.type === 'regex-capture'">
-            - <span class="text-green-700 font-monospace">{{ node.data.name }}</span>
+            -
+            <span class="text-green-700 font-monospace">{{ node.data.name }}</span>
         </template>
 
         <!-- example node: "exit(0) -> 0" (if the node type is call-info, we highlight node.data.name.callInfo) -->

diff --git a/web/public/index.html b/web/public/index.html
@@ -219,8 +219,8 @@ <h5 class="mt-2">v7.2.0</h5>
       <!-- TODO(williballenthin): add date -->
       <p class="mt-0">
         <a href="https://github.com/mandiant/capa/releases/tag/v7.2.0">capa v7.2.0</a>
-        introduces a first version of capa explorer web: a web-based user interface to inspect capa results using your browser.
-        capa explorer web was worked on by @s-ff as part of a GSoC project, and it is available at https://mandiant.github.io/capa/explorer/.
+        introduces a first version of capa Explorer Web: a web-based user interface to inspect capa results using your browser.
+        capa Explorer Web was worked on by @s-ff as part of a GSoC project, and it is available at <a href="https://mandiant.github.io/capa/explorer/">https://mandiant.github.io/capa/explorer/</a>.
         This release also adds a feature extractor for output from the DRAKVUF sandbox. Now, analysts can pass the resulting drakmon.log file to capa and extract capabilities from the artifacts captured by the sandbox. 
       </p>