--- a/devtools/client/responsive.html/app.js
+++ b/devtools/client/responsive.html/app.js
@@ -30,17 +30,17 @@ const Viewports = createFactory(require(
 const Types = require("./types");
 
 let App = createClass({
   displayName: "App",
 
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     dispatch: PropTypes.func.isRequired,
-    displayPixelRatio: PropTypes.number.isRequired,
+    displayPixelRatio: Types.pixelRatio.value.isRequired,
     location: Types.location.isRequired,
     networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
     touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
     viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
   },
 
   onBrowserMounted() {
@@ -143,17 +143,17 @@ let App = createClass({
       onRotateViewport,
       onScreenshot,
       onUpdateDeviceDisplayed,
       onUpdateDeviceModalOpen,
       onUpdateTouchSimulation,
     } = this;
 
     let selectedDevice = "";
-    let selectedPixelRatio = 0;
+    let selectedPixelRatio = { value: 0 };
 
     if (viewports.length) {
       selectedDevice = viewports[0].device;
       selectedPixelRatio = viewports[0].pixelRatio;
     }
 
     return dom.div(
       {

--- a/devtools/client/responsive.html/components/dpr-selector.js
+++ b/devtools/client/responsive.html/components/dpr-selector.js
@@ -29,19 +29,19 @@ const createHiddenOption = value =>
     disabled: true,
   }, value);
 
 module.exports = createClass({
   displayName: "DPRSelector",
 
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
-    displayPixelRatio: PropTypes.number.isRequired,
+    displayPixelRatio: Types.pixelRatio.value.isRequired,
     selectedDevice: PropTypes.string.isRequired,
-    selectedPixelRatio: PropTypes.number.isRequired,
+    selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
     onChangeViewportPixelRatio: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   getInitialState() {
     return {
       isFocused: false
@@ -88,17 +88,17 @@ module.exports = createClass({
     let title;
 
     if (isDisabled) {
       selectorClass += " disabled";
       title = getFormatStr("responsive.autoDPR", selectedDevice);
     } else {
       title = getStr("responsive.devicePixelRatio");
 
-      if (selectedPixelRatio) {
+      if (selectedPixelRatio.value) {
         selectorClass += " selected";
       }
     }
 
     if (this.state.isFocused) {
       selectorClass += " focused";
     }
 
@@ -112,17 +112,17 @@ module.exports = createClass({
       {
         id: "global-dpr-selector",
         className: selectorClass,
         title,
       },
       "DPR",
       dom.select(
         {
-          value: selectedPixelRatio || displayPixelRatio,
+          value: selectedPixelRatio.value || displayPixelRatio,
           disabled: isDisabled,
           onChange: this.onSelectChange,
           onFocus: this.onFocusChange,
           onBlur: this.onFocusChange,
         },
         ...listContent
       )
     );

--- a/devtools/client/responsive.html/components/global-toolbar.js
+++ b/devtools/client/responsive.html/components/global-toolbar.js
@@ -12,21 +12,21 @@ const Types = require("../types");
 const DPRSelector = createFactory(require("./dpr-selector"));
 const NetworkThrottlingSelector = createFactory(require("./network-throttling-selector"));
 
 module.exports = createClass({
   displayName: "GlobalToolbar",
 
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
-    displayPixelRatio: PropTypes.number.isRequired,
+    displayPixelRatio: Types.pixelRatio.value.isRequired,
     networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
     selectedDevice: PropTypes.string.isRequired,
-    selectedPixelRatio: PropTypes.number.isRequired,
+    selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
     touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
     onChangeNetworkThrottling: PropTypes.func.isRequired,
     onChangeViewportPixelRatio: PropTypes.func.isRequired,
     onExit: PropTypes.func.isRequired,
     onScreenshot: PropTypes.func.isRequired,
     onUpdateTouchSimulation: PropTypes.func.isRequired,
   },
 

--- a/devtools/client/responsive.html/reducers/viewports.js
+++ b/devtools/client/responsive.html/reducers/viewports.js
@@ -15,17 +15,19 @@ const {
 let nextViewportId = 0;
 
 const INITIAL_VIEWPORTS = [];
 const INITIAL_VIEWPORT = {
   id: nextViewportId++,
   device: "",
   width: 320,
   height: 480,
-  pixelRatio: 0,
+  pixelRatio: {
+    value: 0,
+  },
 };
 
 let reducers = {
 
   [ADD_VIEWPORT](viewports) {
     // For the moment, there can be at most one viewport.
     if (viewports.length === 1) {
       return viewports;
@@ -40,24 +42,26 @@ let reducers = {
       }
 
       return Object.assign({}, viewport, {
         device,
       });
     });
   },
 
-  [CHANGE_VIEWPORT_PIXEL_RATIO](viewports, {id, pixelRatio }) {
+  [CHANGE_VIEWPORT_PIXEL_RATIO](viewports, { id, pixelRatio }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;
       }
 
       return Object.assign({}, viewport, {
-        pixelRatio,
+        pixelRatio: {
+          value: pixelRatio
+        },
       });
     });
   },
 
   [RESIZE_VIEWPORT](viewports, { id, width, height }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;

--- a/devtools/client/responsive.html/test/unit/test_change_viewport_pixel_ratio.js
+++ b/devtools/client/responsive.html/test/unit/test_change_viewport_pixel_ratio.js
@@ -12,11 +12,11 @@ const NEW_PIXEL_RATIO = 5.5;
 add_task(function* () {
   let store = Store();
   const { getState, dispatch } = store;
 
   dispatch(addViewport());
   dispatch(changeViewportPixelRatio(0, NEW_PIXEL_RATIO));
 
   let viewport = getState().viewports[0];
-  equal(viewport.pixelRatio, NEW_PIXEL_RATIO,
+  equal(viewport.pixelRatio.value, NEW_PIXEL_RATIO,
     `Viewport's pixel ratio changed to ${NEW_PIXEL_RATIO}`);
 });

--- a/devtools/client/responsive.html/types.js
+++ b/devtools/client/responsive.html/types.js
@@ -5,16 +5,25 @@
 "use strict";
 
 const { PropTypes } = require("devtools/client/shared/vendor/react");
 const { createEnum } = require("devtools/client/shared/enum");
 
 // React PropTypes are used to describe the expected "shape" of various common
 // objects that get passed down as props to components.
 
+/* GLOBAL */
+
+/**
+ * The location of the document displayed in the viewport(s).
+ */
+exports.location = PropTypes.string;
+
+/* DEVICE */
+
 /**
  * A single device that can be displayed in the viewport.
  */
 const device = {
 
   // The name of the device
   name: PropTypes.string,
 
@@ -80,63 +89,76 @@ exports.devices = {
   // Whether or not the device modal is open
   isModalOpen: PropTypes.bool,
 
   // Device list state, possible values are exported above in an enum
   listState: PropTypes.oneOf(Object.keys(exports.deviceListState)),
 
 };
 
-/**
- * The location of the document displayed in the viewport(s).
- */
-exports.location = PropTypes.string;
+/* VIEWPORT */
 
 /**
- * The progression of the screenshot
- */
-exports.screenshot = {
-
-  isCapturing: PropTypes.bool,
-
-};
-
-/**
- * Touch simulation.
- */
-exports.touchSimulation = {
-
-  // Whether or not touch simulation is enabled
-  enabled: PropTypes.bool,
-
-};
-
-/**
- * Network throttling.
+ * Network throttling state for a given viewport.
  */
 exports.networkThrottling = {
 
   // Whether or not network throttling is enabled
   enabled: PropTypes.bool,
 
   // Name of the selected throttling profile
   profile: PropTypes.string,
 
 };
 
 /**
+ * Device pixel ratio for a given viewport.
+ */
+const pixelRatio = exports.pixelRatio = {
+
+  // The device pixel ratio value
+  value: PropTypes.number,
+
+};
+
+/**
+ * Touch simulation state for a given viewport.
+ */
+exports.touchSimulation = {
+
+  // Whether or not touch simulation is enabled
+  enabled: PropTypes.bool,
+
+};
+
+/**
  * A single viewport displaying a document.
  */
 exports.viewport = {
 
   // The id of the viewport
   id: PropTypes.number,
 
-  // The currently selected device applied to the viewport.
+  // The currently selected device applied to the viewport
   device: PropTypes.string,
 
   // The width of the viewport
   width: PropTypes.number,
 
   // The height of the viewport
   height: PropTypes.number,
 
+  // The devicePixelRatio of the viewport
+  pixelRatio: PropTypes.shape(pixelRatio),
+
 };
+
+/* ACTIONS IN PROGRESS */
+
+/**
+ * The progression of the screenshot.
+ */
+exports.screenshot = {
+
+  // Whether screenshot capturing is in progress
+  isCapturing: PropTypes.bool,
+
+};