Bug 1122662 - Resize graphs when window resizes;r=vporof, a=sledru
authorBrian Grinstead <bgrinstead@mozilla.com>
Fri, 22 May 2015 09:38:29 -0400
changeset 274859 80a01b680aceb904adc0e66fc49646873f0dfe9b
parent 274858 f00b5164da00bd7609386bb3982b309ccb7119c3
child 274860 11c00eb7c82aca85b1cafd45d12fcf90b6c16d79
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof, sledru
bugs1122662
milestone40.0a2
Bug 1122662 - Resize graphs when window resizes;r=vporof, a=sledru
browser/devtools/performance/performance.xul
browser/devtools/shared/widgets/Graphs.jsm
browser/themes/shared/devtools/performance.inc.css
--- a/browser/devtools/performance/performance.xul
+++ b/browser/devtools/performance/performance.xul
@@ -169,20 +169,22 @@
                   pack="center"
                   flex="1">
               <vbox>
                 <hbox class="devtools-toolbarbutton-group"
                       pack="center">
                   <toolbarbutton class="devtools-toolbarbutton record-button"
                                  label="&profilerUI.stopRecording;" />
                 </hbox>
-                <label class="realtime-disabled-message"
-                       value="Realtime recording data disabled on non-multiprocess Firefox."/>
-                <label class="realtime-disabled-on-e10s-message"
-                       value="Enable multiprocess Firefox in preferences for rendering recording data in realtime."/>
+                <label class="realtime-disabled-message">
+                  Realtime recording data disabled on non-multiprocess Firefox.
+                </label>
+                <label class="realtime-disabled-on-e10s-message">
+                  Enable multiprocess Firefox in preferences for rendering recording data in realtime.
+                </label>
                 <label class="buffer-status-message"
                        tooltiptext="&profilerUI.bufferStatusTooltip;"/>
                 <label class="buffer-status-message-full"
                        value="&profilerUI.bufferStatusFull;"/>
               </vbox>
             </hbox>
             <hbox id="console-recording-notice"
                   class="notice-container"
@@ -195,20 +197,22 @@
                       <label class="console-profile-command" />
                       <label value="&profilerUI.console.recordingNoticeEnd;" />
                     </hbox>
                     <hbox class="console-profile-stop-notice">
                       <label value="&profilerUI.console.stopCommandStart;" />
                       <label class="console-profile-command" />
                       <label value="&profilerUI.console.stopCommandEnd;" />
                     </hbox>
-                    <label class="realtime-disabled-message"
-                           value="Realtime recording data disabled on non-multiprocess Firefox."/>
-                    <label class="realtime-disabled-on-e10s-message"
-                           value="Enable multiprocess Firefox in preferences for rendering recording data in realtime."/>
+                    <label class="realtime-disabled-message">
+                      Realtime recording data disabled on non-multiprocess Firefox.
+                    </label>
+                    <label class="realtime-disabled-on-e10s-message">
+                      Enable multiprocess Firefox in preferences for rendering recording data in realtime.
+                    </label>
                     <label class="buffer-status-message"
                            tooltiptext="&profilerUI.bufferStatusTooltip;"/>
                     <label class="buffer-status-message-full"
                            value="&profilerUI.bufferStatusFull;"/>
                   </vbox>
             </hbox>
             <deck id="details-pane" flex="1">
               <hbox id="waterfall-view" flex="1">
--- a/browser/devtools/shared/widgets/Graphs.jsm
+++ b/browser/devtools/shared/widgets/Graphs.jsm
@@ -2022,19 +2022,24 @@ BarGraphWidget.prototype = Heritage.exte
 AbstractCanvasGraph.createIframe = function(url, parent, callback) {
   let iframe = parent.ownerDocument.createElementNS(HTML_NS, "iframe");
 
   iframe.addEventListener("DOMContentLoaded", function onLoad() {
     iframe.removeEventListener("DOMContentLoaded", onLoad);
     callback(iframe);
   });
 
+  // Setting 100% width on the frame and flex on the parent allows the graph
+  // to properly shrink when the window is resized to be smaller.
   iframe.setAttribute("frameborder", "0");
+  iframe.style.width = "100%";
+  iframe.style.minWidth = "50px";
   iframe.src = url;
 
+  parent.style.display = "flex";
   parent.appendChild(iframe);
 };
 
 /**
  * Gets a striped pattern used as a background in selections and regions.
  *
  * @param object data
  *        The following properties are required:
--- a/browser/themes/shared/devtools/performance.inc.css
+++ b/browser/themes/shared/devtools/performance.inc.css
@@ -110,16 +110,20 @@
 #performance-view toolbarbutton.record-button[checked] {
   color: var(--theme-selection-color);
   background: var(--theme-selection-background);
 }
 
 #performance-view .realtime-disabled-message,
 #performance-view .realtime-disabled-on-e10s-message {
   display: none;
+  /* This label does not want to wrap naturally (based on some combination of
+     it's parents and flex).  Quick and dirty way to force it to wrap -> don't
+     let it get bigger than half the screen size */
+  max-width: 60vw;
 }
 
 #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message {
   display: block;
   opacity: 0.5;
 
 }
 #performance-view[e10s="unsupported"] .realtime-disabled-message {