Bug 1694497 - [devtools] Set correct document direction for about:debugging's profiler dialog r=ladybenko

When opening the profiler dialog iframe, set the contentWindow.document direction based on the direction from the aboutdebugging document.
Add a test to check rtl is correctly set as the document direction for both about:debugging and the profiler dialog documents.

Differential Revision: https://phabricator.services.mozilla.com/D107209

devtools/client/aboutdebugging/src/components/ProfilerDialog.js

@@ -41,6 +41,13 @@ class ProfilerDialog extends PureComponent {
     this.props.hideProfilerDialog();
   }
 
+  setProfilerIframeDirection(frameWindow) {
+    // Set iframe direction according to the parent document direction.
+    const { documentElement } = document;
+    const dir = window.getComputedStyle(documentElement).direction;
+    frameWindow.document.documentElement.setAttribute("dir", dir);
+  }
+
   /**
    * The profiler iframe can either be the simplified devtools recording panel,
    * or the more detailed about:profiling settings page.
@@ -58,7 +65,10 @@ class ProfilerDialog extends PureComponent {
       case PROFILER_PAGE_CONTEXT.DEVTOOLS_REMOTE:
         src = clientWrapper.getPerformancePanelUrl();
         onLoad = e => {
-          clientWrapper.loadPerformanceProfiler(e.target.contentWindow, () => {
+          const frameWindow = e.target.contentWindow;
+          this.setProfilerIframeDirection(frameWindow);
+
+          clientWrapper.loadPerformanceProfiler(frameWindow, () => {
             switchProfilerContext(PROFILER_PAGE_CONTEXT.ABOUTPROFILING_REMOTE);
           });
         };
@@ -67,7 +77,10 @@ class ProfilerDialog extends PureComponent {
       case PROFILER_PAGE_CONTEXT.ABOUTPROFILING_REMOTE:
         src = "about:profiling#remote";
         onLoad = e => {
-          clientWrapper.loadAboutProfiling(e.target.contentWindow, () => {
+          const frameWindow = e.target.contentWindow;
+          this.setProfilerIframeDirection(frameWindow);
+
+          clientWrapper.loadAboutProfiling(frameWindow, () => {
             switchProfilerContext(PROFILER_PAGE_CONTEXT.DEVTOOLS_REMOTE);
           });
         };

devtools/client/aboutdebugging/test/browser/browser.ini

@@ -86,6 +86,7 @@ skip-if = debug
 [browser_aboutdebugging_real_usb_runtime_page_runtime_info.js]
 [browser_aboutdebugging_real_usb_sidebar.js]
 [browser_aboutdebugging_routes.js]
+[browser_aboutdebugging_rtl.js]
 [browser_aboutdebugging_runtime_compatibility_warning.js]
 [browser_aboutdebugging_runtime_disconnect_remote_runtime.js]
 [browser_aboutdebugging_runtime_remote_runtime_buttons.js]

devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_rtl.js

@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the about:debugging document and the profiler dialog document
+// use the expected document direction.
+add_task(async function test_direction_is_ltr_by_default() {
+  await testAboutDebuggingDocsDirection("ltr");
+});
+
+add_task(async function test_direction_is_rtl_for_bidi_pseudolocale() {
+  await pushPref("intl.l10n.pseudo", "bidi");
+  await testAboutDebuggingDocsDirection("rtl");
+});
+
+async function testAboutDebuggingDocsDirection(expectedDir) {
+  const mocks = new Mocks();
+  const { document, usbClient } = await setupTestForMockUSBRuntime(mocks);
+
+  is(document.dir, expectedDir, "document dir is " + expectedDir);
+
+  info("Open the profiler dialog");
+  await openProfilerDialog(usbClient, document);
+
+  const profilerDialogFrame = document.querySelector(
+    ".qa-profiler-dialog iframe"
+  );
+  ok(profilerDialogFrame, "Found Profiler dialog iframe");
+
+  const profilerDoc = profilerDialogFrame.contentWindow.document;
+  is(profilerDoc.dir, expectedDir, "Profiler document dir is " + expectedDir);
+
+  await teardownTestForMockUSBRuntime(mocks, document);
+}
+
+async function setupTestForMockUSBRuntime(mocks) {
+  info("Setup mock USB runtime");
+
+  const usbClient = mocks.createUSBRuntime("runtimeId", {
+    deviceName: "deviceName",
+    name: "runtimeName",
+  });
+
+  info("Open about:debugging and select runtime page for mock USB runtime");
+  const { document } = await openAboutDebugging();
+
+  mocks.emitUSBUpdate();
+  await connectToRuntime("deviceName", document);
+  await selectRuntime("deviceName", "runtimeName", document);
+
+  return { document, usbClient };
+}
+
+async function teardownTestForMockUSBRuntime(mocks, doc) {
+  info("Remove mock USB runtime");
+
+  mocks.removeUSBRuntime("runtimeId");
+  mocks.emitUSBUpdate();
+  await waitUntilUsbDeviceIsUnplugged("deviceName", doc);
+}