--- a/devtools/client/locales/en-US/responsive.properties
+++ b/devtools/client/locales/en-US/responsive.properties
@@ -68,25 +68,25 @@ responsive.remoteOnly=Responsive Design 
 responsive.noContainerTabs=Responsive Design Mode is currently unavailable in container tabs.
 
 # LOCALIZATION NOTE (responsive.noThrottling): UI option in a menu to configure
 # network throttling.  This option is the default and disables throttling so you
 # just have normal network conditions.  There is not very much room in the UI
 # so a short string would be best if possible.
 responsive.noThrottling=No throttling
 
-# LOCALIZATION NOTE (responsive.devicePixelRatio): tooltip for the
-# DevicePixelRatio (DPR) dropdown when is enabled.
-responsive.devicePixelRatio=Device Pixel Ratio
+# LOCALIZATION NOTE (responsive.changeDevicePixelRatio): tooltip for the
+# device pixel ratio dropdown when is enabled.
+responsive.changeDevicePixelRatio=Change device pixel ratio of the viewport
 
-# LOCALIZATION NOTE (responsive.autoDPR): tooltip for the DevicePixelRatio
-# (DPR) dropdown when is disabled because a device is selected.
+# LOCALIZATION NOTE (responsive.devicePixelRatio.auto): tooltip for the device pixel ratio
+# dropdown when it is disabled because a device is selected.
 # The argument (%1$S) is the selected device (e.g. iPhone 6) that set
-# automatically the DPR value.
-responsive.autoDPR=DPR automatically set by %1$S
+# automatically the device pixel ratio value.
+responsive.devicePixelRatio.auto=Device pixel ratio automatically set by %1$S
 
 # LOCALIZATION NOTE (responsive.customDeviceName): Default value in a form to
 # add a custom device based on an arbitrary size (no association to an existing
 # device).
 responsive.customDeviceName=Custom Device
 
 # LOCALIZATION NOTE (responsive.customDeviceNameFromBase): Default value in a
 # form to add a custom device based on the properties of another.  %1$S is the
@@ -103,17 +103,17 @@ responsive.addDevice=Add Device
 responsive.deviceAdderName=Name
 
 # LOCALIZATION NOTE (responsive.deviceAdderSize): Label of form field for the
 # size 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.deviceAdderSize=Size
 
 # LOCALIZATION NOTE (responsive.deviceAdderPixelRatio): Label of form field for
-# the devicePixelRatio of a new device.  The available width is very low, so you
+# the device pixel ratio 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.deviceAdderPixelRatio=DPR
 
 # LOCALIZATION NOTE (responsive.deviceAdderUserAgent): Label of form field for
 # the user agent 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.deviceAdderUserAgent=UA
@@ -125,12 +125,12 @@ responsive.deviceAdderUserAgent=UA
 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
+# %2$S is the height of the device.  %3$S is the device pixel ratio 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/memory/components/tree-map/drag-zoom.js
+++ b/devtools/client/memory/components/tree-map/drag-zoom.js
@@ -40,17 +40,17 @@ function DragZoom(container, debounceRat
 
   // The offset of visualization from the container. This is applied after
   // the zoom, and the visualization by default is centered
   this.translateX = 0;
   this.translateY = 0;
 
   // The size of the offset between the top/left of the container, and the
   // top/left of the containing element. This value takes into account
-  // the devicePixelRatio for canvas draws.
+  // the device pixel ratio for canvas draws.
   this.offsetX = 0;
   this.offsetY = 0;
 
   // The smoothed values that are animated and eventually match the target
   // values. The values are updated by the update loop
   this.smoothZoom = 0;
   this.smoothTranslateX = 0;
   this.smoothTranslateY = 0;

--- a/devtools/client/responsive.html/actions/index.js
+++ b/devtools/client/responsive.html/actions/index.js
@@ -33,17 +33,17 @@ createEnum([
   // display with a different pixel ratio.
   "CHANGE_DISPLAY_PIXEL_RATIO",
 
   // Change the network throttling profile.
   "CHANGE_NETWORK_THROTTLING",
 
   // The pixel ratio of the viewport has changed. This may be triggered by the user
   // when changing the device displayed in the viewport, or when a pixel ratio is
-  // selected from the DPR dropdown.
+  // selected from the device pixel ratio dropdown.
   "CHANGE_PIXEL_RATIO",
 
   // Change the touch simulation state.
   "CHANGE_TOUCH_SIMULATION",
 
   // Indicates that the device list is being loaded
   "LOAD_DEVICE_LIST_START",
 

rename from devtools/client/responsive.html/components/DprSelector.js
rename to devtools/client/responsive.html/components/DevicePixelRatioSelector.js
--- a/devtools/client/responsive.html/components/DprSelector.js
+++ b/devtools/client/responsive.html/components/DevicePixelRatioSelector.js
@@ -25,17 +25,17 @@ const createHiddenOption = value =>
   dom.option({
     value,
     title: value,
     hidden: true,
     disabled: true,
   }, value);
 
 module.exports = createClass({
-  displayName: "DPRSelector",
+  displayName: "DevicePixelRatioSelector",
 
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     displayPixelRatio: Types.pixelRatio.value.isRequired,
     selectedDevice: PropTypes.string.isRequired,
     selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
     onChangePixelRatio: PropTypes.func.isRequired,
   },
@@ -84,19 +84,19 @@ module.exports = createClass({
 
     let state = devices.listState;
     let isDisabled = (state !== Types.deviceListState.LOADED) || (selectedDevice !== "");
     let selectorClass = "";
     let title;
 
     if (isDisabled) {
       selectorClass += " disabled";
-      title = getFormatStr("responsive.autoDPR", selectedDevice);
+      title = getFormatStr("responsive.devicePixelRatio.auto", selectedDevice);
     } else {
-      title = getStr("responsive.devicePixelRatio");
+      title = getStr("responsive.changeDevicePixelRatio");
 
       if (selectedPixelRatio.value) {
         selectorClass += " selected";
       }
     }
 
     if (this.state.isFocused) {
       selectorClass += " focused";
@@ -105,17 +105,17 @@ module.exports = createClass({
     let listContent = PIXEL_RATIO_PRESET.map(createVisibleOption);
 
     if (state == Types.deviceListState.LOADED) {
       listContent = listContent.concat(hiddenOptions.map(createHiddenOption));
     }
 
     return dom.label(
       {
-        id: "global-dpr-selector",
+        id: "global-device-pixel-ratio-selector",
         className: selectorClass,
         title,
       },
       "DPR",
       dom.select(
         {
           value: selectedPixelRatio.value || displayPixelRatio,
           disabled: isDisabled,

--- a/devtools/client/responsive.html/components/GlobalToolbar.js
+++ b/devtools/client/responsive.html/components/GlobalToolbar.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 const { DOM: dom, createClass, createFactory, PropTypes, addons } =
   require("devtools/client/shared/vendor/react");
 
 const { getStr } = require("../utils/l10n");
 const Types = require("../types");
-const DPRSelector = createFactory(require("./DprSelector"));
+const DevicePixelRatioSelector = createFactory(require("./DevicePixelRatioSelector"));
 const NetworkThrottlingSelector = createFactory(require("./NetworkThrottlingSelector"));
 
 module.exports = createClass({
   displayName: "GlobalToolbar",
 
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     displayPixelRatio: Types.pixelRatio.value.isRequired,
@@ -63,17 +63,17 @@ module.exports = createClass({
           className: "title",
         },
         getStr("responsive.title")
       ),
       NetworkThrottlingSelector({
         networkThrottling,
         onChangeNetworkThrottling,
       }),
-      DPRSelector({
+      DevicePixelRatioSelector({
         devices,
         displayPixelRatio,
         selectedDevice,
         selectedPixelRatio,
         onChangePixelRatio,
       }),
       dom.button({
         id: "global-touch-simulation-button",

--- a/devtools/client/responsive.html/components/moz.build
+++ b/devtools/client/responsive.html/components/moz.build
@@ -3,18 +3,18 @@
 # 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/.
 
 DevToolsModules(
     'Browser.js',
     'DeviceAdder.js',
     'DeviceModal.js',
+    'DevicePixelRatioSelector.js',
     'DeviceSelector.js',
-    'DprSelector.js',
     'GlobalToolbar.js',
     'NetworkThrottlingSelector.js',
     'ResizableViewport.js',
     'Viewport.js',
     'ViewportDimension.js',
     'Viewports.js',
     'ViewportToolbar.js',
 )

--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -171,48 +171,48 @@ select > option.divider {
 }
 
 #global-network-throttling-selector {
   height: 15px;
   padding-left: 0;
   width: 103px;
 }
 
-#global-dpr-selector > select {
+#global-device-pixel-ratio-selector > select {
   padding: 0 8px 0 0;
   margin-left: 2px;
   max-width: 5em;
 }
 
-#global-dpr-selector {
+#global-device-pixel-ratio-selector {
   margin: 0 8px;
   -moz-user-select: none;
   color: var(--viewport-color);
   height: 15px;
 }
 
-#global-dpr-selector.focused,
-#global-dpr-selector:not(.disabled):hover {
+#global-device-pixel-ratio-selector.focused,
+#global-device-pixel-ratio-selector:not(.disabled):hover {
   color: var(--viewport-hover-color);
 }
 
-#global-dpr-selector:not(.disabled):hover > select {
+#global-device-pixel-ratio-selector:not(.disabled):hover > select {
   color: var(--viewport-hover-color);
 }
 
-#global-dpr-selector:focus > select {
+#global-device-pixel-ratio-selector:focus > select {
   color: var(--viewport-active-color);
 }
 
-#global-dpr-selector.selected,
-#global-dpr-selector.selected > select {
+#global-device-pixel-ratio-selector.selected,
+#global-device-pixel-ratio-selector.selected > select {
   color: var(--viewport-active-color);
 }
 
-#global-dpr-selector > select > option {
+#global-device-pixel-ratio-selector > select > option {
   padding: 5px;
 }
 
 #viewports {
   /* Make sure left-most viewport is visible when there's horizontal overflow.
      That is, when the horizontal space become smaller than the viewports and a
      scrollbar appears, then the first viewport will still be visible */
   position: sticky;

--- a/devtools/client/responsive.html/index.js
+++ b/devtools/client/responsive.html/index.js
@@ -97,35 +97,35 @@ Object.defineProperty(window, "store", {
 });
 
 // Dispatch a `changeDisplayPixelRatio` action when the browser's pixel ratio is changing.
 // This is usually triggered when the user changes the monitor resolution, or when the
 // browser's window is dragged to a different display with a different pixel ratio.
 // TODO: It would be better to move this watching into the actor, so that it can be
 // better synchronized with any overrides that might be applied.  Also, reading a single
 // value like this makes less sense with multiple viewports.
-function onDPRChange() {
+function onDevicePixelRatioChange() {
   let dpr = window.devicePixelRatio;
   let mql = window.matchMedia(`(resolution: ${dpr}dppx)`);
 
   function listener() {
     bootstrap.dispatch(changeDisplayPixelRatio(window.devicePixelRatio));
     mql.removeListener(listener);
-    onDPRChange();
+    onDevicePixelRatioChange();
   }
 
   mql.addListener(listener);
 }
 
 /**
  * Called by manager.js to add the initial viewport based on the original page.
  */
 window.addInitialViewport = contentURI => {
   try {
-    onDPRChange();
+    onDevicePixelRatioChange();
     bootstrap.dispatch(changeLocation(contentURI));
     bootstrap.dispatch(changeDisplayPixelRatio(window.devicePixelRatio));
     bootstrap.dispatch(addViewport());
   } catch (e) {
     console.error(e);
   }
 };
 

--- a/devtools/client/responsive.html/test/browser/browser.ini
+++ b/devtools/client/responsive.html/test/browser/browser.ini
@@ -19,18 +19,18 @@ support-files =
 
 [browser_cmd_click.js]
 [browser_device_change.js]
 [browser_device_custom_remove.js]
 [browser_device_custom.js]
 [browser_device_modal_error.js]
 [browser_device_modal_exit.js]
 [browser_device_modal_submit.js]
+[browser_device_pixel_ratio_change.js]
 [browser_device_width.js]
-[browser_dpr_change.js]
 [browser_exit_button.js]
 [browser_ext_messaging.js]
 tags = devtools webextensions
 [browser_frame_script_active.js]
 [browser_hide_container.js]
 [browser_menu_item_01.js]
 [browser_menu_item_02.js]
 [browser_mouse_resize.js]

rename from devtools/client/responsive.html/test/browser/browser_dpr_change.js
rename to devtools/client/responsive.html/test/browser/browser_device_pixel_ratio_change.js
--- a/devtools/client/responsive.html/test/browser/browser_dpr_change.js
+++ b/devtools/client/responsive.html/test/browser/browser_device_pixel_ratio_change.js
@@ -1,14 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Tests changing viewport DPR
+// Tests changing viewport device pixel ratio
 const TEST_URL = "data:text/html;charset=utf-8,DPR list test";
 const DEFAULT_DPPX = window.devicePixelRatio;
 const VIEWPORT_DPPX = DEFAULT_DPPX + 2;
 const Types = require("devtools/client/responsive.html/types");
 
 const testDevice = {
   "name": "Fake Phone RDM Test",
   "width": 320,
@@ -89,17 +89,17 @@ function* testChangingDPR(ui) {
   yield testDevicePixelRatio(ui, VIEWPORT_DPPX);
   testViewportDPRSelect(ui, {value: VIEWPORT_DPPX, disabled: false});
   testViewportDeviceSelectLabel(ui, "no device selected");
 }
 
 function testViewportDPRSelect(ui, expected) {
   info("Test viewport's DPR Select");
 
-  let select = ui.toolWindow.document.querySelector("#global-dpr-selector > select");
+  let select = ui.toolWindow.document.querySelector("#global-device-pixel-ratio-selector > select");
   is(select.value, expected.value,
      `DPR Select value should be: ${expected.value}`);
   is(select.disabled, expected.disabled,
     `DPR Select should be ${expected.disabled ? "disabled" : "enabled"}.`);
 }
 
 function* testDevicePixelRatio(ui, expected) {
   info("Test device pixel ratio");

--- a/devtools/client/responsive.html/test/browser/head.js
+++ b/devtools/client/responsive.html/test/browser/head.js
@@ -256,17 +256,17 @@ function changeSelectValue({ toolWindow 
 }
 
 const selectDevice = (ui, value) => Promise.all([
   once(ui, "device-changed"),
   changeSelectValue(ui, ".viewport-device-selector", value)
 ]);
 
 const selectDPR = (ui, value) =>
-  changeSelectValue(ui, "#global-dpr-selector > select", value);
+  changeSelectValue(ui, "#global-device-pixel-ratio-selector > select", value);
 
 const selectNetworkThrottling = (ui, value) => Promise.all([
   once(ui, "network-throttling-changed"),
   changeSelectValue(ui, "#global-network-throttling-selector", value)
 ]);
 
 function getSessionHistory(browser) {
   return ContentTask.spawn(browser, {}, function* () {

--- a/devtools/client/responsive.html/types.js
+++ b/devtools/client/responsive.html/types.js
@@ -147,17 +147,17 @@ exports.viewport = {
   deviceType: PropTypes.string,
 
   // The width of the viewport
   width: PropTypes.number,
 
   // The height of the viewport
   height: PropTypes.number,
 
-  // The devicePixelRatio of the viewport
+  // The device pixel ratio of the viewport
   pixelRatio: PropTypes.shape(pixelRatio),
 
 };
 
 /* ACTIONS IN PROGRESS */
 
 /**
  * The progression of the screenshot.

--- a/devtools/server/actors/highlighters/utils/canvas.js
+++ b/devtools/server/actors/highlighters/utils/canvas.js
@@ -329,17 +329,17 @@ function getPointsFromDiagonal(x1, y1, x
     let transformedPoint = apply(matrix, point);
 
     return { x: transformedPoint[0], y: transformedPoint[1] };
   });
 }
 
 /**
  * Updates the <canvas> element's style in accordance with the current window's
- * devicePixelRatio, and the position calculated in `getCanvasPosition`. It also
+ * device pixel ratio, and the position calculated in `getCanvasPosition`. It also
  * clears the drawing context. This is called on canvas update after a scroll event where
  * `getCanvasPosition` updates the new canvasPosition.
  *
  * @param  {Canvas} canvas
  *         The <canvas> element.
  * @param  {Object} canvasPosition
  *         A pointer object {x, y} representing the <canvas> position to the top left
  *         corner of the page.