Merge pull request #2 from jwlilly/Find-in-page

Find in page

Author: jwlilly

app.js

@@ -102,6 +102,12 @@ ipcMain.on('forwardPorts', (event, arg) => {
 ipcMain.on('restartServer', (event, arg) => {
     restartServer();
   });
+ipcMain.on('findInPage', (event, arg) => {
+  findInPage(arg[0]);
+});
+ipcMain.on('stopFindInPage', (event, arg) => {
+  stopFindInPage();
+});
 ipcMain.on('setNotImportant', (event, arg) => {
   myItem = Menu.getApplicationMenu().getMenuItemById('not-important-views');
   myItem.checked = arg;
@@ -258,3 +264,18 @@ function startAccessibilityService(runningServices){
     mainWindow.webContents.send('reconnect', {'data': ""});
   }, 5000);
 }
+
+function findInPage(text) {
+  let options = {
+    forward: true,
+    findNext: true,
+    matchCase: false,
+    wordStart: false,
+    medialCapitalAsWordStart: false
+  }
+  mainWindow.webContents.findInPage(text, options)
+}
+
+function stopFindInPage() {
+  mainWindow.webContents.stopFindInPage('clearSelection');
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "android-accessibility-inspector",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "app.js",
   "scripts": {
     "ng": "ng",
@@ -65,7 +65,7 @@
     "@types/jasmine": "~3.8.0",
     "@types/jquery": "^3.5.13",
     "@types/node": "14.14.33",
-    "electron": "13.6.6",
+    "electron": "^27",
     "electron-builder": "^22.14.13",
     "electron-packager": "^16",
     "jasmine-core": "~3.8.0",

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div (window:resize)="onResize($event)">
+<div (window:resize)="onResize($event)" (keyup.escape)="stopFindInPage()">
   <div>
     <div *ngIf="!connected" class="alert alert-warning alert-sticky">
       <div class="row">
@@ -27,8 +27,11 @@
         </div>
       </div>
       <div class="col-md">
+        <div class="bg-white sticky-top border-bottom">
+          <find-in-page (parentStopFindInPage)="stopFindInPage()" (parentFindInPage)="findInPage($event)"></find-in-page>
+        </div>
         <div class="m-1">
-          <ul class="list-group dark-border" *ngIf="jsonData.children">
+          <ul class="mt-4 list-group dark-border" *ngIf="jsonData.children">
             <ng-template #recursiveList let-list>
                 <li class="list-group-item dark-border" *ngFor="let node of list" [ngClass]="{'web-view' : node.role.includes('WebView'), 'system-focus' : (node.properties && node.properties.includes('focused'))}">
                   <button id="{{ node.id }}" aria-pressed="false" class="btn btn-focus remove-btn-border" (click)="nodeClicked($event,node)">

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { ElectronService } from 'ngx-electron';
 import { BoundingBox } from './BoundingBox';
 import {webSocket, WebSocketSubject} from 'rxjs/webSocket';
 import { ToastrService } from 'ngx-toastr';
+import { FindInPage } from './components/FindInPage';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -669,4 +670,13 @@ export class AppComponent implements OnInit, OnDestroy{
       this.webSocket.next(this.importantJson);
     }
   }
+
+  findInPage(event: any) {
+    let text = event.findText as string;
+    this._electronService.ipcRenderer.send("findInPage", [text]);
+  }
+
+  stopFindInPage() {
+    this._electronService.ipcRenderer.send("stopFindInPage");
+  }
 }

src/app/app.module.ts

@@ -10,12 +10,14 @@ import { ObjectValuesPipe } from './json.pipe';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
 import { VarDirective } from './ng-var.directive';
+import { FindInPage } from './components/FindInPage';
 
 @NgModule({
   declarations: [
     AppComponent,
     ObjectValuesPipe,
-    VarDirective
+    VarDirective,
+    FindInPage
   ],
   imports: [
     BrowserModule,

src/app/components/FindInPage.html

@@ -0,0 +1,12 @@
+<div class="p-2 row g-3 align-items-center mb-3 search-width" id="searchPannel">
+    <div class="col-auto">
+        <label for="enter">Find Text</label>
+    </div>
+    <div class="col-auto">
+        <input #findInput (keyup.enter)="findInPage($event)" class="form-control" id="enter" type="text">
+    </div>
+    <div class="col-auto">
+        <button class="btn btn-primary me-2" #findButton id="search" (click)="findInPage($event)">Find</button>
+        <button class="btn btn-primary" (click)="stopFindInPage()" id="clearSearch">Clear</button>
+    </div>
+</div>

src/app/components/FindInPage.ts

@@ -0,0 +1,34 @@
+import { Component, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core';
+
+@Component({
+    selector: 'find-in-page',
+    templateUrl: './FindInPage.html'
+  })
+
+  export class FindInPage
+  {
+    @Output("parentFindInPage") parentFindInPage: EventEmitter<any> = new EventEmitter();
+    @Output("parentStopFindInPage") parentStopFindInPage: EventEmitter<any> = new EventEmitter();
+    @ViewChild('findInput') findInput:ElementRef | undefined;
+    @ViewChild('findButton') findButton:ElementRef | undefined;
+
+    findInPage(event: Event) {
+        if(this.findInput instanceof ElementRef) {
+            let find = this.findInput as ElementRef;
+            if(find.nativeElement.value && find.nativeElement.value.length > 0) {
+                this.parentFindInPage.emit({findText: find.nativeElement.value});
+            }
+        }
+        setTimeout(() => {
+            this.findButton?.nativeElement.focus();
+        }, 1);
+    }
+
+    stopFindInPage() {
+        this.parentStopFindInPage.emit();
+        if(this.findInput instanceof ElementRef) {
+            let find = this.findInput as ElementRef;
+            find.nativeElement.value = "";
+        }
+    }
+  }

src/styles.css

@@ -28,7 +28,7 @@
   position:fixed;
   top:0;
   right:5px;
-  z-index:100;
+  z-index:2000;
  }
 
 .dark-border {
@@ -61,12 +61,16 @@ span.system-focus-btn {
   display: none;
 }
 
+.search-width {
+  max-width: calc(100% - 70px);
+}
+
 li.web-view span.web-view-btn {
   display:inline-block;
   margin-left: 4px;
 }
 
-li.system-focus span.system-focus-btn {
+li.system-focus > button > div > span > span.system-focus-btn {
   display:inline-block;
   margin-left: 4px;
 }
@@ -101,7 +105,7 @@ li.web-view span.native-view-btn {
 .alert-sticky {
   position: fixed;
   width: 100%;
-  z-index: 2000;
+  z-index: 2001;
 }
 @keyframes spinner {
   to {transform: rotate(360deg);}