Bug 1844086 - [devtools] Add title to SearchBox clear input button. r=devtools-reviewers,bomsy.

Differential Revision: https://phabricator.services.mozilla.com/D189194

devtools/client/locales/en-US/components.properties

@@ -47,3 +47,7 @@ searchModifier.caseSensitiveModifier=Match Case
 # LOCALIZATION NOTE(searchModifier.wholeWordModifier): A search option
 # when searching text in a file
 searchModifier.wholeWordModifier=Match Whole Word
+
+# LOCALIZATION NOTE (searchBox.clearButtonTitle): The title of the SearchBox clear input
+# button, which is displayed when the input is not empty.
+searchBox.clearButtonTitle=Clear filter input

devtools/client/shared/components/SearchBox.js

@@ -14,6 +14,11 @@ const {
 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
 
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const l10n = new LocalizationHelper(
+  "devtools/client/locales/components.properties"
+);
+
 loader.lazyGetter(this, "SearchBoxAutocompletePopup", function () {
   return createFactory(
     require("resource://devtools/client/shared/components/SearchBoxAutocompletePopup.js")
@@ -254,6 +259,7 @@ class SearchBox extends PureComponent {
         className: "devtools-searchinput-clear",
         hidden: value === "",
         onClick: this.onClearButtonClick,
+        title: l10n.getStr("searchBox.clearButtonTitle"),
       }),
       showAutocomplete &&
         SearchBoxAutocompletePopup({