Bug 1624889 - Ensure RDM sets the viewport width and height when opened from the Style Editor r=bradwerth
authorMicah Tigley <mtigley@mozilla.com>
Wed, 25 Mar 2020 21:14:56 +0000
changeset 520441 22baf134cf80a5aecee934132f3961fd7b7777ce
parent 520440 1dcf0f0c9300f2385ab5b33b102a9a41d7686183
child 520442 5a77af5c8083d32c334b2c0d720fe90aee33fd45
push id37250
push userdvarga@mozilla.com
push dateThu, 26 Mar 2020 04:04:15 +0000
treeherdermozilla-central@85bae8580dde [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbradwerth
bugs1624889
milestone76.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1624889 - Ensure RDM sets the viewport width and height when opened from the Style Editor r=bradwerth Differential Revision: https://phabricator.services.mozilla.com/D68234
devtools/client/responsive/ui.js
devtools/client/styleeditor/StyleEditorUI.jsm
devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
--- a/devtools/client/responsive/ui.js
+++ b/devtools/client/responsive/ui.js
@@ -1153,17 +1153,26 @@ class ResponsiveUI {
    */
   async setViewportSize(size) {
     await this.inited;
     if (!this.isBrowserUIEnabled) {
       this._toolWindow.setViewportSize(size);
       return;
     }
 
-    const { width, height } = size;
+    // Ensure that width and height are valid.
+    let { width, height } = size;
+    if (!size.width) {
+      width = this.getViewportSize().width;
+    }
+
+    if (!size.height) {
+      height = this.getViewportSize().height;
+    }
+
     this.rdmFrame.contentWindow.setViewportSize({ width, height });
     this.updateViewportSize(width, height);
   }
 
   /**
    * Helper for tests/reloading the viewport. Assumes a single viewport for now.
    */
   getViewportBrowser() {
--- a/devtools/client/styleeditor/StyleEditorUI.jsm
+++ b/devtools/client/styleeditor/StyleEditorUI.jsm
@@ -1090,30 +1090,31 @@ StyleEditorUI.prototype = {
 
     const options = isWidthCond ? { width: mediaVal } : { height: mediaVal };
     this._launchResponsiveMode(options);
     e.preventDefault();
     e.stopPropagation();
   },
 
   /**
-   * Launches the responsive mode and emits an event with data containing
-   * a specific width and height
+   * Launches the responsive mode with a specific width or height.
+   *
    * @param  {object} options
    *         Object with width or/and height properties.
    */
   async _launchResponsiveMode(options = {}) {
     const tab = this.currentTarget.localTab;
     const win = this.currentTarget.localTab.ownerDocument.defaultView;
 
     await ResponsiveUIManager.openIfNeeded(win, tab, {
       trigger: "style_editor",
     });
+    this.emit("responsive-mode-opened");
 
-    this.emit("responsive-mode-opened", options);
+    ResponsiveUIManager.getResponsiveUIForTab(tab).setViewportSize(options);
   },
 
   /**
    * Jump cursor to the editor for a stylesheet and line number for a rule.
    *
    * @param  {object} location
    *         Location object with 'line', 'column', and 'source' properties.
    */
--- a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
@@ -69,29 +69,24 @@ async function testMediaLink(editor, tab
   const sidebar = editor.details.querySelector(".stylesheet-sidebar");
   let conditions = sidebar.querySelectorAll(".media-rule-condition");
 
   const onMediaChange = once(ui, "media-list-changed");
   const onRDMOpened = once(ui, "responsive-mode-opened");
 
   info("Launching responsive mode");
   conditions[itemIndex].querySelector(responsiveModeToggleClass).click();
-
-  const size = await onRDMOpened;
-
+  await onRDMOpened;
   const rdmUI = ResponsiveUIManager.getResponsiveUIForTab(tab);
 
-  rdmUI.setViewportSize(size);
-
-  const onContentResize = waitForResizeTo(rdmUI, type, value);
+  await waitForResizeTo(rdmUI, type, value);
   rdmUI.transitionsEnabled = false;
 
   info("Waiting for the @media list to update");
   await onMediaChange;
-  await onContentResize;
 
   ok(
     ResponsiveUIManager.isActiveForTab(tab),
     "Responsive mode should be active."
   );
   conditions = sidebar.querySelectorAll(".media-rule-condition");
   ok(
     !conditions[itemIndex].classList.contains("media-condition-unmatched"),