Merge pull request #5914 from plotly/dashboard-with-transform

Add css transform input to devtool

Author: archmoj

devtools/test_dashboard/devtools.js

@@ -178,11 +178,16 @@ var fuse = new Fuse(mocks, {
     }]
 });
 
-var searchBar = document.getElementById('mocks-search');
+var transformInput = document.getElementById('css-transform');
+var mockInput = document.getElementById('mocks-search');
 var mocksList = document.getElementById('mocks-list');
 var plotArea = document.getElementById('plots');
 
-searchBar.addEventListener('keyup', debounce(searchMocks, 250));
+mockInput.addEventListener('keyup', debounce(searchMocks, 250));
+
+transformInput.addEventListener('keyup', function(e) {
+    plotArea.style.transform = e.target.value;
+});
 
 function debounce(func, wait, immediate) {
     var timeout;
@@ -230,7 +235,16 @@ function searchMocks(e) {
 
         var listWidth = mocksList.getBoundingClientRect().width;
         var plotAreaWidth = Math.floor(window.innerWidth - listWidth);
-        plotArea.setAttribute('style', 'width: ' + plotAreaWidth + 'px;');
+
+        var allStyles = [
+            'width: ' + plotAreaWidth + 'px;'
+        ];
+
+        if(transformInput.value !== '') {
+            allStyles.push('transform: ' + transformInput.value + ';');
+        }
+
+        plotArea.setAttribute('style', allStyles.join(' '));
     });
 }
 

devtools/test_dashboard/index-strict.html

@@ -13,6 +13,7 @@
     <span id="reload-time"></span>
 
     <input id="mocks-search" type="text" placeholder="mocks search" />
+    <input id="css-transform" type="text" placeholder="css transform" />
   </header>
 
   <section id="mocks-list"></section>

devtools/test_dashboard/index.html

@@ -11,6 +11,7 @@
     <span id="reload-time"></span>
 
     <input id="mocks-search" type="text" placeholder="mocks search" />
+    <input id="css-transform" type="text" placeholder="css transform" />
   </header>
 
   <section id="mocks-list"></section>