Add a way to emulate print media type from DevTools

RESOLVED FIXED in Firefox 68

Status

enhancement
P1
normal
RESOLVED FIXED
4 months ago
Last month

People

(Reporter: pbro, Assigned: mtigley)

Tracking

({dev-doc-complete})

unspecified
Firefox 68

Firefox Tracking Flags

(firefox68 fixed)

Details

(Whiteboard: [qa-68b-p2])

Attachments

(2 attachments)

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();
    }
  }
];
Priority: -- → P2
Assignee: nobody → mtigley
Status: NEW → ASSIGNED
Priority: P2 → P1
See Also: → 1282019
See Also: → 1202711
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/4fef2150bef9
Add a button for toggling print styles simulation in the Rule View toolbar r=gl
Flags: needinfo?(mtigley)
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/165b1912cabc
Add a button for toggling print styles simulation in the Rule View toolbar r=gl
Status: ASSIGNED → RESOLVED
Closed: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Posted image print-simulation.gif

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

Duplicate of this bug: 1202711
Duplicate of this bug: 1282019
Duplicate of this bug: 1187581
See Also: → 1543234

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|

This should have read:

|▒|▼|
|screen|
|print |
|speech|
See Also: → 1543288
Keywords: dev-doc-needed

(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.

Whiteboard: [qa-68b-p2]
Duplicate of this bug: 1288922

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.

Flags: needinfo?(mtigley)

Looks good. Thanks Irene!

Flags: needinfo?(mtigley)
You need to log in before you can comment on or make changes to this bug.