From 37572899bcdf950d687233cd04fa2c22ba20ddaf Mon Sep 17 00:00:00 2001
From: Julian Descottes <jdescottes@mozilla.com>
Date: Wed, 10 Mar 2021 12:29:11 +0000
Subject: [PATCH] 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
---
 .../src/components/ProfilerDialog.js          | 17 ++++-
 .../aboutdebugging/test/browser/browser.ini   |  1 +
 .../browser/browser_aboutdebugging_rtl.js     | 62 +++++++++++++++++++
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_rtl.js

diff --git a/devtools/client/aboutdebugging/src/components/ProfilerDialog.js b/devtools/client/aboutdebugging/src/components/ProfilerDialog.js
index 964129335709..292b913ce477 100644
--- a/devtools/client/aboutdebugging/src/components/ProfilerDialog.js
+++ b/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);
           });
         };
diff --git a/devtools/client/aboutdebugging/test/browser/browser.ini b/devtools/client/aboutdebugging/test/browser/browser.ini
index 1da038eb96aa..3940da238d38 100644
--- a/devtools/client/aboutdebugging/test/browser/browser.ini
+++ b/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]
diff --git a/devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_rtl.js b/devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_rtl.js
new file mode 100644
index 000000000000..4424df6ea81a
--- /dev/null
+++ b/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);
+}