DevTools: fix styling for 3D phone preview inn sensors drawer

third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.SensorsView = function()
 {
@@ skipping 112 matching lines @@
             this._geolocationSetting.set(this._geolocation.toSetting());
             this._geolocation.apply();
         } else {
             this._geolocation.clear();
         }
     },
 
     _createDeviceOrientationSection: function()
     {
         var orientationGroup = this.contentElement.createChild("section", "sensors-group");
-        orientationGroup.createChild("div", "sensors-group-title").textContent = WebInspector.UIString("Accelerometer");
+        orientationGroup.createChild("div", "sensors-group-title").textContent = WebInspector.UIString("Orientation");
         var orientationContent = orientationGroup.createChild("div", "orientation-content");
         var fields = orientationContent.createChild("div", "orientation-fields");
 
-        const accelerometerOffOption = {title: WebInspector.UIString("Off"), orientation: WebInspector.SensorsView.NonPresetOptions.NoOverride};
+        const orientationOffOption = {title: WebInspector.UIString("Off"), orientation: WebInspector.SensorsView.NonPresetOptions.NoOverride};
         const customOrientationOption = {title: WebInspector.UIString("Custom orientation..."), orientation: WebInspector.SensorsView.NonPresetOptions.Custom};
         this._orientationSelectElement = this.contentElement.createChild("select", "chrome-select");
-        this._orientationSelectElement.appendChild(new Option(accelerometerOffOption.title, accelerometerOffOption.orientation));
+        this._orientationSelectElement.appendChild(new Option(orientationOffOption.title, orientationOffOption.orientation));
         this._orientationSelectElement.appendChild(new Option(customOrientationOption.title, customOrientationOption.orientation));
 
         var orientationGroups = WebInspector.SensorsView.PresetOrientations;
         for (var i = 0; i < orientationGroups.length; ++i) {
             var groupElement = this._orientationSelectElement.createChild("optgroup");
             groupElement.label = orientationGroups[i].title;
             var group = orientationGroups[i].value;
             for (var j = 0; j < group.length; ++j)
                 groupElement.appendChild(new Option(group[j].title, group[j].orientation));
         }
         this._orientationSelectElement.selectedIndex = 0;
         fields.appendChild(this._orientationSelectElement);
         this._orientationSelectElement.addEventListener("change", this._orientationSelectChanged.bind(this));
 
         this._deviceOrientationFieldset = this._createDeviceOrientationOverrideElement(this._deviceOrientation);
 
-        this._stageElement = orientationContent.createChild("div", "accelerometer-stage");
-        this._stageElement.title = WebInspector.UIString("Shift+drag to rotate around the y-axis");
-        this._boxElement = this._stageElement.createChild("section", "accelerometer-box accelerometer-element");
+        this._stageElement = orientationContent.createChild("div", "orientation-stage");
+        this._stageElement.title = WebInspector.UIString("Shift+drag horizontally to rotate around the y-axis");
+        this._boxElement = this._stageElement.createChild("section", "orientation-box orientation-element");
 
-        this._boxElement.createChild("section", "accelerometer-front accelerometer-element");
-        this._boxElement.createChild("section", "accelerometer-top accelerometer-element");
-        this._boxElement.createChild("section", "accelerometer-back accelerometer-element");
-        this._boxElement.createChild("section", "accelerometer-left accelerometer-element");
-        this._boxElement.createChild("section", "accelerometer-right accelerometer-element");
-        this._boxElement.createChild("section", "accelerometer-bottom accelerometer-element");
+        this._boxElement.createChild("section", "orientation-front orientation-element");
+        this._boxElement.createChild("section", "orientation-top orientation-element");
+        this._boxElement.createChild("section", "orientation-back orientation-element");
+        this._boxElement.createChild("section", "orientation-left orientation-element");
+        this._boxElement.createChild("section", "orientation-right orientation-element");
+        this._boxElement.createChild("section", "orientation-bottom orientation-element");
 
         WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart.bind(this), this._onBoxDrag.bind(this), null, "-webkit-grabbing", "-webkit-grab");
 
         fields.appendChild(this._deviceOrientationFieldset);
         this._enableOrientationFields(true);
         this._setBoxOrientation(this._deviceOrientation);
     },
 
     /**
      * @param {?boolean} disable
@@ skipping 94 matching lines @@
     },
 
     /**
      * @param {!Element} parentElement
      * @param {!Element} input
      * @param {string} label
      * @return {function(string)}
      */
     _createAxisInput: function(parentElement, input, label)
     {
-        var div = parentElement.createChild("div", "accelerometer-axis-input-container");
+        var div = parentElement.createChild("div", "orientation-axis-input-container");
         div.appendChild(input);
         div.createTextChild(label);
         input.type = "number";
         return WebInspector.bindInput(input, this._applyDeviceOrientationUserInput.bind(this), WebInspector.DeviceOrientation.validator, true);
     },
 
     /**
      * @param {!WebInspector.DeviceOrientation} deviceOrientation
      * @return {!Element}
      */
     _createDeviceOrientationOverrideElement: function(deviceOrientation)
     {
         var fieldsetElement = createElement("fieldset");
         fieldsetElement.classList.add("device-orientation-override-section");
-        var cellElement = fieldsetElement.createChild("td", "accelerometer-inputs-cell");
+        var cellElement = fieldsetElement.createChild("td", "orientation-inputs-cell");
 
         this._alphaElement = createElement("input");
         this._alphaSetter = this._createAxisInput(cellElement, this._alphaElement, WebInspector.UIString("\u03B1 (alpha)"));
         this._alphaSetter(String(deviceOrientation.alpha));
 
         this._betaElement = createElement("input");
         this._betaSetter = this._createAxisInput(cellElement, this._betaElement, WebInspector.UIString("\u03B2 (beta)"));
         this._betaSetter(String(deviceOrientation.beta));
 
         this._gammaElement = createElement("input");
         this._gammaSetter = this._createAxisInput(cellElement, this._gammaElement, WebInspector.UIString("\u03B3 (gamma)"));
         this._gammaSetter(String(deviceOrientation.gamma));
 
-        cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"), this._resetDeviceOrientation.bind(this), "accelerometer-reset-button"));
+        cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"), this._resetDeviceOrientation.bind(this), "orientation-reset-button"));
         return fieldsetElement;
     },
 
     /**
      * @param {!WebInspector.DeviceOrientation} deviceOrientation
      */
     _setBoxOrientation: function(deviceOrientation)
     {
         var matrix = this._viewportPreviewMatrix(true);
         this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
@@ skipping 190 matching lines @@
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         WebInspector.inspectorView.showViewInDrawer("sensors");
         return true;
     }
 }
 
 WebInspector.SensorsView.ShiftDragOrientationSpeed = 16;