Bug 1321675 - Show device details in tooltip. r=gl draft
authorJ. Ryan Stinnett <jryans@gmail.com>
Thu, 02 Feb 2017 17:38:57 -0600
changeset 479658 d62f04d0a991f71d4ca1b21b81414c92a4db09ee
parent 479657 5d3b1d59631570f8a80d98f5a0e67b4c5c436f0e
child 479659 836e8c0a4b596a9d37287a09028b736c5fabbd7a
push id44319
push userbmo:jryans@gmail.com
push dateTue, 07 Feb 2017 02:36:30 +0000
reviewersgl
bugs1321675
milestone54.0a1
Bug 1321675 - Show device details in tooltip. r=gl MozReview-Commit-ID: LxxaoBBQCUU
devtools/client/locales/en-US/responsive.properties
devtools/client/responsive.html/components/device-modal.js
--- 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: {
     devices: PropTypes.shape(Types.devices).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,
                   }),