Bug 1321675 - Show device details in tooltip. r=gl
MozReview-Commit-ID: LxxaoBBQCUU
--- a/devtools/client/locales/en-US/responsive.properties
+++ b/devtools/client/locales/en-US/responsive.properties
@@ -122,8 +122,15 @@ responsive.deviceAdderUserAgent=UA
# touch input support of a new device. The available width is very low, so you
# might see overlapping text if the length is much longer than 5 or so
# characters.
responsive.deviceAdderTouch=Touch
# LOCALIZATION NOTE (responsive.deviceAdderSave): Button text that submits a
# form to add a new device.
responsive.deviceAdderSave=Save
+
+# LOCALIZATION NOTE (responsive.deviceDetails): Tooltip that appears when
+# hovering on a device in the device modal. %1$S is the width of the device.
+# %2$S is the height of the device. %3$S is the devicePixelRatio value of the
+# device. %4$S is the user agent of the device. %5$S is a boolean value
+# noting whether touch input is supported.
+responsive.deviceDetails=Size: %1$S x %2$S\nDPR: %3$S\nUA: %4$S\nTouch: %5$S
--- a/devtools/client/responsive.html/components/device-modal.js
+++ b/devtools/client/responsive.html/components/device-modal.js
@@ -4,17 +4,17 @@
/* eslint-env browser */
"use strict";
const { DOM: dom, createClass, createFactory, PropTypes, addons } =
require("devtools/client/shared/vendor/react");
-const { getStr } = require("../utils/l10n");
+const { getStr, getFormatStr } = require("../utils/l10n");
const Types = require("../types");
const DeviceAdder = createFactory(require("./device-adder"));
module.exports = createClass({
displayName: "DeviceModal",
propTypes: {
deviceAdderViewportTemplate: PropTypes.shape(Types.viewport).isRequired,
@@ -146,20 +146,25 @@ module.exports = createClass({
},
dom.header(
{
className: "device-header",
},
type
),
sortedDevices[type].map(device => {
+ let details = getFormatStr(
+ "responsive.deviceDetails", device.width, device.height,
+ device.pixelRatio, device.userAgent, device.touch
+ );
return dom.label(
{
className: "device-label",
key: device.name,
+ title: details,
},
dom.input({
className: "device-input-checkbox",
type: "checkbox",
value: device.name,
checked: this.state[device.name],
onChange: this.onDeviceCheckboxChange,
}),