Bug 1219623 - Memory tool should be responsive in low widths and right panel docked. r=fitzgen, a=blanket-sylvestre, l10n=blanket-sylvestre CLOSED TREE
authorJordan Santell <jsantell@mozilla.com>
Fri, 30 Oct 2015 13:31:41 -0700
changeset 305348 cb029edb917f480e9cdd9d4613a623f708ef9139
parent 305347 8a18306d24a82d2c061ebc13e1fc398c63a8775f
child 305349 7063e8c719a2d48e4fb5024f7a0a6c8501d1eabb
push id1001
push userraliiev@mozilla.com
push dateMon, 18 Jan 2016 19:06:03 +0000
treeherdermozilla-release@8b89261f3ac4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfitzgen, blanket-sylvestre
bugs1219623
milestone44.0a2
Bug 1219623 - Memory tool should be responsive in low widths and right panel docked. r=fitzgen, a=blanket-sylvestre, l10n=blanket-sylvestre CLOSED TREE
devtools/client/memory/components/frame.js
devtools/client/themes/memory.css
--- a/devtools/client/memory/components/frame.js
+++ b/devtools/client/memory/components/frame.js
@@ -10,17 +10,17 @@ const Frame = module.exports = createCla
 
   propTypes: {
     frame: PropTypes.object.isRequired,
     toolbox: PropTypes.object.isRequired,
   },
 
   render() {
     let { toolbox, frame } = this.props;
-    const { short, long, host } = parseSource(frame);
+    const { short, long, host } = parseSource(frame.source);
 
     let func = frame.functionDisplayName || "";
     let tooltip = `${func} (${long}:${frame.line}:${frame.column})`;
     let viewTooltip = L10N.getFormatStr("viewsourceindebugger", `${long}:${frame.line}:${frame.column}`);
     let onClick = () => toolbox.viewSourceInDebugger(long, frame.line);
 
     let fields = [
       dom.span({ className: "frame-link-function-display-name" }, func),
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -90,16 +90,17 @@ html, body, #app, #memory-tool {
  *
  * @see bug 1173397 for another inverted related bug
  */
 .theme-light .devtools-toolbarbutton.take-snapshot::before {
   filter: url(images/filters.svg#invert);
 }
 
 .list {
+  min-width: var(--sidebar-width);
   width: var(--sidebar-width);
   overflow-y: auto;
   margin: 0;
   padding: 0;
   background-color: var(--theme-sidebar-background);
   border-inline-end: 1px solid var(--theme-splitter-color);
 }
 
@@ -138,16 +139,17 @@ html, body, #app, #memory-tool {
  * Main panel
  */
 
 #heap-view {
   display: flex;
   flex: 1;
   justify-content: center;
   background-color: var(--theme-toolbar-background);
+  min-width: 400px;
 }
 
 #heap-view .snapshot-status,
 #heap-view .take-snapshot {
   margin: auto;
   margin-top: 65px;
   font-size: 120%;
 }
@@ -186,68 +188,50 @@ html, body, #app, #memory-tool {
 .header {
   height: var(--heap-tree-header-height);
   display: flex;
   align-items: center;
   color: var(--theme-body-color);
   background-color: var(--theme-tab-toolbar-background);
 }
 
-.header span {
-  text-align: center;
-  line-height: var(--heap-tree-header-height);
-  font-size: 90%;
-}
-
 .tree span {
   line-height: var(--heap-tree-row-height);
 }
 
-.header span,
-.tree span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .tree {
   flex: 1;
   overflow-y: auto;
   background-color: var(--theme-body-background);
 }
 
 .tree-node {
   height: var(--heap-tree-row-height);
   clear: left;
 }
 
-.heap-tree-item {
-  height: inherit;
-}
-
 .heap-tree-percent {
   width: 30%;
 }
 
 .heap-tree-number {
   width: 70%;
   color: var(--theme-content-color3);
+  padding-right: 5px;
 }
 
 .focused .heap-tree-number {
   color: var(--theme-selection-color);
 }
 
 .heap-tree-item, .header {
   list-style-type: none;
   height: var(--heap-tree-row-height);
-}
-
-.heap-tree-item-field {
-  float: left;
+  display: flex;
+  flex-direction: row;
 }
 
 .tree-node:nth-child(2n) {
   background-color: var(--row-alt-background-color);
 }
 
 .tree-node:hover {
   background-color: var(--row-hover-background-color);
@@ -261,47 +245,56 @@ html, body, #app, #memory-tool {
 .header {
   background-color: var(--theme-tab-toolbar-background);
   border-color: var(--cell-border-color);
   border-style: solid;
   border-width: 0px 0px 1px 0px;
 }
 
 .header span {
+  text-align: center;
+  line-height: var(--heap-tree-header-height);
+  font-size: 90%;
+  display: inline;
+}
+
+.header span, .heap-tree-number, .heap-tree-percent, .heap-tree-item-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-align: center;
-  font-size: 90%;
+}
+
+.header .heap-tree-item-name {
+  text-align: left;
 }
 
 .heap-tree-item-bytes,
 .heap-tree-item-count,
 .heap-tree-item-total-bytes,
 .heap-tree-item-total-count {
   text-align: end;
   border-inline-end: var(--cell-border-color) 1px solid;
   padding-inline-end: 5px;
   display: flex;
   flex-direction: row;
-  min-width: 10em;
 }
 
 .heap-tree-item-count,
 .heap-tree-item-total-count {
-  width: 8vw;
+  width: 8%;
 }
 
 .heap-tree-item-bytes,
 .heap-tree-item-total-bytes {
-  width: 8vw;
+  width: 10%;
 }
 
 .heap-tree-item-name {
-  -moz-padding-start: 5px;
+  width: 50%;
+  padding-left: 5px;
 }
 
 .error::before {
   content: "";
   display: inline-block;
   width: 12px;
   height: 12px;
   background-image: url(chrome://devtools/skin/themes/images/webconsole.svg);