From 7f1ad9818a750d42f774579a67584be302c58272 Mon Sep 17 00:00:00 2001
From: Image <malingtao1019@163.com>
Date: Wed, 26 Feb 2020 18:32:11 +0800
Subject: [PATCH] adjusted frontend

---
 src/main/actions.ts  |  18 ++++--
 src/renderer/app.css |   4 ++
 src/renderer/app.tsx | 135 +++++++++++++++++++++++++++++++++++--------
 3 files changed, 128 insertions(+), 29 deletions(-)

diff --git a/src/main/actions.ts b/src/main/actions.ts
index 5abbaa7..a1f82d1 100644
--- a/src/main/actions.ts
+++ b/src/main/actions.ts
@@ -61,13 +61,14 @@ export const startDebugging =  (
   setTimeout(function(){
     CDP({port:nodePort},async client => {
       let count=0;
+      let renew=false;
       let interval=setInterval(async function() {
         try{
           let length=await client.Runtime.evaluate({
             expression: `process.mainModule.require('electron').webContents.getAllWebContents().length`
           })
-          
-          if(length.result.value!=count){
+
+          if(renew || length.result.value!=count){
             count=length.result.value;
             let webcontents=await client.Runtime.evaluate({
               expression: `
@@ -75,13 +76,20 @@ export const startDebugging =  (
             contents=process.mainModule.require('electron').webContents.getAllWebContents();
             for(let i=0;i<contents.length;i++){
               let cw=contents[i];
-              result.push({"url":cw.getURL(),"webPreferences":cw.getWebPreferences()})
+              result.push({"id":cw.id,"url":cw.getURL(),"webPreferences":cw.getWebPreferences()})
             };
             JSON.stringify(result);
             `
             })
-
-            dispatch(updateContents(id,JSON.parse(webcontents.result.value)))
+            renew=false;
+            let webContents=JSON.parse(webcontents.result.value)
+            console.log(webContents);
+            for(let wc=0;wc<webContents.length;wc++){
+              if(webContents[wc].url==""){
+                renew=true;
+              }
+            }
+            dispatch(updateContents(id,webContents))
           }
         }catch(e){
           console.log(e)
diff --git a/src/renderer/app.css b/src/renderer/app.css
index 9603a38..a21d316 100644
--- a/src/renderer/app.css
+++ b/src/renderer/app.css
@@ -6,3 +6,7 @@ body {
 .hoverable:hover {
   background-color: #eeeeee;
 }
+
+.bp3-tab-panel {
+  margin-top: 3px;
+}
diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 24fd1d7..dae5d7f 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -208,31 +208,118 @@ export const App: React.FC = () => {
                       </HTMLTable>
                     </div>
                     <Divider />
-                    <Pre
-                      style={{
-                        flexGrow: 1,
-                        overflow: 'auto',
-                        userSelect: 'text',
-                        width:'50%',
-                        fontFamily:
-                          'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
-                      }}
+                    <Tabs
+                      defaultSelectedTabId={'Log'}
                     >
-                      {session.log}
-                    </Pre>
-                    <Pre
-                      style={{
-                        flexGrow: 1,
-                        overflow: 'auto',
-                        userSelect: 'text',
-                        width:'50%',
-                        fontFamily:
-                          'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
-                      }}
-                    >
-                      webContents count:{session.webcontents==undefined?0:session.webcontents.length};{"\n"}
-                      {JSON.stringify(session.webcontents,null,2)}
-                    </Pre>
+                   <Tab
+                     id={'webContents'}
+                     key={'webContents'}
+                     title={'webContents'}
+                     panel={
+                     <HTMLTable style={{
+                       //flexGrow: 0,
+                       //overflow: 'auto',
+                       userSelect: 'text',
+                       width: '50%',
+                       fontFamily:
+                         'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
+
+                     }} condensed interactive>
+
+                       <thead>
+                       <tr>
+                         <th>URL</th>
+                         <th>nodeIntegration</th>
+                         <th>contextIsolation</th>
+                         <th>sandbox</th>
+                         <th>nativeWindowOpen</th>
+                         <th>webPreferences</th>
+                       </tr>
+                       </thead>
+                       <tbody>
+                       {session.webcontents == undefined ? <tr></tr> : session.webcontents.map((webcontent) => (
+                         <tr key={webcontent.id}>
+                           <td
+                             style={{
+                               maxWidth: 200,
+                               wordWrap: 'break-word',
+                             }}
+                           >
+                             {webcontent.url}
+                           </td>
+                           <td
+                             style={{
+                               maxWidth: 100,
+                               wordWrap: 'break-word',
+                               color: webcontent.webPreferences.nodeIntegration == true ? 'red' : 'black',
+                             }}
+                           >
+                             {webcontent.webPreferences.nodeIntegration ? "true" : "false"}
+                           </td>
+                           <td
+                             style={{
+                               maxWidth: 100,
+                               wordWrap: 'break-word',
+                               color: webcontent.webPreferences.contextIsolation == false ? 'red' : 'black',
+                             }}
+                           >
+                             {webcontent.webPreferences.contextIsolation ? "true" : "false"}
+                           </td>
+                           <td
+                             style={{
+                               maxWidth: 100,
+                               wordWrap: 'break-word',
+                               color: webcontent.webPreferences.sandbox == false ? 'red' : 'black',
+                             }}
+                           >
+                             {webcontent.webPreferences.sandbox ? "true" : "false"}
+                           </td>
+                           <td
+                             style={{
+                               maxWidth: 100,
+                               wordWrap: 'break-word',
+                               color: webcontent.webPreferences.nativeWindowOpen == false ? 'red' : 'black',
+                             }}
+                           >
+                             {webcontent.webPreferences.nativeWindowOpen ? "true" : "false"}
+                           </td>
+                           <td
+                             style={{
+                               maxWidth: 400,
+                               wordWrap: 'break-word',
+                               overflow: 'auto'
+                             }}
+                           >
+                             {JSON.stringify(webcontent.webPreferences, null, 2)}
+                           </td>
+                         </tr>
+                       ))}
+                       </tbody>
+                     </HTMLTable>
+                   }>
+                   </Tab>
+                      <Tab
+                        id={'Log'}
+                        key={'Log'}
+                        title={'Log'}
+                        style={{
+                          marginTop:0,
+                        }}
+                        panel={
+                        <Pre
+                          style={{
+                            flexGrow: 1,
+                            overflow: 'auto',
+                            userSelect: 'text',
+                            fontFamily:
+                              'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
+                          }}
+                        >
+                          {session.log}
+                        </Pre>
+                      }>
+                      </Tab>
+                    </Tabs>
                   </div>
                 }
               />