Bug 1541824 - Make Copy All Changes button sticky in Changes panel. r=gl
authorRazvan Caliman <rcaliman@mozilla.com>
Wed, 24 Apr 2019 07:58:50 +0000
changeset 530135 5c2540f3ed73ff48f6f523c7e67f9ce2da38dfa1
parent 530134 d1240d47e791648b1fafa798373ae12df02ea285
child 530136 bc316493ddae00897a98f9a0601f9764e7c4daa9
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1541824
milestone68.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 1541824 - Make Copy All Changes button sticky in Changes panel. r=gl Ensure the button to copy all changes remains in view even when the Changes panel is overflowing vertically. Differential Revision: https://phabricator.services.mozilla.com/D28487
devtools/client/inspector/changes/components/ChangesApp.js
devtools/client/themes/changes.css
--- a/devtools/client/inspector/changes/components/ChangesApp.js
+++ b/devtools/client/inspector/changes/components/ChangesApp.js
@@ -30,27 +30,29 @@ class ChangesApp extends PureComponent {
     };
   }
 
   constructor(props) {
     super(props);
   }
 
   renderCopyAllChangesButton() {
-    return dom.button(
+    const button = dom.button(
       {
         className: "changes__copy-all-changes-button",
         onClick: e => {
           e.stopPropagation();
           this.props.onCopyAllChanges();
         },
         title: getStr("changes.contextmenu.copyAllChangesDescription"),
       },
       getStr("changes.contextmenu.copyAllChanges")
     );
+
+    return dom.div({ className: "changes__toolbar" }, button);
   }
 
   renderCopyButton(ruleId) {
     return dom.button(
       {
         className: "changes__copy-rule-button",
         onClick: e => {
           e.stopPropagation();
--- a/devtools/client/themes/changes.css
+++ b/devtools/client/themes/changes.css
@@ -72,27 +72,40 @@
 #sidebar-panel-changes .level {
   padding-top: 3px;
   padding-right: 5px;
   padding-bottom: 3px;
   padding-left: calc(var(--diff-level-min-offset) +
                      var(--diff-level-offset) * var(--diff-level));
 }
 
+#sidebar-panel-changes .changes__toolbar {
+  background: var(--theme-sidebar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 2px 5px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/* Remove the top border of the first source to avoid double border from sticky toolbar */
+#sidebar-panel-changes .changes__toolbar + .source .href {
+  border-top: none;
+}
+
 .changes__copy-all-changes-button {
   -moz-context-properties: fill;
   /* Use the Firefox copy icon (16px) instead of the smaller DevTools one (12px) */
   background: url(chrome://browser/skin/edit-copy.svg) no-repeat;
   background-position: 4px 3px;
   background-size: 16px;
   border: none;
   border-radius: 3px;
   color: var(--theme-body-color);
   fill: currentColor;
-  margin: 2px 5px;
   padding: 4px 5px 4px 25px;
 }
 
 .changes__copy-all-changes-button:hover,
 .changes__copy-all-changes-button:focus {
   background-color: var(--theme-button-background);
 }