From 0024cc8683c913fef7a7d9a178415a27649957da Mon Sep 17 00:00:00 2001
From: michael <michael@freepascal.org>
Date: Mon, 5 Apr 2021 07:12:39 +0000
Subject: [PATCH] * Patch by Martin to add button to show devtools

---
 demo/webwidget/nativedesign/frmmain.lfm | 263 ++++++++++++++----------
 demo/webwidget/nativedesign/frmmain.pp  |  12 ++
 2 files changed, 161 insertions(+), 114 deletions(-)

diff --git a/demo/webwidget/nativedesign/frmmain.lfm b/demo/webwidget/nativedesign/frmmain.lfm
index efb627d..24b9dfb 100644
--- a/demo/webwidget/nativedesign/frmmain.lfm
+++ b/demo/webwidget/nativedesign/frmmain.lfm
@@ -1,11 +1,11 @@
 object MainForm: TMainForm
-  Left = 508
+  Left = 480
   Height = 541
-  Top = 119
-  Width = 698
+  Top = 120
+  Width = 737
   Caption = 'IDE Design demo'
   ClientHeight = 541
-  ClientWidth = 698
+  ClientWidth = 737
   OnCloseQuery = FormCloseQuery
   OnCreate = FormCreate
   LCLVersion = '2.1.0.0'
@@ -13,24 +13,24 @@ object MainForm: TMainForm
     Left = 0
     Height = 44
     Top = 497
-    Width = 698
+    Width = 737
     Align = alBottom
     ClientHeight = 44
-    ClientWidth = 698
+    ClientWidth = 737
     TabOrder = 0
     object Project: TLabel
       Left = 25
-      Height = 16
+      Height = 15
       Top = 15
-      Width = 42
+      Width = 37
       Caption = 'Project'
       ParentColor = False
     end
     object FEProject: TFileNameEdit
       Left = 80
-      Height = 27
+      Height = 23
       Top = 8
-      Width = 608
+      Width = 647
       FileName = '/home/michael/P2JS/trunk/packages/webwidget/designdemo/designdemo.html'
       DialogTitle = 'Select Project HTML File'
       Filter = 'HTML Files|*.html|All files|*.*'
@@ -51,7 +51,7 @@ object MainForm: TMainForm
     Left = 0
     Height = 36
     Top = 0
-    Width = 698
+    Width = 737
     ButtonHeight = 34
     ButtonWidth = 34
     Caption = 'TBWidgets'
@@ -63,7 +63,7 @@ object MainForm: TMainForm
       Action = AGo
     end
     object ToolButton1: TToolButton
-      Left = 73
+      Left = 107
       Height = 34
       Top = 2
       Caption = 'ToolButton1'
@@ -74,25 +74,30 @@ object MainForm: TMainForm
       Top = 2
       Action = AGoExternal
     end
+    object TBExternalGo1: TToolButton
+      Left = 73
+      Top = 2
+      Action = AOpenDev
+    end
   end
   object PCDesigner: TPageControl
     Left = 0
     Height = 461
     Top = 36
-    Width = 643
+    Width = 682
     ActivePage = TSBrowser
     Align = alClient
     TabIndex = 0
     TabOrder = 2
     object TSBrowser: TTabSheet
       Caption = 'Design browser'
-      ClientHeight = 431
-      ClientWidth = 688
+      ClientHeight = 433
+      ClientWidth = 674
       object BrowserWindow1: TBrowserWindow
         Left = 0
-        Height = 431
+        Height = 433
         Top = 0
-        Width = 688
+        Width = 674
         Align = alClient
         TabOrder = 0
         Chromium.OnConsoleMessage = ChromiumConsoleMessage
@@ -136,7 +141,7 @@ object MainForm: TMainForm
     end
   end
   object Panel1: TPanel
-    Left = 648
+    Left = 687
     Height = 461
     Top = 36
     Width = 50
@@ -172,7 +177,7 @@ object MainForm: TMainForm
     end
   end
   object Splitter1: TSplitter
-    Left = 643
+    Left = 682
     Height = 461
     Top = 36
     Width = 5
@@ -186,101 +191,124 @@ object MainForm: TMainForm
     Left = 384
     Top = 16
     Bitmap = {
-      4C7A0B0000002000000020000000C50B00000000000078DAED5D699055C5150E
-      080C030308837112C7199CC8BE86715844A84A0C1907480A49A8CAA2322E7183
-      A43204D1C7366429A389A2565295582E643181594C2096F22711A91290004EC8
-      A615E33683C4441390C588C6999C637D973AB67DEFEBBEB7EFBB03F4ABFAEABD
-      D77DBBBFBEDDA74F2FB7CFB9F3BE5EFBA1791E56A0CF10C278421DC0BF87A4CC
-      791E610D612FA12B041CB79A30CC21EF50C2DD84E311BC2ADE22AC239426E49E
-      427845C9FB1061236115A11EE0DF4D8437946BF7136A62725F4AF8AFC8EB45C2
-      65843E1169FA102E27BC24D2BD49981FE3BE25F7BD84228BF47D09F72B65A8B1
-      686F59E7B904EDB752698B528334F788340F3A90DF7B457EEB0CFAD871D1DE45
-      0EF8B92D5E16FD6258C4B56B44592F0BB9E623849290B87308C309BD94F04522
-      DFD511FC6DA28FF511E1E3088F118E887C1E15F135847D22EE75C23522BE48F4
-      CDBD113AB513D76C14E16391F61DC20384C5845B08D721FE5CC241C231C252E8
-      83FDC8E762914F33C23A75BA9A3E1345F95788F056845D1352EEEF207EB9089B
-      8DB0DF8AB0D522FF099A7CEA44FC9522FC9F847709FDF0FFDB90694619E13748
-      5323D2F426FC8FF09A08BB4AE47F8986FF12117F95083F04FE62FCFF1DE130AE
-      1B45D882DFD51AFE8322EC6A917FAD867F82885F29C29F4058BD08BB4FF0DF8E
-      DFCBF2D4BFEC5BE3F3C85F9308FF14EE85F5C20F508F4F097EEE7347217FDF10
-      F2C779CD16F9B408F91B1C224BC1D87E44EA1EFACC117D33C05F991BF11713FE
-      AEE8DA2F2AFD2F68B3DD11FD5FCAE8159AF812F4B7A290F495D0A13D94F07A91
-      EFAA08FE61D0915D1843FB3AD0BFC58476A17F2BF35CBF4E9475BD03FEFB447E
-      77185C5F2AF4D7FBFA420CEE55229F0ED3392AF4F99B22EDFD366D813A5FAFCC
-      3F2EB02CFB7CA50C3C865E11352643CEEB457BC79A7F29F5B05FE9778731D7E4
-      BE7225B006E3CB61E5DA0EDBFB0E918775A25F98CEBFEF74B92641DF5C1DB1FE
-      60BDB607325759E0F5D7B8309DEAE191920CF25838127380FE05E01B00FDD78A
-      B9C056C243C013086BC51A7580435E5ED37E0DF9DFCCF72CE2FAC9B508EA2287
-      6B97F03C302177056107E6FBCC753EF773C25CC268F4FBC9842AC202D4D1485C
-      BB1269CF4DA0FBDBB016FF28CA32366A0D4B9F33B18EE0797939612AE1E91863
-      5F05B8F9BB07F2AAB448FFDE3C4CFC6E33AD07B437D7DB14FC5F9AA0FD783DD6
-      93308DB0DD441EE8F3555E7FE19EAB1CC86F39E6E82C0F4B0CFA581BE4A72CAE
-      EC68DA82DBB13FF22E89B8F672C83AF7A3490EFBF068EC0BE4C2F61570DDC3E8
-      3FACDB062971BC06F9096113DAB55899772D437A9EF7D569F69478CC1EC3F3A4
-      A8FD077C2F50C2AFC39CE6FBE0E6B5CE66C471FF789CF03CE126CC9578AD76AD
-      5A7EC9A1E11EC86BDB601F4884F7C47EC65211361CF3BDC1987FBCADA4B91969
-      7ACA3610EBD9120D3FB7F9CF51F7D5CABC8BE75763F1FF631C0F0C445FD9A7E4
-      350E692A95309E97FF92CBAFE11F41F805AE19ABE11F87FF77609ED789B5714E
-      C33F5EC33F19F716C6CF7DEF7159574AFD2F57F6E9BAA0F783FAAF12F1DC87FE
-      A5D47F15BEB7858DD742FEE628E1D783E32EC8DFB3BCEF22E48FC7E217B88CD8
-      2BE76BBFA2E4B1204AFEC45ED328F49552256E2EFAD6AFB0CF5014D2FF1E54F7
-      57302E954006361AE81F96EF510EF5CF24E815D6C15F32D4BF152ED611C8A7CC
-      44FF2AE30F8FF9E50EF8AB30FEF01AF146C3F1773BC64C96FD8624E32FBE39AF
-      274DE763D8E3E1794B85E86F95966BC572F48D4AE4556E59F66AA49B8ABCCA20
-      4767E6592B8F419BF33EF974E4519D60EEB01D6BDAFE906196D1CFA14EAAD1A7
-      46637C1C8C396A7FAC959F4C2A43D84B5D0CD965B91CA3AC418A95BDF215B8F6
-      C6A4F36FCD7AE7CBD8C76C831E7D0863C6368435E19A9202AC8782F61811EC8D
-      7B7878787858E9519E3B7E8F70C0627F39290EE0B95D1F70776584DBC47D5F58
-      C03A9F01CE13E72C3268F7F7D585E7FF40FC5C3CFBE950F7331CC5E7E3EF10F1
-      ED29C47777FE3AE4D11E725E2169BC97FFEEC11FE8DF1905E49E29F4EF6D198E
-      3FB7620CBC5D73CE314D30D777A3CE327A787878789C76EBC1B3F01CE2A8C3F1
-      E628F21C6AC0DF9AE2B8D762C01FDC773B9EF1B940701EED88C5BCA8C9619B36
-      99CEF33CFFC9CD8FF9243F479E5E687E706F467A3EB33FAD50FCE0FEB548FF6A
-      F0AC246DFE28EEB4F9F371BBE0C73983F979DA3B58578C7429FFE0DE89F30637
-      28DC9BA2EEDB11FF7CD83F74E1FBEA90FB1E9156FF07A72CC35E536E57F2A794
-      C198DBA5FC2B6530E276DDFF60FF71204CD60AA1FF6D9FAF9E64E35FD6F3AF96
-      14E79FCD86F6972D8AAD5D521C413D0CF56B1C0F0FA7F6279F255C9476DF32B4
-      FFDF8D33881519DBFF1FC759DD4129D8FFDB806D67673AB2FF8F0BAE8B4596DC
-      93614FEA42F7F359D44B2DDBFB1587DC0B2CEFFDEE34B85916D98EC5C2FEDF25
-      379FBFDD051BF6E111FC8DAEDB5B709F78E614C1FFB4E3FB1E82B3E2F29ABF19
-      D8FFEBF06F4BEED290FBE9D4E96AC5FE5CC55A9C057DCE907BA8C65E5B62461E
-      FB7B898DCA79D4E7F2709FA5F862D0619E05BF2A4F65B03DD7C531F71F0DE4A4
-      D6B2FE7565D8A7847DD890DBC4FEDFA40CBD94F2FCC590DBC4FE3F0CEC87E00B
-      4A9AB3097FB6E8A3BB0DFD8FE42D83E57DDBDAFFE7EBEB37B02EB1E4B6B5FF77
-      8D38F6FFAE6063FFEF72FED18579D49484F6FF7191C4FE7F92F0DD13F79C454D
-      C239B0B7FFF7F6FF1E1E1E1EA7FABEDA00D8886E70B8F71F60036CE3C27CE7F5
-      22FCBE00672F77A9FEF9C07F5101CF7F5EA8E15F28E217A6D0B691F97B7ECF6F
-      C22FFA33FB241B9801BFEC477B4CE79D29F11B97C1807F4688AED8227DBFC1B7
-      45641942CE0A484C0FD1BFBB42AE7F44F1776052866B43F6739ED2E95F61E39C
-      0B197F1629D79A94A15E197F722E6DA34DCA5080317BADC27F4CD7BE052AC331
-      F8C22CB5D50F0ECAB05270FF01E5D95AE07AE827B88DCEBBA6508640261F73E1
-      3F396619A6B9F47DE0E1E151B0F5DF8AD374FD37D3AFFF4E8AF5073F67FC34E1
-      8C8CF89FC535DFCA88FF195CF3CD0CEB7F7656F59F87E3ECACF8B1E66A0F3B87
-      E6829F7D6A8584D7E16C4BB056EBE19A1FE7ECD8BFF62C8DAFC1438A7E5BE692
-      1FFEF00E095BB659083F47F17310E01DF58C475C7EF8B9FA9392FF1BA8F3A8E7
-      FE2F4B1F8209F87F9A609C7934908538FCB0FD58981043FCFE5BA2FD9F3460BB
-      FFE3123B63EEFFB8987FDE5208DF781E1E1E1EDDCCFEBFA51BD8FF9BD85F1D15
-      E7E55CE9FE8E18F6FFCD0EDBB43986FD5FB7E1671FC831EABCC1217F1C9BC096
-      5385DFCBDF7BCF13B4EB8B02F187B6FF69C29F69FD5BF80A0F5B83EE2C00FF42
-      13BD90317F6386FC8D86F9A4C1DF68918F6BFE46CB7C5CF237C6D0D571E75F3B
-      549BAD9863850BFBFFB509C6AAA4F6FF6BFD3AC6C3C3C3C323A3FD1E637F9029
-      EFF7E45D233BF43724E71F3B4CFD11B9F2B764F3FC48FA63F2FCE9F0873CBBAC
-      2DE4FD2BE783B5FE18D3AE7F94E1047716EDAFBE83CBCB7FB7E2CF5AFFB66438
-      FE34A7E4EFCDFB83F3F0F0F0F088FB5E1E6BDFF92E9E177523FE8EB0E7C90679
-      34843CFFF7CF5FBB3F7F0BD0E090BF21C8D7EB98534A57B27FA88919714F848D
-      F5BB599441E19F90611D4CF4B2784AF5A94CF5AF1FFFBA0D7FD6F3AFD372FEEB
-      E1E1E17112CC13D8D7C912C27AF83AAD4DC9CFE82CE5195E25FC143C1376F68A
-      3EC5ECF715EF009FC3CFD82D79CFC373F1B7351C1710AE8F78D7C0031ABFB9EC
-      B3F98726EFFBA5CF54C27F22C6A141F0ADE3DCFE0267110EE4C9A308EFB78BFB
-      ECE33311FC771AA4AFC0FB9AE3F26F09E13EC3C0C73DE3F390AB24FE907B87AC
-      A54CD2FF0C6DF06A8232E8FCAF9BDED35BF0799EB3E07B1808FE7F32013FE3C7
-      EC13CDC2FFB8CAAF7B97DEC72DF8B93F7F0269E23C37AC0DB1BF3D689107B7FF
-      48D80D77081FD026692784F4811F59DEC73FF85D06B0DB5D8CB04D78475B942F
-      974111FB3971E4F975C8E58BACFB852DF10B9A6B5FCBA303F724E8573925AF9C
-      A9FE11699627E0AF56F2D2BDD3E1A63CFC351176DB1FB0A750FA4491E62CB5EA
-      A37C781EFEDE21BED69B75EB5981973479F555AED96C38FE3F1F837FAF9207EB
-      E85B95F7A7541AF26F8BC1BF35E43C48277C489E6F31FF792406FF668D3DCEDC
-      38EFC252DE2B6ACABFC1E1BCB335067F935F1778D8E2FFBC21AD6A
+      4C7A0C00000020000000200000008B0E00000000000078DAED5D7B7056C5156F
+      10F2803C8060A510F2452AEF579A101E220CD6D2C8A31DA40468AB1284220A85
+      26201A5EE18DB64AEDB433AD23101EB6900479D491F0472B322360080881B63A
+      B50212A4B63C82BC8325B77B32E77E73B2B97BEFDE7BF7FBBE007B677E937CFB
+      FAEDDD3DE7ECD9BD77F78EFA45F6374669B802BB5A33F462188E80FF5B8798F3
+      4186450C87190C01206E21439A42DE360CAF33D4D8F0F2B8C9B09A21D927773F
+      862FB8B22F316C6158C0908B80FF8B19BEE2D29E61C8F2C8FD04C30D52D64986
+      2719A26DF244333CC5708AE4BBCE30DAC37D53EE3718625CE48F6558C3D521CB
+      457FD3362FF0D17FF3B9BE4896C8F31B92679D02F97D8394B75A42C76A487FC7
+      28E087BEF89CE8459A4DDA45A4AE4F0AD27C8B215E10D79EA11343532E7C2229
+      77A10DFF11A263D124BC27C32E862BA49C77497C164325893BCF3085C4C710DD
+      3C6C63536B31CD1612DE03F37ECDB096613AC34B0CCF627C07866A866B0CF968
+      0FCE60398F91724A30ACD6CA56B3AB0FA9FF3C12BE15C3A608EABD1CE3E792B0
+      6118F61712B69094DFDBA29CE1247E1209FF0FC36D86E6F87B19CA34A02DC39F
+      314F16C9D38CE17F0CE748D833A4FCC72DF81F27F1CF90F04BC81F87BFFFCA70
+      19D3756528C3FF332DF8AB49D864527EB6057F6F123F9F84BF8F61B924EC4DC2
+      FF0AFE3FC7A1FDA96EF57290BF6212FE3DBC17B00BBFC576FC90F083CE5D45F9
+      9B4DE40FCA1A46CA2925F2D74A204BE6D87E85DA1E768D20BA69E21FC08DF18F
+      31FC8BB3B53FE6F4CFECB30A1BFDA732FAB4457C3CEA5B8C207F006D6814179E
+      4BCA5D60C39F8636D2C031345681FD8D63384DEC6FC021FD6A52D72205FC6F92
+      F25E95489F4CEC573D5DF0C0BD80945325EBA3A23DBF4EF2AE71D317D8E6459C
+      FFD1D765DD4773758031F469BB3119E53C97F4B727FF8B6B87339CDE5D465F13
+      74651262118E2F97B9B4556EEF5B200FAB895EC8FADFAFA99C93A06E2EB4997F
+      805D3B84321708F3FCABA7C8A66A68844806612CEC823E408B30F025A0FDDB8A
+      BEC01E86B710EF63D8569CA32628E48539ED4C2CFF45B86712D79CCE45B02D0A
+      30ED0CF0037D72A732EC477F1FB81E023D6718C9D00DF53E83A123C3186CA32E
+      98763EE6EDE0C3F61FC1B9783BAC4B0FBB392CBB5AE23C02FCF21486FE0C1F79
+      18FB52911BFE4661590117F9EBFC30F2FF11D976C0FE8676EB87BFF37DF41FCC
+      C79A300C60D827230FECFA39CCBFF09E3B2A90DF14F4D1411E6648E8D811949F
+      B65E65C7A22FA01F5B60D9F136699F4259073D4A57A8C3DD705DA040B4AE80E9
+      DE46FD01DB96C4C5C11C643DC30EECD738CEEF9A83F9C1EF1B6EB1A604637677
+      F093ECD61FF0EF182EFC59F4697E85DC30D7D98971A01FEF317CC6F002FA4A30
+      579BCAD79F72587027C2DCD65C0722E14D703D239F8475427FAF15FA1FB7B83C
+      2F629E26B40FC87C36DE821FFA7C13B67D26E777817FD5037F7F1BE21189A82B
+      955C593D314F800B03BFFC4F507F0BFECE0C7FC4343D2CF87BE2EF57D1CFABC5
+      B97181057F2F0BFE0CBC37113FE8DE7BB4ADB8F69FCBADD31968F7CDF6EF48E2
+      4187FECBB57F47FCBB57345E13F91BC1854F438E5FA3FC7D02EB2E44FE602C3E
+      0175C4B57248FB33AE8C3176F247D69ABAA2AE2473712351B7B6E13A438C40FF
+      D6F1EB2B382EC5A30C6C91B03F20DF5D15DA9F74B42B60837F22697F5355CC23
+      B09CB632F6971B7F60CC4F51C0DF11C71F98233E2F39FEEEC33113643FCFCFF8
+      8B7FA1AC0F64FD315CE301BF2595E85BC0E55C310575238065A5B8AC7B26E6EB
+      8F65B545396AE93057EE8E7D0EEBE403B18C4C1FBEC33E9CD3B640190619FD11
+      B64926EA54371C1F5BA18FDA02E7CA1FF895215C4B9D8EB20B72D99D9B83C471
+      6BE5F330EDF37EFD6F8BF9CE4F711DF308DAD1B770CCD88B61C598263E0CF321
+      B33F3A9B6BE31A1A1A1A1AAEEC28F88EBF6438EB627DD92FCEE273BB68E43622
+      8497C97D3F1CC6361F849CC1F72C22D0EFF5DA42F337881F89CF7EAAF8F50C45
+      F14EFC5524FE7408E21B3BFF702CE3B4E07D05BFF15AFE1B07BF697F0785917B
+      30B1BF2F4770FC598963E02B16EF398612C0B5CAEE5D460D0D0D0D8D7B6E3E78
+      3F3E87B8AA70BCB98A65B691E0DF1AC271AF5482DFBCEFD3F88C4F05CCF7D1AE
+      B8F08B8A15F669B1AC9FA7F9EF6C7EF427E139F2C070F323F74ECC0FEFEC0F08
+      173F726F27F9BF349F95849ADF8E3BD4FC4EDC2AF8F13D83D10EFD6DCE2BBAA8
+      947FE43E80EF1B3CC771EFB0BB6F45FCA371FF83817F270BEEBB73A8F41F3969
+      1D0ECB72AB923FAE0ED2DC2AE59FAB8314B76AFDC3FD1F6745B2160EFBEFF6F9
+      EA1D36FE45DAFF2A0DA1FF5922B9FFB294DB6BE71757B01DDAE8398E8686D2FD
+      273F647824D4BA25B9FFBF02DF414C8DF0FEFF1A7C57372904FBFFDD00F6CE0E
+      56B4FFDF2BA02D26BAE4CEC0FDA42A6C3FBC8BFA84CBFEFE4221F71897F7FE7A
+      28B84116611F8B8BFDFF2AB9E1FDDB72DCC3DEC986BF50757F13EEE033271BFE
+      8F14DF776B7C579CA6F9A7C4FE7F2B5C70C99D2CB89F5A2B5BCDED3FE7B118DF
+      05FD5492BB8DC57E6D8A410EFBEF29B670EFA37EEAC07D3F7716831546B9E0E7
+      E5A92DEE3DB78A03EE63127292EDB2FDADEA50C9857D53925B66FFBF4C1D9A72
+      F5F9BB24B7CCFE7F11E01C82095C9E0718FEE642472B24CF1F71AC83CBFB76BB
+      FFDF49D79F035BE292DBEDFE7FD5F0B2FF5F15DCECFF57E97F18E847F5F3B9FF
+      DF2BFCECFF4F2767F7787DCF22CBA70FACF7FFEBFDFF1A1A1A1A77FBBA5A02EE
+      11DDAC70EDDFC466DC1B273A3BAF29C3C130BC7B59CE9FCF87FC8F84F1FDCF87
+      2DF873487C4E08FAD6B67CCDAFF965F8893EC399648911E0A77A7448D6EF0C11
+      BF741D24F807096C45193DFB0DCFB6B0AD83E05D018A8102FB5B2E48FF0E77DE
+      814C1DA60AD6733EB4B2BF648F738160FC99C8A595A9432E37FE14A8DC1B2D53
+      87308CD98B39FE6B56FD1BA63A5CC3B33093DDDA070575984FB88F627DF684B9
+      1D9A136EA9F75D435007532677A9383FD9631D06A83CFB404343236CF3BF79F7
+      E8FC6FB09EFFDD11F30F78CEF87D86FB22C4FF09A6591A21FE8F31CD9208B6FF
+      B048B5BF03C70391E2C739D769D17B682AF8E14C2D41F8707CB7C59CAB45A9E6
+      C7F7ECE07CED2116670D5EE2ECDB1C95FC781EDE25B2976D0886B7E7CE3930F1
+      35FF8E87577E3CE7EA3857FE57D8E676CFFD3FA76708FAE0DFE0639C79D79405
+      2FFCB8F723C7275AEBF5375FEB3FA180DBF51F9538E071FD4785FFF95238CEC6
+      D3D0D0D06864FBFF4B1BC1FE7F99FD5757C9FB72AA6C7F9587FDFF250AFBB4C4
+      C3FEBF46C30F67207B68F33C85FC5EF60496DE2DFC5AFEEA9E2758CE2FC2C42F
+      ECFF7B843FA2EDEFE2AC70D11CF44018F87364EC4284F90B23C85F28594E28F8
+      0B5D94A39ABFD065392AF90B3DD86AAFFED77E7ECF96C7B142C5FEFFC53EC62A
+      BFFBFF17EB798C868686864684D67BA4CF830CF17A8FE31C59E17943D4FFD82F
+      7B1E91AAF396DC3C3FA2E73169FED0F00B9E5D6687F3FEB9F7832DCF630C75FB
+      631D82DC91E87FFE1B5C5AFE1B157FA4ED6F6904C79F92109DF7A6CF83D3D0D0
+      D0D0F0FA5D1ED767E7AB785ED488F8AB44CF9325CAC8133CFFD7CF5F1B3F7F29
+      224F217F9E59AEB6317795AD84F3A1FA4488BB0FEEB1BE1D893A70FCBD23D806
+      7DB42CDE553A1551FBABC7BF46C31F69FFEB9EF47F35343434EE003F01CE3A99
+      C15084679D6687E89CD121DC33BC009E53F0B1E8DD2B76C5C1B9AFF80DF011F0
+      8CDD25EF83F85CFC9605475F866936DF1A586B716E2E9CD9FC3B99EFFDB2AB3F
+      C3459B712809CFD651BEFF02DF4538EB50460C7EDFCEEBB38F1FD8F0BF26913F
+      15BFD7EC95BF4CC07D9FC419F780B128577ECE436E26984BC9E4DF887DF0A58F
+      3A589DBF2E7B4F37F1CCF302177C6F23CCDFDFF5C10FF8039C89E6E2FC719EDF
+      EA5B7ADF71C10FFAFC28E6F1F2DC305BB0FFB6DA4519D0FF5D70DF701539035A
+      266F6F810EFCDEE57DFC1BBE6580FB76A763D80EFC469BDD592E4936EB395EE4
+      F93CCAE549B0FD642FF1098BB4E71C6CE0211F7A55C09555206B7F489EB93EF8
+      33B9B2ACBEE9F082037F96CDBEED06FB29389D88B178979A3FA3BC93037F33C1
+      59EB2556F35982531665C57269764A8EFF9F79E03FCC9501367A25F7FD948024
+      FF5E0FFC7B04EF83D4E219920FB9F07FDEF1C0BFD3623FCE482FDFC2E2BE2B2A
+      CBBF59A1DFB9D5037FB19E1768B885A12FD7D7850B178C63C78E19BB76EDAA03
+      FC0F61A1BC4E9C38612C59B2C4C8C8C8108EBF10B774E952E3E4C993CA78CF9D
+      3B67CC9A35CB888E8E96F6036262628CBCBC3CE3FCF9F3BEB8CBCBCB8D76EDDA
+      D52B3B2929C9183F7EBCB16CD932A3A8A8A80EF0FFB871E38CC4C4C47A69DBB7
+      6F6F1C3C78D013F7B66DDB8CD8D8D86059696969C6A64D9B8C9A9A1A611E88DB
+      B871A311080482F9E2E2E28CEDDBB7BBBE6FCA3D75EA54E3E6CD9BD2F96FDCB8
+      614C9E3CB95E1D64DB01FA9BB6F9CA952B3DF7DFF2E5CBEBF5858C3CCC9C3933
+      9867D2A449F5E2860E1DDA40D69C2E683B332DC8A4938E99720EFDCDB73984D3
+      7E91A907F4456A6A6A502FEC7413F4DB2C0F648DBFCCB8A8A828611D6EDDBA65
+      DCBE7DBB5EBEF5EBD707D3807D105DE9E9E9411DB3927327BD372FBEDDE0B7A9
+      9B60A34436D5BC2FD06FF3AAAEAEB6E437AF55AB5649F5434E4E4EB0EDAC6CF5
+      D1A3478365AC58B1C2B20C118F0C3FB4BB99A6B2B2B2413C8C2366FCBA75EB6C
+      F941A6A92EC9F0AF5DBB3698A6ACACAC413C8499F190D6CBFD4F983041C8BF66
+      CD9A60BADDBB773788873631E3C16EC8F2D330D03519DD82F1DA4EFE602C71E2
+      87F66AD9B2A5B42D1A3B766C50FE2E5EBC6899C61CDBE3E3E32DEDBD9DEE4D9B
+      364DC80D65252424D4A5EBDBB7AF948C6ED8B0419A9FE7AEADADADF71BC66833
+      2D8CD5A20B6C23D84848076328DF9F6EEF1BAEEBD7AF1B1D3A7408DADF53A74E
+      D9A68731C22C3B3737D7B7FF3465CA946079B367CF764C0F7A0D63A5932EC85C
+      D0D66639292929D23E2AF80AE0339879C197B0D32DAB3687B6A3FE47454585AB
+      BA83CF44EB006328C8A49D1F0471206B667F7BF5BF683BD0BE00801E817D005D
+      013B0D00DB02E38BA963B4CDDDDEB7953C804C9A7A21EB7FE7E7E72B9D93806E
+      C23D8BE61F60D7323333EB64CE49C754CFBF8E1F3F2EB4A9FAB2BFFE0FEB924D
+      7B
     }
   end
   object ALWidgets: TActionList
@@ -299,5 +327,12 @@ object MainForm: TMainForm
       ImageIndex = 1
       OnExecute = AGoExternalExecute
     end
+    object AOpenDev: TAction
+      Caption = 'AOpenDev'
+      Enabled = False
+      ImageIndex = 11
+      OnExecute = AOpenDevExecute
+      OnUpdate = AGoUpdate
+    end
   end
 end
diff --git a/demo/webwidget/nativedesign/frmmain.pp b/demo/webwidget/nativedesign/frmmain.pp
index 3038b72..e239df7 100644
--- a/demo/webwidget/nativedesign/frmmain.pp
+++ b/demo/webwidget/nativedesign/frmmain.pp
@@ -19,6 +19,7 @@ type
   { TMainForm }
 
   TMainForm = class(TForm)
+    AOpenDev: TAction;
     AGoExternal: TAction;
     AGo: TAction;
     ALWidgets: TActionList;
@@ -37,6 +38,7 @@ type
     Splitter1: TSplitter;
     Splitter2: TSplitter;
     TBExternalGo: TToolButton;
+    TBExternalGo1: TToolButton;
     TSInspector: TTabSheet;
     TSBrowser: TTabSheet;
     TSLog: TTabSheet;
@@ -46,6 +48,7 @@ type
     procedure AGoExecute(Sender: TObject);
     procedure AGoExternalExecute(Sender: TObject);
     procedure AGoUpdate(Sender: TObject);
+    procedure AOpenDevExecute(Sender: TObject);
     procedure BrowserWindow1BrowserClosed(Sender: TObject);
     procedure BrowserWindow1BrowserCreated(Sender: TObject);
     procedure ChromiumConsoleMessage(Sender: TObject;
@@ -149,6 +152,15 @@ begin
   (Sender as Taction).Enabled:=FAllowGo;
 end;
 
+procedure TMainForm.AOpenDevExecute(Sender: TObject);
+var
+  p: TPoint;
+begin
+  p.X := 0;
+  p.Y := 0;
+  BrowserWindow1.Chromium.ShowDevTools(p,nil);
+end;
+
 procedure TMainForm.BrowserWindow1BrowserClosed(Sender: TObject);
 begin
   Close;