Backed out 5 changesets (bug 1617237) for devtools perma failures. CLOSED TREE

Backed out changeset 3acc06a17b26 (bug 1617237)
Backed out changeset dfdf021a542c (bug 1617237)
Backed out changeset 358ce0a1518f (bug 1617237)
Backed out changeset 2e647ae9ec48 (bug 1617237)
Backed out changeset 3e340cc988c8 (bug 1617237)

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

@@ -73,7 +73,6 @@ skip-if = debug || asan # This test leaks. See bug 1529005
 [browser_aboutdebugging_devtoolstoolbox_tooltip_markupview.js]
 [browser_aboutdebugging_fenix_runtime_display.js]
 [browser_aboutdebugging_message_close.js]
-[browser_aboutdebugging_navigate_to_url.js]
 [browser_aboutdebugging_navigate.js]
 [browser_aboutdebugging_persist_connection.js]
 [browser_aboutdebugging_process_category.js]

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

@@ -17,9 +17,11 @@ add_task(async function() {
     devtoolsTab,
     devtoolsWindow,
   } = await openAboutDevtoolsToolbox(document, tab, window, "about:home");
-  const targetUrl = devtoolsDocument.querySelector(".devtools-textinput");
+  const targetInfoHeader = devtoolsDocument.querySelector(
+    ".qa-debug-target-info"
+  );
   ok(
-    targetUrl.value.includes("about:home"),
+    targetInfoHeader.textContent.includes("about:home"),
     "about:devtools-toolbox is open for the target"
   );
 

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

@@ -1,82 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-const NEW_TAB_TITLE = "PAGE 2";
-const TAB_URL = "data:text/html,<title>PAGE</title>";
-const NEW_TAB_URL = `data:text/html,<title>${NEW_TAB_TITLE}</title>`;
-
-/**
- * This test file ensures that the URL input for DebugTargetInfo navigates the target to
- * the specified URL.
- */
-add_task(async function() {
-  const { document, tab, window } = await openAboutDebugging();
-
-  info("Open a new background tab.");
-  const debug_tab = await addTab(TAB_URL, { background: true });
-
-  await selectThisFirefoxPage(document, window.AboutDebugging.store);
-  const devToolsToolbox = await openAboutDevtoolsToolbox(
-    document,
-    tab,
-    window,
-    "PAGE"
-  );
-  const { devtoolsDocument, devtoolsTab, devtoolsWindow } = devToolsToolbox;
-
-  const urlInput = devtoolsDocument.querySelector(".devtools-textinput");
-  await synthesizeUrlKeyInput(devToolsToolbox, urlInput, NEW_TAB_URL);
-
-  info("Test that the debug target navigated to the specified URL.");
-  const toolbox = getToolbox(devtoolsWindow);
-  await waitUntil(
-    () =>
-      toolbox.target.url === NEW_TAB_URL &&
-      debug_tab.linkedBrowser.currentURI.spec === NEW_TAB_URL
-  );
-  ok(true, "Target navigated.");
-  ok(toolbox.target.title.includes(NEW_TAB_TITLE), "Target's title updated.");
-  is(urlInput.value, NEW_TAB_URL, "Input url updated.");
-
-  info("Remove the about:debugging tab.");
-  await removeTab(tab);
-
-  info("Remove the about:devtools-toolbox tab.");
-  await removeTab(devtoolsTab);
-
-  info("Remove the background tab");
-  await removeTab(debug_tab);
-});
-
-/**
- * Synthesizes key input inside the DebugTargetInfo's URL component.
- *
- * @param {DevToolsToolbox} toolbox
- *        The DevToolsToolbox debugging the target.
- * @param {HTMLElement} inputEl
- *        The <input> element to submit the URL with.
- * @param {String}  url
- *        The URL to navigate to.
- */
-async function synthesizeUrlKeyInput(toolbox, inputEl, url) {
-  const { devtoolsDocument, devtoolsWindow } = toolbox;
-
-  info("Wait for URL input to be focused.");
-  const onInputFocused = waitUntil(
-    () => devtoolsDocument.activeElement === inputEl
-  );
-  inputEl.focus();
-  await onInputFocused;
-
-  info("Synthesize entering URL into text field");
-  const onInputChange = waitUntil(() => inputEl.value === url);
-  for (const key of NEW_TAB_URL.split("")) {
-    EventUtils.synthesizeKey(key, {}, devtoolsWindow);
-  }
-  await onInputChange;
-
-  info("Submit URL to navigate to");
-  EventUtils.synthesizeKey("KEY_Enter");
-}

devtools/client/framework/components/DebugTargetInfo.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Services = require("Services");
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
@@ -36,16 +35,6 @@ class DebugTargetInfo extends PureComponent {
     };
   }
 
-  constructor(props) {
-    super(props);
-
-    this.state = { urlValue: props.toolbox.target.url };
-
-    this.onChange = this.onChange.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
-
   componentDidMount() {
     this.updateTitle();
   }
@@ -147,36 +136,6 @@ class DebugTargetInfo extends PureComponent {
     }
   }
 
-  onChange({ target }) {
-    this.setState({ urlValue: target.value });
-  }
-
-  onFocus({ target }) {
-    target.select();
-  }
-
-  onSubmit(event) {
-    event.preventDefault();
-    let url = this.state.urlValue;
-
-    if (!url || !url.length) {
-      return;
-    }
-
-    try {
-      // Get the URL from the fixup service:
-      const flags = Services.uriFixup.FIXUP_FLAG_FIX_SCHEME_TYPOS;
-      const uriInfo = Services.uriFixup.getFixupURIInfo(url, flags);
-      url = uriInfo.fixedURI.spec;
-    } catch (ex) {
-      // The getFixupURIInfo service will throw an error if a malformed URI is
-      // produced from the input.
-      console.error(ex);
-    }
-
-    this.props.toolbox.target.navigateTo({ url });
-  }
-
   shallRenderConnection() {
     const { connectionType } = this.props.debugTargetData;
     const renderableTypes = [CONNECTION_TYPES.USB, CONNECTION_TYPES.NETWORK];
@@ -217,50 +176,21 @@ class DebugTargetInfo extends PureComponent {
     );
   }
 
-  renderTargetTitle() {
+  renderTarget() {
     const title = this.props.toolbox.target.name;
+    const url = this.props.toolbox.target.url;
 
     const { image, l10nId } = this.getAssetsForDebugTargetType();
 
     return dom.span(
       {
-        className: "iconized-label debug-target-title",
+        className: "iconized-label",
       },
       dom.img({ src: image, alt: this.props.L10N.getStr(l10nId) }),
       title
         ? dom.b({ className: "devtools-ellipsis-text qa-target-title" }, title)
-        : null
+        : null,
-    );
+      dom.span({ className: "devtools-ellipsis-text" }, url)
-  }
-
-  renderTargetURI() {
-    const url = this.props.toolbox.target.url;
-    const { targetType } = this.props.debugTargetData;
-    const isURLEditable = targetType === DEBUG_TARGET_TYPES.TAB;
-
-    return dom.span(
-      {
-        key: url,
-        className: "debug-target-url",
-      },
-      isURLEditable
-        ? this.renderTargetInput(url)
-        : dom.span({ className: "devtools-ellipsis-text" }, url)
-    );
-  }
-
-  renderTargetInput(url) {
-    return dom.form(
-      {
-        className: "debug-target-url-form",
-        onSubmit: this.onSubmit,
-      },
-      dom.input({
-        className: "devtools-textinput debug-target-url-input",
-        onChange: this.onChange,
-        onFocus: this.onFocus,
-        defaultValue: url,
-      })
     );
   }
 
@@ -271,8 +201,7 @@ class DebugTargetInfo extends PureComponent {
       },
       this.shallRenderConnection() ? this.renderConnection() : null,
       this.renderRuntime(),
-      this.renderTargetTitle(),
+      this.renderTarget()
-      this.renderTargetURI()
     );
   }
 }

devtools/client/framework/components/ToolboxController.js

@@ -59,7 +59,6 @@ class ToolboxController extends Component {
     this.setPanelDefinitions = this.setPanelDefinitions.bind(this);
     this.updateButtonIds = this.updateButtonIds.bind(this);
     this.updateFocusedButton = this.updateFocusedButton.bind(this);
-    this.setDebugTargetData = this.setDebugTargetData.bind(this);
   }
 
   shouldComponentUpdate() {
@@ -194,10 +193,6 @@ class ToolboxController extends Component {
     );
   }
 
-  setDebugTargetData(data) {
-    this.setState({ debugTargetData: data });
-  }
-
   render() {
     return ToolboxToolbar(Object.assign({}, this.props, this.state));
   }

devtools/client/framework/toolbox.js

@@ -355,7 +355,6 @@ function Toolbox(
   this._onResumedState = this._onResumedState.bind(this);
   this._onTargetAvailable = this._onTargetAvailable.bind(this);
   this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
-  this._onNavigate = this._onNavigate.bind(this);
 
   this.isPaintFlashing = false;
 
@@ -720,7 +719,7 @@ Toolbox.prototype = {
       // Attach to a new top-level target.
       // For now, register these event listeners only on the top level target
       targetFront.on("will-navigate", this._onWillNavigate);
-      targetFront.on("navigate", this._onNavigate);
+      targetFront.on("navigate", this._refreshHostTitle);
       targetFront.on("frame-update", this._updateFrames);
       targetFront.on("inspect-object", this._onInspectObject);
 
@@ -820,6 +819,13 @@ Toolbox.prototype = {
         this._URL = this.win.location.href;
       }
 
+      if (this.hostType === Toolbox.HostType.PAGE) {
+        // Displays DebugTargetInfo which shows the basic information of debug target,
+        // if `about:devtools-toolbox` URL opens directly.
+        // DebugTargetInfo requires this._debugTargetData to be populated
+        this._debugTargetData = this._getDebugTargetData();
+      }
+
       const domReady = new Promise(resolve => {
         DOMHelpers.onceDOMReady(
           this.win,
@@ -872,18 +878,15 @@ Toolbox.prototype = {
       this._addChromeEventHandlerEvents();
       this._registerOverlays();
 
-      // Get the tab bar of the ToolboxController to attach the "keypress" event listener to.
+      this._componentMount.addEventListener(
-      this._tabBar = this.doc.querySelector(".devtools-tabbar");
+        "keypress",
-      this._tabBar.addEventListener("keypress", this._onToolbarArrowKeypress);
+        this._onToolbarArrowKeypress
-
+      );
       this._componentMount.setAttribute(
         "aria-label",
         L10N.getStr("toolbox.label")
       );
 
-      // Set debug target data on the ToolboxController component.
-      this._setDebugTargetData();
-
       this.webconsolePanel = this.doc.querySelector(
         "#toolbox-panel-webconsole"
       );
@@ -990,7 +993,7 @@ Toolbox.prototype = {
   detachTarget() {
     this.target.off("inspect-object", this._onInspectObject);
     this.target.off("will-navigate", this._onWillNavigate);
-    this.target.off("navigate", this._onNavigate);
+    this.target.off("navigate", this._refreshHostTitle);
     this.target.off("frame-update", this._updateFrames);
 
     // Detach the thread
@@ -1823,6 +1826,7 @@ Toolbox.prototype = {
       closeToolbox: this.closeToolbox,
       focusButton: this._onToolbarFocus,
       toolbox: this,
+      debugTargetData: this._debugTargetData,
       onTabsOrderUpdated: this._onTabsOrderUpdated,
     });
 
@@ -1856,7 +1860,7 @@ Toolbox.prototype = {
       return;
     }
 
-    const buttons = [...this._tabBar.querySelectorAll("button")];
+    const buttons = [...this._componentMount.querySelectorAll("button")];
     const curIndex = buttons.indexOf(target);
 
     if (curIndex === -1) {
@@ -3700,13 +3704,12 @@ Toolbox.prototype = {
       this.webconsolePanel = null;
     }
     if (this._componentMount) {
-      this._tabBar.removeEventListener(
+      this._componentMount.removeEventListener(
         "keypress",
         this._onToolbarArrowKeypress
       );
       this.ReactDOM.unmountComponentAtNode(this._componentMount);
       this._componentMount = null;
-      this._tabBar = null;
     }
 
     const outstanding = [];
@@ -4202,24 +4205,4 @@ Toolbox.prototype = {
 
     return id;
   },
-
-  /**
-   * Fired when the user navigates to another page.
-   */
-  _onNavigate: function() {
-    this._refreshHostTitle();
-    this._setDebugTargetData();
-  },
-
-  /**
-   * Sets basic information on the DebugTargetInfo component
-   */
-  _setDebugTargetData() {
-    if (this.hostType === Toolbox.HostType.PAGE) {
-      // Displays DebugTargetInfo which shows the basic information of debug target,
-      // if `about:devtools-toolbox` URL opens directly.
-      // DebugTargetInfo requires this._debugTargetData to be populated
-      this.component.setDebugTargetData(this._getDebugTargetData());
-    }
-  },
 };

devtools/client/themes/toolbox.css

@@ -9,13 +9,11 @@
  *  +------------+--------------+------------------------+
  */
 .debug-target-info {
-  --border-inline-end-width: 1px;
-  --padding-inline-end-size: 24px;
   display: flex;
   background: var(--theme-tab-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   padding: 4px 0;
-  font-size: 1.35em;
+  font-size: 1.2em;
   color: var(--theme-toolbar-color);
 }
 
@@ -31,12 +29,12 @@
   grid-template-columns: 20px auto auto;
   grid-column-gap: 8px;
   align-items: center;
-  padding: 0 var(--padding-inline-end-size);
+  padding: 0 24px;
   white-space: nowrap;
 }
 
 .debug-target-info .iconized-label:not(:last-child) {
-  border-inline-end: var(--border-inline-end-width) solid var(--theme-splitter-color);
+  border-inline-end: 1px solid var(--theme-splitter-color);
 }
 
 .debug-target-info .iconized-label img {
@@ -49,33 +47,6 @@
   fill: var(--theme-toolbar-color);
 }
 
-
-/* DebugTargetInfo's renderTargetTitle() component should look like it's in the same
-  section as renderTargetURI() */
-.debug-target-info .debug-target-title {
-  --border-inline-end-width: 0;
-  padding-inline-end: 0;
-}
-
-.debug-target-info .debug-target-url {
-  display: flex;
-  flex-grow: 1;
-  padding-inline-end: var(--padding-inline-end-size);
-  align-self: center;
-}
-
-.debug-target-info .debug-target-url-input {
-  border: 1px solid var(--theme-toolbarbutton-active-background);
-  border-radius: 2px;
-  height: 20px;
-  padding-inline-start: 10px;
-}
-
-.debug-target-info .debug-target-url-input,
-.debug-target-info .debug-target-url-form {
-  width: 100%;
-}
-
 /* Toolbox tabbar */
 
 .devtools-tabbar {