main window add block mask, cm add keyboard block (#8640)

* block window body only so user can still click minisize button.
* cm doesn't show mask
* Remove focusable Offstage in tabbar_widget.dart

Signed-off-by: 21pages <sunboeasy@gmail.com>

flutter/lib/common.dart

@@ -2715,15 +2715,21 @@ Future<void> shouldBeBlocked(RxBool block, WhetherUseRemoteBlock? use) async {
 }
 
 typedef WhetherUseRemoteBlock = Future<bool> Function();
-Widget buildRemoteBlock({required Widget child, WhetherUseRemoteBlock? use}) {
+Widget buildRemoteBlock(
-  var block = false.obs;
+    {required Widget child,
+    required RxBool block,
+    required bool mask,
+    WhetherUseRemoteBlock? use}) {
   return Obx(() => MouseRegion(
         onEnter: (_) async {
           await shouldBeBlocked(block, use);
         },
         onExit: (event) => block.value = false,
         child: Stack(children: [
-          child,
+          // scope block tab
+          FocusScope(child: child, canRequestFocus: !block.value),
+          // mask block click, cm not block click and still use check_click_time to avoid block local click
+          if (mask)
             Offstage(
                 offstage: !block.value,
                 child: Container(

flutter/lib/desktop/pages/desktop_tab_page.dart

@@ -116,22 +116,14 @@ class _DesktopTabPageState extends State<DesktopTabPage>
                   isClose: false,
                 ),
               ),
+              blockTab: _block,
             )));
-    widget() => MouseRegion(
-        onEnter: (_) async {
-          // mouseIn = true;
-          await shouldBeBlocked(_block, canBeBlocked);
-        },
-        onExit: (_) {
-          // mouseIn = false;
-        },
-        child: FocusScope(child: tabWidget, canRequestFocus: !_block.value));
     return isMacOS || kUseCompatibleUiMode
-        ? Obx(() => widget())
+        ? Obx(() => tabWidget)
         : Obx(
             () => DragToResizeArea(
               resizeEdgeSize: stateGlobal.resizeEdgeSize.value,
-              child: widget(),
+              child: tabWidget,
             ),
           );
   }

flutter/lib/desktop/pages/server_page.dart

@@ -104,7 +104,18 @@ class ConnectionManager extends StatefulWidget {
   State<StatefulWidget> createState() => ConnectionManagerState();
 }
 
-class ConnectionManagerState extends State<ConnectionManager> {
+class ConnectionManagerState extends State<ConnectionManager>
+    with WidgetsBindingObserver {
+  final RxBool _block = false.obs;
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    super.didChangeAppLifecycleState(state);
+    if (state == AppLifecycleState.resumed) {
+      shouldBeBlocked(_block, null);
+    }
+  }
+
   @override
   void initState() {
     gFFI.serverModel.updateClientState();
@@ -127,9 +138,16 @@ class ConnectionManagerState extends State<ConnectionManager> {
       }
     };
     gFFI.chatModel.isConnManager = true;
+    WidgetsBinding.instance.addObserver(this);
     super.initState();
   }
 
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final serverModel = Provider.of<ServerModel>(context);
@@ -165,6 +183,7 @@ class ConnectionManagerState extends State<ConnectionManager> {
               selectedBorderColor: MyTheme.accent,
               maxLabelWidth: 100,
               tail: null, //buildScrollJumper(),
+              blockTab: _block,
               selectedTabBackgroundColor:
                   Theme.of(context).hintColor.withOpacity(0),
               tabBuilder: (key, icon, label, themeConf) {
@@ -208,14 +227,9 @@ class ConnectionManagerState extends State<ConnectionManager> {
                           builder: (_, model, child) => SizedBox(
                                 width: realChatPageWidth,
                                 child: buildRemoteBlock(
-                                  child: Container(
+                                    child: buildSidePage(),
-                                      decoration: BoxDecoration(
+                                    block: _block,
-                                          border: Border(
+                                    mask: true),
-                                              right: BorderSide(
-                                                  color: Theme.of(context)
-                                                      .dividerColor))),
-                                      child: buildSidePage()),
-                                ),
                               )),
                     SizedBox(
                         width: realClosedWidth,

flutter/lib/desktop/widgets/tabbar_widget.dart

@@ -248,6 +248,7 @@ class DesktopTab extends StatelessWidget {
   final Color? selectedTabBackgroundColor;
   final Color? unSelectedTabBackgroundColor;
   final Color? selectedBorderColor;
+  final RxBool? blockTab;
 
   final DesktopTabController controller;
 
@@ -277,6 +278,7 @@ class DesktopTab extends StatelessWidget {
     this.selectedTabBackgroundColor,
     this.unSelectedTabBackgroundColor,
     this.selectedBorderColor,
+    this.blockTab,
   }) : super(key: key) {
     tabType = controller.tabType;
     isMainWindow = tabType == DesktopTabType.main ||
@@ -292,10 +294,10 @@ class DesktopTab extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Column(children: [
-      Obx(() => Offstage(
+      Obx(() {
-          offstage: !stateGlobal.showTabBar.isTrue ||
+        if (stateGlobal.showTabBar.isTrue &&
-              (kUseCompatibleUiMode && isHideSingleItem()),
+            !(kUseCompatibleUiMode && isHideSingleItem())) {
-          child: SizedBox(
+          return SizedBox(
             height: _kTabBarHeight,
             child: Column(
               children: [
@@ -308,7 +310,11 @@ class DesktopTab extends StatelessWidget {
                 ),
               ],
             ),
-          ))),
+          );
+        } else {
+          return Offstage();
+        }
+      }),
       Expanded(
           child: pageViewBuilder != null
               ? pageViewBuilder!(_buildPageView())
@@ -317,10 +323,15 @@ class DesktopTab extends StatelessWidget {
   }
 
   Widget _buildBlock({required Widget child}) {
-    if (tabType != DesktopTabType.main) {
+    if (blockTab != null) {
+      return buildRemoteBlock(
+          child: child,
+          block: blockTab!,
+          use: canBeBlocked,
+          mask: tabType == DesktopTabType.main);
+    } else {
       return child;
     }
-    return buildRemoteBlock(child: child, use: canBeBlocked);
   }
 
   List<Widget> _tabWidgets = [];
@@ -703,22 +714,22 @@ class WindowActionPanelState extends State<WindowActionPanel>
     return Row(
       mainAxisAlignment: MainAxisAlignment.end,
       children: [
-        Obx(() => Offstage(
+        Obx(() {
-              offstage:
+          if (showTabDowndown() && existingInvisibleTab().isNotEmpty) {
-                  !(showTabDowndown() && existingInvisibleTab().isNotEmpty),
+            return _TabDropDownButton(
-              child: _TabDropDownButton(
                 controller: widget.tabController,
                 labelGetter: widget.labelGetter,
-                  tabkeys: existingInvisibleTab()),
+                tabkeys: existingInvisibleTab());
-            )),
+          } else {
-        Offstage(offstage: widget.tail == null, child: widget.tail),
+            return Offstage();
-        Offstage(
+          }
-          offstage: kUseCompatibleUiMode,
+        }),
-          child: Row(
+        if (widget.tail != null) widget.tail!,
+        if (!kUseCompatibleUiMode)
+          Row(
             children: [
-              Offstage(
+              if (widget.showMinimize && !isMacOS)
-                  offstage: !widget.showMinimize || isMacOS,
+                ActionIcon(
-                  child: ActionIcon(
                   message: 'Minimize',
                   icon: IconFont.min,
                   onTap: () {
@@ -729,10 +740,9 @@ class WindowActionPanelState extends State<WindowActionPanel>
                     }
                   },
                   isClose: false,
-                  )),
+                ),
-              Offstage(
+              if (widget.showMaximize && !isMacOS)
-                  offstage: !widget.showMaximize || isMacOS,
+                Obx(() => ActionIcon(
-                  child: Obx(() => ActionIcon(
                       message: stateGlobal.isMaximized.isTrue
                           ? 'Restore'
                           : 'Maximize',
@@ -743,10 +753,9 @@ class WindowActionPanelState extends State<WindowActionPanel>
                           ? null
                           : _toggleMaximize,
                       isClose: false,
-                      ))),
+                    )),
-              Offstage(
+              if (widget.showClose && !isMacOS)
-                  offstage: !widget.showClose || isMacOS,
+                ActionIcon(
-                  child: ActionIcon(
                   message: 'Close',
                   icon: IconFont.close,
                   onTap: () async {
@@ -765,10 +774,9 @@ class WindowActionPanelState extends State<WindowActionPanel>
                     }
                   },
                   isClose: true,
-                  ))
+                )
             ],
           ),
-        ),
       ],
     );
   }
@@ -1173,9 +1181,9 @@ class _CloseButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return SizedBox(
             width: _kIconSize,
-        child: Offstage(
+            child: () {
-          offstage: !visible,
+              if (visible) {
-          child: InkWell(
+                return InkWell(
                   hoverColor: MyTheme.tabbar(context).closeHoverColor,
                   customBorder: const CircleBorder(),
                   onTap: () => onClose(),
@@ -1186,8 +1194,12 @@ class _CloseButton extends StatelessWidget {
                         ? MyTheme.tabbar(context).selectedIconColor
                         : MyTheme.tabbar(context).unSelectedIconColor,
                   ),
-          ),
+                );
-        )).paddingOnly(left: 10);
+              } else {
+                return Offstage();
+              }
+            }())
+        .paddingOnly(left: 10);
   }
 }
 
@@ -1341,10 +1353,10 @@ class _TabDropDownButtonState extends State<_TabDropDownButton> {
                       child: InkWell(child: Text(label)),
                     ),
                     Obx(
-                      () => Offstage(
+                      () {
-                        offstage: !(tabInfo?.onTabCloseButton != null &&
+                        if (tabInfo?.onTabCloseButton != null &&
-                            menuHover.value),
+                            menuHover.value) {
-                        child: InkWell(
+                          return InkWell(
                               onTap: () {
                                 tabInfo?.onTabCloseButton?.call();
                                 if (Navigator.of(context).canPop()) {
@@ -1359,9 +1371,12 @@ class _TabDropDownButtonState extends State<_TabDropDownButton> {
                                       setState(() => btnHover.value = false),
                                   child: Icon(Icons.close,
                                       color:
-                                        btnHover.value ? Colors.red : null))),
+                                          btnHover.value ? Colors.red : null)));
+                        } else {
+                          return Offstage();
+                        }
+                      },
                     ),
-                    )
                   ],
                 ),
               ),