Bug 1525821 - Add a clear button in the console filter input. r=nchevobbe.
authorAaditya Arora <b17071@students.iitmandi.ac.in>
Fri, 01 Mar 2019 06:35:05 +0000
changeset 519802 39380f2678a3685fd3f10d06463612805443afb9
parent 519801 dadc02e71d59e18fb6829fa83509b38ea0acc58c
child 519803 6c1f943e591c547b4c5c5ca642a449728e03b5ac
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)
reviewersnchevobbe
bugs1525821
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 1525821 - Add a clear button in the console filter input. r=nchevobbe. The button is only displayed when the input is not empty. A test case is added to ensure this works as expected. Differential Revision: https://phabricator.services.mozilla.com/D21443
devtools/client/themes/webconsole.css
devtools/client/webconsole/components/FilterBar.js
devtools/client/webconsole/test/mochitest/browser_webconsole_filter_by_input.js
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1025,8 +1025,16 @@ body {
 
 /** Utils **/
 .clipboard-only {
   position: absolute;
   left: -9999px;
   width: 0;
   height: 0;
 }
+
+/* set to prevent the filter height from devtools-searchbox */
+.webconsole-filterbar-primary .devtools-searchbox {
+  align-self: stretch;
+  height: unset;
+  flex: 1 1 100%;
+  margin-inline-start: 1px;
+}
--- a/devtools/client/webconsole/components/FilterBar.js
+++ b/devtools/client/webconsole/components/FilterBar.js
@@ -53,16 +53,20 @@ class FilterBar extends Component {
     this.renderFilteredMessagesBar = this.renderFilteredMessagesBar.bind(this);
   }
 
   componentDidMount() {
     this.props.attachRefToWebConsoleUI(
       "filterBox",
       this.wrapperNode.querySelector(".text-filter")
     );
+    this.props.attachRefToWebConsoleUI(
+      "clearButton",
+      this.wrapperNode.querySelector(".clear-button")
+    );
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     const {
       filter,
       persistLogs,
       filteredMessagesCount,
       closeButtonVisible,
@@ -240,23 +244,31 @@ class FilterBar extends Component {
         dom.button({
           className: "devtools-button devtools-clear-icon",
           title: l10n.getStr("webconsole.clearButton.tooltip"),
           onClick: this.onClickMessagesClear,
         }),
         dom.div({
           className: "devtools-separator",
         }),
-        dom.input({
-          className: "devtools-plaininput text-filter",
-          type: "search",
-          value: filter.text,
-          placeholder: l10n.getStr("webconsole.filterInput.placeholder"),
-          onInput: this.onSearchInput,
-        }),
+        dom.div(
+          { className: "devtools-searchbox has-clear-btn" },
+          dom.input({
+            className: "devtools-plaininput text-filter",
+            type: "search",
+            value: filter.text,
+            placeholder: l10n.getStr("webconsole.filterInput.placeholder"),
+            onInput: this.onSearchInput,
+          }),
+          dom.button({
+            className: "devtools-searchinput-clear clear-button",
+            hidden: filter.text == "",
+            onClick: this.onClickRemoveTextFilter,
+          }),
+        ),
         !hidePersistLogsCheckbox && FilterCheckbox({
           label: l10n.getStr("webconsole.enablePersistentLogs.label"),
           title: l10n.getStr("webconsole.enablePersistentLogs.tooltip"),
           onChange: this.onChangePersistToggle,
           checked: persistLogs,
         }),
       ),
     ];
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_filter_by_input.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_filter_by_input.js
@@ -80,16 +80,22 @@ add_task(async function() {
   checkLogContent(visibleLogs[0], HTML_CONSOLE_OUTPUT, HTML_FILENAME);
   for (let i = 0; i < SEASONS.length; i++) {
     checkLogContent(visibleLogs[i + 1], SEASONS[i].english, JS_ASCII_FILENAME);
   }
   for (let i = 0; i < SEASONS.length; i++) {
     checkLogContent(visibleLogs[i + 1 + SEASONS.length], SEASONS[i].chinese,
                     JS_UNICODE_FILENAME);
   }
+  // checking the visibility of clear button, it should be visible only when
+  // there is text inside filter input box
+  clearFilterInput(hud);
+  is(hud.ui.clearButton.hidden, true, "Clear button is hidden");
+  setFilterInput(hud, JS_ASCII_FILENAME);
+  is(hud.ui.clearButton.hidden, false, "Clear button is visible");
 
   // All the logs outputted by the ASCII Javascript file are visible, the others
   // are hidden.
   setFilterInput(hud, JS_ASCII_FILENAME);
   visibleLogs = getVisibleLogs(hud);
   is(visibleLogs.length, SEASONS.length,
        `the number of all the logs containing ${JS_ASCII_FILENAME}`);
   for (let i = 0; i < SEASONS.length; i++) {
@@ -147,27 +153,25 @@ add_task(async function() {
        `the number of all the logs containing ${SEASON.chinese}`);
   for (let i = 0; i < SEASONS.length; i++) {
     checkLogContent(visibleLogs[i], SEASONS[i].chinese, JS_UNICODE_FILENAME);
   }
 
   // After clearing the text in the filter input box, all the logs are visible
   // again.
   clearFilterInput(hud);
-  visibleLogs = getVisibleLogs(hud);
-  is(visibleLogs.length, SEASONS.length * 2 + 1,
-       "the total number of all the logs after clearing filtering");
-  checkLogContent(visibleLogs[0], HTML_CONSOLE_OUTPUT, HTML_FILENAME);
-  for (let i = 0; i < SEASONS.length; i++) {
-    checkLogContent(visibleLogs[i + 1], SEASONS[i].english, JS_ASCII_FILENAME);
-  }
-  for (let i = 0; i < SEASONS.length; i++) {
-    checkLogContent(visibleLogs[i + 1 + SEASONS.length], SEASONS[i].chinese,
-                    JS_UNICODE_FILENAME);
-  }
+  checkAllMessagesAreVisible(hud);
+
+  // clearing the text in the filter input box using clear button, so after which
+  // all logs will be visible again
+  setFilterInput(hud, JS_ASCII_FILENAME);
+
+  info("Click the input clear button");
+  clickClearButton(hud);
+  checkAllMessagesAreVisible(hud);
 });
 
 // Create an HTTP server to simulate a response for the a URL request and return
 // the URL.
 function createServerAndGetTestUrl() {
   const httpServer = createTestHTTPServer();
 
   httpServer.registerContentType("html", "text/html");
@@ -217,16 +221,33 @@ function clearFilterInput(hud) {
   EventUtils.synthesizeKey("KEY_Delete");
 }
 
 function getVisibleLogs(hud) {
   const outputNode = hud.outputNode;
   return outputNode.querySelectorAll(".message");
 }
 
+function clickClearButton(hud) {
+  hud.ui.clearButton.click();
+}
+
+function checkAllMessagesAreVisible(hud) {
+  const visibleLogs = getVisibleLogs(hud);
+  is(visibleLogs.length, SEASONS.length * 2 + 1,
+       "the total number of all the logs after clearing filtering");
+  checkLogContent(visibleLogs[0], HTML_CONSOLE_OUTPUT, HTML_FILENAME);
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(visibleLogs[i + 1], SEASONS[i].english, JS_ASCII_FILENAME);
+  }
+  for (let i = 0; i < SEASONS.length; i++) {
+    checkLogContent(visibleLogs[i + 1 + SEASONS.length], SEASONS[i].chinese,
+                    JS_UNICODE_FILENAME);
+  }
+}
 /**
  * Check if the content of a log message is what we expect.
  *
  * @param Object node
  *        The node for the log message.
  * @param String expectedMessageBody
  *        The string we expect to match the message body in the log message.
  * @param String expectedFilename