Merge pull request #2779 from AnalyticalGraphicsInc/performance-style

PerformanceDisplay styled by CSS instead of JS.
CesiumGS · Jun 3, 2015 · f6257a5 · f6257a5
2 parents 3f58120 + 8060ccc
commit f6257a5
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 28 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,6 +1,10 @@
 Change Log
 ==========
 
+### 1.11 - 2015-07-01
+
+* The performance statistics displayed by setting `scene.debugShowFramesPerSecond` to `true` can now be styled using the `cesium-performanceDisplay` CSS classes in `shared.css`.
+
 ### 1.10 - 2015-06-01
 
 * Breaking changes

diff --git a/Source/Scene/PerformanceDisplay.js b/Source/Scene/PerformanceDisplay.js
@@ -17,10 +17,6 @@ define([
         getElement) {
     "use strict";
 
-    var defaultFpsColor = Color.fromCssColorString('#e52');
-    var defaultFrameTimeColor = Color.fromCssColorString('#de3');
-    var defaultBackgroundColor = Color.fromCssColorString('rgba(40, 40, 40, 0.7)');
-
     /**
      * @private
      */
@@ -33,28 +29,19 @@ define([
         }
 
         this._container = container;
-        this._fpsColor = defaultValue(options.fpsColor, defaultFpsColor).toCssColorString();
-        this._frameTimeColor = defaultValue(options.frameTimeColor, defaultFrameTimeColor).toCssColorString();
-        this._backgroundColor = defaultValue(options.backgroundColor, defaultBackgroundColor).toCssColorString();
-        this._font = defaultValue(options.font, 'bold 12px Helvetica,Arial,sans-serif');
 
         var display = document.createElement('div');
+        display.className = 'cesium-performanceDisplay';
         var fpsElement = document.createElement('div');
+        fpsElement.className = 'cesium-performanceDisplay-fps';
         this._fpsText = document.createTextNode("");
         fpsElement.appendChild(this._fpsText);
-        fpsElement.style.color = this._fpsColor;
         var msElement = document.createElement('div');
+        msElement.className = 'cesium-performanceDisplay-ms';
         this._msText = document.createTextNode("");
-        msElement.style.color = this._frameTimeColor;
         msElement.appendChild(this._msText);
-        display.appendChild(fpsElement);
         display.appendChild(msElement);
-        display.style['z-index'] = 1;
-        display.style['background-color'] = this._backgroundColor;
-        display.style.font = this._font;
-        display.style.padding = '7px';
-        display.style['border-radius'] = '5px';
-        display.style.border = '1px solid #444';
+        display.appendChild(fpsElement);
         this._container.appendChild(display);
 
         this._lastFpsSampleTime = undefined;

diff --git a/Source/Scene/Scene.js b/Source/Scene/Scene.js
@@ -1647,10 +1647,7 @@ define([
         if (scene.debugShowFramesPerSecond) {
             if (!defined(scene._performanceDisplay)) {
                 var performanceContainer = document.createElement('div');
-                performanceContainer.className = 'cesium-performanceDisplay';
-                performanceContainer.style.position = 'absolute';
-                performanceContainer.style.top = '50px';
-                performanceContainer.style.right = '10px';
+                performanceContainer.className = 'cesium-performanceDisplay-defaultContainer';
                 var container = scene._canvas.parentNode;
                 container.appendChild(performanceContainer);
                 var performanceDisplay = new PerformanceDisplay({container: performanceContainer});

diff --git a/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js b/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js
@@ -60,8 +60,6 @@ define([
         return str;
     }
 
-    var bc = new Color(0.15, 0.15, 0.15, 0.75);
-
     function boundDepthFrustum(lower, upper, proposed) {
         var bounded = Math.min(proposed, upper);
         bounded = Math.max(bounded, lower);
@@ -336,9 +334,7 @@ define([
         this._showPerformance = createCommand(function() {
             if (that.performance) {
                 that._performanceDisplay = new PerformanceDisplay({
-                    container : that._performanceContainer,
-                    backgroundColor : bc,
-                    font : '12px arial,sans-serif'
+                    container : that._performanceContainer
                 });
             } else {
                 that._performanceContainer.innerHTML = '';

diff --git a/Source/Widgets/lighterShared.css b/Source/Widgets/lighterShared.css
@@ -36,4 +36,17 @@
     color: #999; /* For text buttons */
     fill: #999; /* For SVG buttons */
     box-shadow: none;
-}
+}
+
+.cesium-lighter .cesium-performanceDisplay {
+    background-color: #e2f0ff;
+    border-color: #759dc0;
+}
+
+.cesium-lighter .cesium-performanceDisplay-fps {
+    color: #e52;
+}
+
+.cesium-lighter .cesium-performanceDisplay-ms {
+    color: #ea4;
+}
diff --git a/Source/Widgets/shared.css b/Source/Widgets/shared.css
@@ -80,4 +80,27 @@
     padding: 0;
     vertical-align: middle;
     z-index: 0; /* Workaround for rounded raster image corners in Chrome */
-}
+}
+
+.cesium-performanceDisplay-defaultContainer {
+    position: absolute;
+    top: 50px;
+    right: 10px;
+    text-align: right;
+}
+
+.cesium-performanceDisplay {
+    background-color: rgba(40, 40, 40, 0.7);
+    padding: 7px;
+    border-radius: 5px;
+    border: 1px solid #444;
+    font: bold 12px sans-serif;
+}
+
+.cesium-performanceDisplay-fps {
+    color: #e52;
+}
+
+.cesium-performanceDisplay-ms {
+    color: #de3;
+}