Bug 1218673 - Clean up toolbar stlying and be more responsive in the memory tool. r=fitzgen
authorJordan Santell <jsantell@mozilla.com>
Thu, 29 Oct 2015 17:16:46 -0700
changeset 304420 2b3c135ca9caafcaf4d390ad70929ddecf3700cb
parent 304419 2df19018183be4fca3d19f685b084e8b9f16ffad
child 304421 b7e22cd2ec02c00065bbd5c2f35e923f7abc3a22
push id5513
push userraliiev@mozilla.com
push dateMon, 25 Jan 2016 13:55:34 +0000
treeherdermozilla-beta@5ee97dd05b5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfitzgen
bugs1218673
milestone45.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1218673 - Clean up toolbar stlying and be more responsive in the memory tool. r=fitzgen
devtools/client/memory/components/toolbar.js
devtools/client/themes/memory.css
--- a/devtools/client/memory/components/toolbar.js
+++ b/devtools/client/memory/components/toolbar.js
@@ -35,40 +35,42 @@ const Toolbar = module.exports = createC
     return (
       dom.div({ className: "devtools-toolbar" },
         dom.button({
           className: `take-snapshot devtools-button`,
           onClick: onTakeSnapshotClick,
           title: L10N.getStr("take-snapshot")
         }),
 
-        dom.label({},
-          L10N.getStr("toolbar.breakdownBy"),
-          dom.select({
-            id: "select-breakdown",
-            className: `select-breakdown`,
-            onChange: e => onBreakdownChange(e.target.value),
-          }, ...breakdowns.map(({ name, displayName }) => dom.option({ key: name, value: name }, displayName)))
-        ),
+        dom.div({ className: "toolbar-group" },
+          dom.label({ className: "breakdown-by" },
+            L10N.getStr("toolbar.breakdownBy"),
+            dom.select({
+              id: "select-breakdown",
+              className: `select-breakdown`,
+              onChange: e => onBreakdownChange(e.target.value),
+            }, ...breakdowns.map(({ name, displayName }) => dom.option({ key: name, value: name }, displayName)))
+          ),
 
-        dom.label({},
-          dom.input({
-            id: "invert-tree-checkbox",
-            type: "checkbox",
-            checked: inverted,
-            onChange: onToggleInverted,
-          }),
-          L10N.getStr("checkbox.invertTree")
-        ),
+          dom.label({},
+            dom.input({
+              id: "invert-tree-checkbox",
+              type: "checkbox",
+              checked: inverted,
+              onChange: onToggleInverted,
+            }),
+            L10N.getStr("checkbox.invertTree")
+          ),
 
-        dom.label({},
-          dom.input({
-            type: "checkbox",
-            checked: allocations.recording,
-            disabled: allocations.togglingInProgress,
-            onChange: onToggleRecordAllocationStacks,
-          }),
-          L10N.getStr("checkbox.recordAllocationStacks")
+          dom.label({},
+            dom.input({
+              type: "checkbox",
+              checked: allocations.recording,
+              disabled: allocations.togglingInProgress,
+              onChange: onToggleRecordAllocationStacks,
+            }),
+            L10N.getStr("checkbox.recordAllocationStacks")
+          )
         )
       )
     );
   }
 });
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -35,16 +35,31 @@ html, body, #app, #memory-tool {
   --heap-tree-header-height: 17px;
 }
 
 #memory-tool .devtools-toolbar {
   display: flex;
   align-items: center;
 }
 
+.devtools-toolbar .toolbar-group {
+  position: absolute;
+  left: var(--sidebar-width);
+  top: -2px;
+  white-space: nowrap;
+}
+
+.toolbar-group > label {
+  margin-right: 5px;
+}
+
+.toolbar-group .breakdown-by span {
+  margin-right: 5px;
+}
+
 #memory-tool-container {
   overflow: hidden;
   display: flex;
   flex: 1;
 }
 
 /**
  * Toolbar
@@ -63,16 +78,17 @@ html, body, #app, #memory-tool {
 }
 @media (min-resolution: 1.1dppx) {
   .devtools-toolbar .devtools-button.take-snapshot::before {
     background-image: url(images/command-screenshot@2x.png);
   }
 }
 
 /**
+ * TODO bug 1213100
  * Once we figure out how to store invertable buttons (pseudo element like in this case?)
  * we should add a .invertable class to handle this generally, rather than the definitions
  * in toolbars.inc.css.
  *
  * @see bug 1173397 for another inverted related bug
  */
 .theme-light .devtools-toolbarbutton.take-snapshot::before {
   filter: url(images/filters.svg#invert);