Add f-twelve web console

package.json

@@ -57,6 +57,7 @@
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "events": "^3.3.0",
+    "f-twelve": "^2.3.4",
     "i18next": "^23.0.0",
     "i18next-browser-languagedetector": "^7.0.0",
     "i18next-http-backend": "^2.0.0",

src/App.tsx

@@ -25,6 +25,7 @@ import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
 import { History } from "history";
 import { TooltipProvider } from "@vector-im/compound-web";
+import WebConsole from "f-twelve";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
@@ -39,6 +40,7 @@ import { widget } from "./widget";
 import { useTheme } from "./useTheme";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
+WebConsole.enable({ show: true });
 
 interface SimpleProviderProps {
   children: JSX.Element;

src/f-twelve.d.ts

@@ -0,0 +1,23 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+declare module "f-twelve" {
+  interface EnableOpts {
+    show: boolean;
+  }
+  export function enable(opts: EnableOpts): void;
+  export function show(): void;
+  export function hide(): void;
+}

src/settings/SettingsModal.tsx

@@ -13,8 +13,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-
-import { ChangeEvent, FC, Key, ReactNode } from "react";
+import WebConsole from "f-twelve";
+import { ChangeEvent, FC, Key, ReactNode, useEffect } from "react";
 import { Item } from "@react-stately/collections";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk";
@@ -34,6 +34,7 @@ import {
   useDeveloperSettingsTab,
   useShowConnectionStats,
   isFirefox,
+  useShowInlineWebConsole,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Body, Caption } from "../typography/Typography";
@@ -228,6 +229,15 @@ export const SettingsModal: FC<Props> = ({
     </TabItem>
   );
 
+  const [webConsoleShown, setWebConsoleShown] = useShowInlineWebConsole();
+  useEffect(() => {
+    if (webConsoleShown) {
+      WebConsole.show();
+    } else {
+      WebConsole.hide();
+    }
+  });
+
   const developerTab = (
     <TabItem
       key="developer"
@@ -257,6 +267,21 @@ export const SettingsModal: FC<Props> = ({
           }
         />
       </FieldRow>
+      <FieldRow>
+        <InputField
+          id="showInlineWebConsole"
+          name="web-console"
+          label={t("Show web console")}
+          description={t(
+            "Show a console to observe the webapp log without the need of browser devtools.",
+          )}
+          type="checkbox"
+          checked={webConsoleShown}
+          onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+            setWebConsoleShown(e.target.checked)
+          }
+        />
+      </FieldRow>
     </TabItem>
   );
 

src/settings/useSetting.ts

@@ -102,3 +102,5 @@ export const useAudioOutput = (): Setting<string | undefined> =>
   useSetting<string | undefined>("audio-output", undefined);
 export const useVideoInput = (): Setting<string | undefined> =>
   useSetting<string | undefined>("video-input", undefined);
+export const useShowInlineWebConsole = (): Setting<boolean> =>
+  useSetting<boolean>("show-web-console", true);

src/widget.ts

@@ -123,7 +123,6 @@ export const widget = ((): WidgetHelpers | null => {
       const receiveState = [
         { eventType: EventType.RoomMember },
         { eventType: EventType.RoomEncryption },
-        { eventType: EventType.GroupCallPrefix },
         { eventType: EventType.GroupCallMemberPrefix },
       ];
       const sendRecvToDevice = [

yarn.lock

@@ -5058,6 +5058,13 @@ execa@^8.0.1:
     signal-exit "^4.1.0"
     strip-final-newline "^3.0.0"
 
+f-twelve@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/f-twelve/-/f-twelve-2.3.4.tgz#cfd67b3b1c0d458530b7329b8040b8714ef92685"
+  integrity sha512-G1W8qDICF8i4fo93jd1JZPJdpiyunFhExlKBGml6g+nPfOE5Tc+zUaMb74laqe9o/cfakn/OJhYA4mlwqZf4Gg==
+  dependencies:
+    preact "^10.5.3"
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -7146,6 +7153,11 @@ preact@^10.19.3:
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.20.1.tgz#1bc598ab630d8612978f7533da45809a8298542b"
   integrity sha512-JIFjgFg9B2qnOoGiYMVBtrcFxHqn+dNXbq76bVmcaHYJFYR4lW67AOcXgAYQQTDYXDOg/kTZrKPNCdRgJ2UJmw==
 
+preact@^10.5.3:
+  version "10.18.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.18.1.tgz#3b84bb305f0b05f4ad5784b981d15fcec4e105da"
+  integrity sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"