Bug 1242003 - Load More row in dominator trees should be styled differently. r=julienw
authorlloan <lloanalas@outlook.com>
Mon, 04 Mar 2019 16:26:39 +0000
changeset 520110 22825edb005f44402cafe01861b19860298f2066
parent 520109 7d5b42ad1bd771266790495e22c26f91bb7bb08b
child 520111 0aee72fddeb928ab18c92b83fd156423a789efa5
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjulienw
bugs1242003
milestone67.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 1242003 - Load More row in dominator trees should be styled differently. r=julienw Updated "Load More" row in dominator trees to look more like a link in order to tell it apart from other text and to indicate that the element can be clicked. Differential Revision: https://phabricator.services.mozilla.com/D21471
devtools/client/memory/components/DominatorTree.js
devtools/client/themes/memory.css
--- a/devtools/client/memory/components/DominatorTree.js
+++ b/devtools/client/memory/components/DominatorTree.js
@@ -90,16 +90,17 @@ class DominatorTreeSiblingLinkClass exte
       dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }),
       dom.span(
         {
           className: "heap-tree-item-field heap-tree-item-name",
           style: { marginInlineStart: depth * TREE_ROW_HEIGHT },
         },
         dom.a(
           {
+            className: "load-more-link",
             onClick: () => onLoadMoreSiblings(item),
           },
           L10N.getStr("tree-item.load-more")
         )
       )
     );
   }
 }
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -4,24 +4,28 @@
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-dark {
   --cell-border-color: rgba(255,255,255,0.15);
   --cell-border-color-light: rgba(255,255,255,0.1);
   --focus-cell-border-color: rgba(255,255,255,0.5);
   --row-alt-background-color: rgba(86, 117, 185, 0.15);
   --row-hover-background-color: rgba(86, 117, 185, 0.25);
+  --link-color: var(--blue-40);
+  --link-color-active: var(--blue-30);
 }
 
 .theme-light {
   --cell-border-color: rgba(0,0,0,0.15);
   --cell-border-color-light: rgba(0,0,0,0.1);
   --focus-cell-border-color: rgba(0,0,0,0.3);
   --row-alt-background-color: rgba(76,158,217,0.1);
   --row-hover-background-color: rgba(76,158,217,0.2);
+  --link-color: var(--blue-60);
+  --link-color-active: var(--blue-70);
 }
 
 html, body, #app, #memory-tool {
   height: 100%;
 }
 
 #memory-tool {
   /**
@@ -273,17 +277,17 @@ html, body, #app, #memory-tool {
    */
   min-width: 0;
 }
 
 #heap-view {
   /**
    * Flex: contains a .heap-view-panel which needs to fill out all the
    * available space, horizontally and vertically.
-   */;
+   */
   display: flex;
   /**
    * Flexing to fill out remaining horizontal space. The preceeding sibling
    * is the sidebar. @see #memory-tool-container.
    */
   flex: 1;
   background-color: var(--theme-body-background);
 
@@ -545,16 +549,29 @@ html, body, #app, #memory-tool {
 
 .tree-map-container {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
 
+.load-more-link {
+  cursor: pointer;
+  color: var(--link-color);
+}
+
+.load-more-link:hover {
+  text-decoration: underline;
+}
+
+.load-more-link:active {
+  color: var(--link-color-active);
+}
+
 /**
  * Heap tree errors.
  */
 
 .error::before {
   content: "";
   display: inline-block;
   vertical-align: -2px;