DevTools: Update 3D device in accelerometer emulation

third_party/WebKit/Source/devtools/front_end/emulation/sensors.css

Index: third_party/WebKit/Source/devtools/front_end/emulation/sensors.css
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/sensors.css b/third_party/WebKit/Source/devtools/front_end/emulation/sensors.css
index 7cb82460ae1dc75259c1bec0edcfb7fc7288b0ba..07281bfc935cfd7b968ca0f9593966224eded7e7 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/sensors.css
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/sensors.css
@@ -6,6 +6,8 @@
 
 .sensors-view {
     padding: 12px;
+    display: block;
+    overflow: auto;
 }
 
 .sensors-view label {
@@ -17,13 +19,13 @@
     width: 80px;
 }
 
-.sensors-view input[type=text]:not(.error-input):enabled:focus,
+.sensors-view input:not(.error-input):enabled:focus,
 .sensors-view select:enabled:focus {
     border-color: rgb(77, 144, 254);
     outline: none;
 }
 
-.sensors-view input[type=text],
+.sensors-view input,
 .sensors-view select {
     border: 1px solid #bfbfbf;
     border-radius: 2px;
@@ -31,12 +33,16 @@
     color: #444;
     font: inherit;
     border-width: 1px;
+    text-align: left;
 }
 
-.sensors-view input[type=text] {
-    margin-left: 3px;
+.sensors-view input {
     min-height: 2em;
     padding: 3px;
+    width: 100%;
+    max-width: 128px;
+    margin: -5px 10px 0px 0px;
+    text-align: end;
 }
 
 .sensors-view input[readonly] {
@@ -45,8 +51,9 @@
 
 .sensors-view fieldset {
     border: none;
-    padding: 0 0 5px 15px;
+    padding: 10px 0px;
     flex: 0 0 auto;
+    margin: 0;
 }
 
 .sensors-view fieldset[disabled] {
@@ -57,97 +64,259 @@
     display: none;
 }
 
-.sensors-view input[type='text']:focus::-webkit-input-placeholder {
+.sensors-view input:focus::-webkit-input-placeholder {
     color: transparent !important;
 }
 
+.sensors-view .chrome-select {
+    width: 200px;
+}
+
+.sensors-group-title {
+    width: 100px;
+    line-height: 24px;
+}
+
+.sensors-group {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.geo-fields {
+    flex: 2 0 200px;
+}
+
+.latlong-group {
+    display: flex;
+    margin-bottom: 10px;
+}
+
+.latlong-title {
+    width: 70px;
+}
+
 /* Accelerometer */
 
+.orientation-content {
+    display: flex;
+}
+
+.orientation-fields {
+    margin-right: 10px;
+}
+
 .accelerometer-stage {
     -webkit-perspective: 700px;
     -webkit-perspective-origin: 50% 50%;
-    width: 200px;
-    height: 130px;
+    width: 160px;
+    height: 150px;
+    background: -webkit-linear-gradient(#E1F5FE 0%, #E1F5FE 64%, #b0Ebf3 64%, #DEF6F9 100%);
+    transition: 0.2s ease opacity, 0.2s ease -webkit-filter;
+    margin-right: 10px;
+}
+
+.accelerometer-stage.disabled {
+    -webkit-filter: grayscale();
+    opacity: 0.5;
 }
 
 fieldset.device-orientation-override-section[disabled] .accelerometer-stage {
     cursor: default !important;
 }
 
-.accelerometer-box {
-    pointer-events:none;
-    margin-top: -54px;
-    margin-left: -40px;
+.accelerometer-box,
+.accelerometer-front,
+.accelerometer-back,
+.accelerometer-top,
+.accelerometer-bottom,
+.accelerometer-left,
+.accelerometer-right,
+.accelerometer-left::before,
+.accelerometer-left::after,
+.accelerometer-right::before,
+.accelerometer-right::after,
+.accelerometer-top::before,
+.accelerometer-top::after,
+.accelerometer-bottom::before,
+.accelerometer-bottom::after

[lushnikov, 2016/04/28 17:51:28]

maybe add accelerometer-element class and just add it to the desired elements?

[luoe, 2016/04/29 19:00:35]

Done.

+{
     position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 80px;
-    height: 108px;
-    -webkit-transform-style: preserve-3d;
+    box-sizing: border-box;
+    transform-style: preserve-3d;
+    background: no-repeat;
+    background-size: cover;
+    backface-visibility: hidden;
 }
 
-.accelerometer-box section {
-    margin-top: -54px;
-    margin-left: -40px;
-    position: absolute;
-    display: block;
-    overflow: hidden;
-    top: 50%;
-    left: 50%;
-    -webkit-transform-style: flat;
-    -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
+.accelerometer-box {
+    width: 66px;
+    height: 122px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
 }
 
-.accelerometer-box .front {
-    border:15px solid black;
-    width: 80px;
-    height: 107px;
-    background-color: gray;
-    transform: translate3d(0, 0, 10px);
+.accelerometer-box.is-animating {
+    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.accelerometer-box .back {
-    width: 80px;
-    height: 107px;
-    background-color: black;
-    transform: rotateY(-180deg) translate3d(0, 0, 10px);
+.accelerometer-front,
+.accelerometer-back
+{
+    width: 66px;
+    height: 122px;
+    border-radius: 8px;
 }
 
-.accelerometer-box .top {
-    overflow: hidden;
-    width: 80px;
-    height: 20px;
-    background-color: #75CE89;
-    transform: rotateX(-90deg) translate3d(0, 0, -10px);
+.accelerometer-front {
+    background-image: url(Images/accelerometer-front.png);
 }
 
-.accelerometer-box .bottom {
-    overflow: hidden;
-    width: 80px;
-    height: 20px;
-    background-color: #865C6C;
-    transform: rotateX(90deg) translate3d(0, 0, -97px);
+.accelerometer-back {
+    transform: rotateY(180deg) translateZ(12px);
+    background-image: url(Images/accelerometer-back.png);
 }
 
-.accelerometer-box .left {
-    width: 20px;
-    height: 107px;
-    background-color: #7992CB;
-    transform: rotateY(90deg) translate3d(0, 0, 70px);
+
+.accelerometer-left,
+.accelerometer-right {
+    width: 12px;
+    height: 106px;
+    top: 8px;
+    background-position: center center;
 }
 
-.accelerometer-box .right {
-    width: 20px;
-    height: 107px;
-    background-color: #7992CB;
-    transform: rotateY(-90deg) translate3d(0, 0, 10px);
+.accelerometer-left {
+    left: -12px;
+    transform-origin: right center;
+    transform: rotateY(-90deg);
+    background-image: url(Images/accelerometer-left.png);
+}
+
+
+.accelerometer-right {
+    right: -12px;
+    transform-origin: left center;
+    transform: rotateY(90deg);
+    background-image: url(Images/accelerometer-right.png);
+}
+
+.accelerometer-left::before,
+.accelerometer-left::after,
+.accelerometer-right::before,
+.accelerometer-right::after
+{
+    content: '';
+    width: 12px;
+    height: 6px;
+}
+
+.accelerometer-left::before,
+.accelerometer-left::after
+{
+    background-image: url(Images/accelerometer-left.png);
+}
+
+.accelerometer-right::before,
+.accelerometer-right::after
+{
+    background-image: url(Images/accelerometer-right.png);
+}
+
+.accelerometer-left::before,
+.accelerometer-right::before {
+    top: -6px;
+    transform-origin: center bottom;
+    transform: rotateX(26deg);
+    background-position: center top;
+}
+
+.accelerometer-left::after,
+.accelerometer-right::after {
+    bottom: -6px;
+    transform-origin: center top;
+    transform: rotateX(-25deg);
+    background-position: center bottom;
+}
+
+.accelerometer-top,
+.accelerometer-bottom {
+    width: 50px;
+    height: 12px;
+    left: 8px;
+    background-position: center center;
+}
+
+.accelerometer-top {
+    top: -12px;
+    transform-origin: center bottom;
+    transform: rotateX(90deg);
+    background-image: url(Images/accelerometer-top.png);
+}
+
+
+.accelerometer-bottom {
+    bottom: -12px;
+    transform-origin: center top;
+    transform: rotateX(-90deg);
+    background-image: url(Images/accelerometer-bottom.png);
+}
+
+
+.accelerometer-top::before,
+.accelerometer-top::after,
+.accelerometer-bottom::before,
+.accelerometer-bottom::after
+{
+    content: '';
+    width: 8px;
+    height: 12px;
+}
+
+.accelerometer-top::before,
+.accelerometer-top::after
+{
+    background-image: url(Images/accelerometer-top.png);
+}
+
+.accelerometer-bottom::before,
+.accelerometer-bottom::after
+{
+    background-image: url(Images/accelerometer-bottom.png);
+}
+
+.accelerometer-top::before,
+.accelerometer-bottom::before {
+    left: -6px;
+    transform-origin: right center;
+    transform: rotateY(-26deg);
+    background-position: left center;
+}
+
+.accelerometer-top::after,
+.accelerometer-bottom::after {
+    right: -6px;
+    transform-origin: left center;
+    transform: rotateY(26deg);
+    background-position: right center;
 }
 
 .accelerometer-axis-input-container {
     margin-bottom: 10px;
 }
 
+.accelerometer-axis-input-container input {
+    max-width: 80px;
+}
+
+.accelerometer-reset-button {
+    min-width: 80px;
+}
+
 fieldset.device-orientation-override-section {
+    margin: 0;
     display: flex;
 }
 
@@ -158,3 +327,9 @@ fieldset.device-orientation-override-section {
 .touch-label select {
     margin-left: 10px;
 }
+
+.panel-section-separator {
+    height: 2px;
+    margin-bottom: 12px;
+    background: #f1f1f1;
+}