1534984 - Add a way to emulate print media type from DevTools

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P1)

Description

[Patrick Brosset <:pbro>]

It used to be possible to switch the media type via GCLI before it got removed in bug 1462398.

See https://discourse.mozilla.org/t/how-to-media-emulate-print-without-developer-toolbar-gcli/30975 for a thread from users requesting this to be added back.

If we do want to add it back, then let's use this bug.

Technically speaking, we can simply salvage the code that was removed from GCLI.
In order to make this simple, I've extracted it from the Mercurial history. Here it is:

/* 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";

const {Ci} = require("chrome");
const l10n = require("gcli/l10n");

function getContentViewer(context) {
  let {window} = context.environment;
  return window.QueryInterface(Ci.nsIInterfaceRequestor)
               .getInterface(Ci.nsIDocShell)
               .contentViewer;
}

exports.items = [
  {
    name: "media",
    description: l10n.lookup("mediaDesc")
  },
  {
    item: "command",
    runAt: "server",
    name: "media emulate",
    description: l10n.lookup("mediaEmulateDesc"),
    manual: l10n.lookup("mediaEmulateManual"),
    params: [
      {
        name: "type",
        description: l10n.lookup("mediaEmulateType"),
        type: {
          name: "selection",
          data: [
            "braille", "embossed", "handheld", "print", "projection",
            "screen", "speech", "tty", "tv"
          ]
        }
      }
    ],
    exec: function(args, context) {
      let contentViewer = getContentViewer(context);
      contentViewer.emulateMedium(args.type);
    }
  },
  {
    item: "command",
    runAt: "server",
    name: "media reset",
    description: l10n.lookup("mediaResetDesc"),
    exec: function(args, context) {
      let contentViewer = getContentViewer(context);
      contentViewer.stopEmulatingMedium();
    }
  }
];

Comment 1

[Micah [:mtigley] (she/her)]

Attachment: Bug 1534984 - Add a button for toggling print styles simulation in the Rule View toolbar

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4fef2150bef9
Add a button for toggling print styles simulation in the Rule View toolbar r=gl

Comment 3

[Dorel Luca [:dluca]]

Backed out changeset 4fef2150bef9 (bug 1534984) for DevTools Failures in devtools/client/responsive.html/test/browser/browser_toolbox_swap_browsers.js. CLOSED TREE

Log:
https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=238824721&repo=autoland&lineNumber=19035

Push with failures:
https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=4fef2150bef9f1274c59862511b619756ee8381e

Backout:
https://hg.mozilla.org/integration/autoland/rev/c637aef263704c185f45ebf58f17dbb3c689b2bf

Comment 4

[Micah [:mtigley] (she/her)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=866790866bfbb0386fde03f62af9c25526d53f73

Comment 5

[Micah [:mtigley] (she/her)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=1e423fee9a9865914e0a9658962b623d71aadd31

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/165b1912cabc
Add a button for toggling print styles simulation in the Rule View toolbar r=gl

Comment 7

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/165b1912cabc

Comment 8

[Patrick Brosset <:pbro>]

Attachment: print-simulation.gif

Great that this landed. Thanks Micah. Here's a GIF to illustrate.

Comment 12

[Axel]

Thanks for this merge!

I would have preferred, though, if that button had a drop down attached next to it. Hence, a screen reader's experience could have been also tested.

---

|▒|▼|

|screen|
|print |
|speech|

Comment 13

[Axel]

This should have read:

|▒|▼|
|screen|
|print |
|speech|

Comment 14

[Victoria Wang [:victoria]]

(In reply to Axel from comment #12)

Thanks for this merge!

I would have preferred, though, if that button had a drop down attached next to it. Hence, a screen reader's experience could have been also tested.

I appreciate this suggestion - we'll keep this in mind for further work on simulation.

Comment 16

[Irene Smith]

Added the following to the release notes:

A button has been added to the rules panel of the Page Inspector that allows you to toggle display of any print media queries ({{bug(1534984)}}).

Added information in two places within the inspector documentation. First, I updated the images at the top of the page to show the new UI, and then added a video in a section labeled: View @media rules for Print further down the page that shows the toggle in practice.

Comment 17

[Micah [:mtigley] (she/her)]

Looks good. Thanks Irene!