Update docs with updated images

app/renderer/src/assets/locales/en/translation.json

@@ -282,5 +282,6 @@
   "invalidCapType": "Invalid capability type: {{type}}",
   "whitespaceDetected": "Text Starts and/or Ends With Whitespace",
   "pcloudyCredentialsRequired": "pCloudy username and api key are required!",
-  "duplicateCapabilityNameError": "A capability set with the same name already exists"
+  "duplicateCapabilityNameError": "A capability set with the same name already exists",
+  "searchInPageSource": "Search in page source"
 }

app/renderer/src/components/Inspector/Inspector.jsx

@@ -320,7 +320,7 @@ const Inspector = (props) => {
                           <Input
                             size="middle"
                             allowClear
-                            placeholder="Search in page source"
+                            placeholder={t('searchInPageSource')}
                             onChange={(e) => setPageSourceSearchText(e.target.value)}
                             prefix={<SearchOutlined />}
                           />

app/renderer/src/components/Inspector/Source.jsx

@@ -28,12 +28,12 @@ const Source = (props) => {
   /**
    * Highlights the part of the node text in source tree that matches the search term.
    */
-  const higlightNodeMatchingSearchTerm = (nodeText, searchText) => {
+  const highlightNodeMatchingSearchTerm = (nodeText, searchText) => {
     if (!searchText) {
       return nodeText;
     }
 
-    const index = nodeText.indexOf(searchText);
+    const index = nodeText.toLowerCase().indexOf(searchText.toLowerCase());
     if (index < 0) {
       return nodeText;
     }
@@ -76,8 +76,8 @@ const Source = (props) => {
        * If any node that matches the search text is found, we will add all its
        * parents to the 'nodesMatchingSearchTerm' array to make them automatically expand.
        */
-      const nodeText = renderToString(node.title);
-      if (nodeText.indexOf(pageSourceSearchText) > -1) {
+      const nodeText = renderToString(node.title).toLowerCase();
+      if (nodeText.indexOf(pageSourceSearchText.toLowerCase()) > -1) {
         nodesMatchingSearchTerm.push(...hierarchy);
       }
       if (node.children) {
@@ -94,8 +94,8 @@ const Source = (props) => {
 
     for (let attr of Object.keys(attributes)) {
       if ((IMPORTANT_SOURCE_ATTRS.includes(attr) && attributes[attr]) || showAllAttrs) {
-        const keyNode = higlightNodeMatchingSearchTerm(attr, pageSourceSearchText);
-        const valueNode = higlightNodeMatchingSearchTerm(attributes[attr], pageSourceSearchText);
+        const keyNode = highlightNodeMatchingSearchTerm(attr, pageSourceSearchText);
+        const valueNode = highlightNodeMatchingSearchTerm(attributes[attr], pageSourceSearchText);
 
         attrs.push(
           <span key={attr}>
@@ -111,7 +111,7 @@ const Source = (props) => {
       <span>
         &lt;
         <b className={InspectorStyles.sourceTag}>
-          {higlightNodeMatchingSearchTerm(tagName, pageSourceSearchText)}
+          {highlightNodeMatchingSearchTerm(tagName, pageSourceSearchText)}
         </b>
         {attrs}&gt;
       </span>

docs/session-inspector/source.md

@@ -51,6 +51,14 @@ behavior. While the default source refresh behavior in MJPEG mode stays the same
 [automatic source refresh button](./header.md#toggle-automatic-source-refresh) in the application
 header, which allows to disable automatic refreshing.
 
+### Searching the Source
+
+![Search Page Source Input](./assets/images/source/search-page-source.png)
+
+Search page source functionality enables quick and easy navigation through the page source XML tree by searching for nodes based on element tag names or XML attributes. Matches are automatically highlighted and expanded, allowing for immediate identification and access to relevant nodes.
+
+![Search Page Source Shown](./assets/images/source/search-page-source-highlighted.png)
+
 ### Toggle Attributes Button
 
 ![Toggle Attributes Button](./assets/images/source/toggle-attributes-button.png)