Bug 1429296 - Show MDN link of filter properties when hover the filterbox; r=davidwalsh draft
authorJan Odvarko <odvarko@gmail.com>
Mon, 30 Apr 2018 14:58:26 +0200
changeset 790761 d11cc6da4d27e89710868d81ea2fe8390c576b08
parent 790760 c5275aa50632a8eb0ec70403acb70ac402ad0a4b
push id108575
push userjodvarko@mozilla.com
push dateWed, 02 May 2018 18:18:36 +0000
reviewersdavidwalsh
bugs1429296
milestone61.0a1
Bug 1429296 - Show MDN link of filter properties when hover the filterbox; r=davidwalsh MozReview-Commit-ID: H3xmQ95DbiF
devtools/client/jar.mn
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/assets/styles/MdnLink.css
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/netmonitor/src/assets/styles/httpi.css
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/netmonitor/src/components/HeadersPanel.js
devtools/client/netmonitor/src/components/MdnLink.js
devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
devtools/client/netmonitor/src/components/StatisticsPanel.js
devtools/client/netmonitor/src/components/TimingsPanel.js
devtools/client/netmonitor/src/components/Toolbar.js
devtools/client/netmonitor/src/components/moz.build
devtools/client/netmonitor/src/utils/mdn-utils.js
devtools/client/shared/components/MdnLink.css
devtools/client/shared/components/MdnLink.js
devtools/client/shared/components/SearchBox.js
devtools/client/shared/components/moz.build
devtools/client/themes/common.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -286,17 +286,16 @@ devtools.jar:
     skin/images/debugger/stepIn.svg (themes/images/debugger/stepIn.svg)
     skin/images/debugger/stepOut.svg (themes/images/debugger/stepOut.svg)
     skin/images/debugger/stepOver.svg (themes/images/debugger/stepOver.svg)
     skin/images/debugger/tab.svg (themes/images/debugger/tab.svg)
     skin/images/debugger/typescript.svg (themes/images/debugger/typescript.svg)
 
     # Netmonitor
     content/netmonitor/src/assets/styles/httpi.css (netmonitor/src/assets/styles/httpi.css)
-    content/netmonitor/src/assets/styles/MdnLink.css (netmonitor/src/assets/styles/MdnLink.css)
     content/netmonitor/src/assets/styles/netmonitor.css (netmonitor/src/assets/styles/netmonitor.css)
     content/netmonitor/src/assets/styles/NetworkDetailsPanel.css (netmonitor/src/assets/styles/NetworkDetailsPanel.css)
     content/netmonitor/src/assets/styles/RequestList.css (netmonitor/src/assets/styles/RequestList.css)
     content/netmonitor/src/assets/styles/StatisticsPanel.css (netmonitor/src/assets/styles/StatisticsPanel.css)
     content/netmonitor/src/assets/styles/StatusBar.css (netmonitor/src/assets/styles/StatusBar.css)
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -666,16 +666,20 @@ netmonitor.toolbar.filter.other=Other
 # LOCALIZATION NOTE (netmonitor.toolbar.filterFreetext.label): This is the label
 # displayed in the network toolbar for the url filtering textbox.
 netmonitor.toolbar.filterFreetext.label=Filter URLs
 
 # LOCALIZATION NOTE (netmonitor.toolbar.filterFreetext.key): This is the
 # shortcut key to focus on the toolbar url filtering textbox
 netmonitor.toolbar.filterFreetext.key=CmdOrCtrl+F
 
+# LOCALIZATION NOTE (netmonitor.toolbar.filterFreetext.learnMore): This is
+# the title used for MDN icon in filtering textbox
+netmonitor.toolbar.filterFreetext.learnMore=Learn more about filtering
+
 # LOCALIZATION NOTE (netmonitor.toolbar.enablePersistentLogs.label): This is the label
 # displayed for the checkbox for enabling persistent logs.
 netmonitor.toolbar.enablePersistentLogs.label=Persist Logs
 
 # LOCALIZATION NOTE (netmonitor.toolbar.enablePersistentLogs.tooltip): This is the tooltip
 # displayed for the checkbox for enabling persistent logs.
 netmonitor.toolbar.enablePersistentLogs.tooltip=If you enable this option the requests list will not be cleared each time you navigate to a new page
 
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -114,20 +114,38 @@
 }
 
 /* Make sure the Throttle button icon is vertically centered on Mac */
 :root[platform="mac"] #global-network-throttling-selector {
   height: 17px;
   background-position-y: 5px;
 }
 
-/* Search box */
+/* Filter input within the Toolbar */
 
-.devtools-searchbox {
-  height: 100%;
+.devtools-toolbar-group .devtools-filterinput {
+  border: none;
+  box-shadow: none;
 }
 
-.devtools-plaininput:focus {
+.devtools-toolbar-group .devtools-searchbox {
+  height: 29px;
+  border: 1px solid transparent;
+}
+
+.devtools-toolbar-group .devtools-searchbox:focus-within {
   border: 1px solid var(--blue-50);
   margin-bottom: 0;
   margin-top: 0;
   box-shadow: none;
 }
+
+.network-monitor .devtools-toolbar-group .learn-more-link::before {
+  opacity: 0.6;
+}
+
+/* Hide filter input learn more link if there is not enough
+   horizontal space. */
+@media (max-width: 590px) {
+  .network-monitor .devtools-searchbox:hover .learn-more-link {
+    display: none;
+  }
+}
--- a/devtools/client/netmonitor/src/assets/styles/httpi.css
+++ b/devtools/client/netmonitor/src/assets/styles/httpi.css
@@ -6,13 +6,13 @@
 @import "resource://devtools/client/shared/components/splitter/SplitBox.css";
 @import "resource://devtools/client/shared/components/tree/TreeView.css";
 @import "resource://devtools/client/shared/components/tabs/Tabs.css";
 @import "resource://devtools/client/shared/components/tabs/TabBar.css";
 @import "chrome://devtools/skin/components-frame.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/mozilla.css";
+@import "resource://devtools/client/shared/components/MdnLink.css";
 
 /* Network panel components & styles */
 @import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
-@import "chrome://devtools/content/netmonitor/src/assets/styles/MdnLink.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsPanel.css";
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -6,20 +6,20 @@
 @import "resource://devtools/client/shared/components/splitter/SplitBox.css";
 @import "resource://devtools/client/shared/components/tree/TreeView.css";
 @import "resource://devtools/client/shared/components/tabs/Tabs.css";
 @import "resource://devtools/client/shared/components/tabs/TabBar.css";
 @import "chrome://devtools/skin/components-frame.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/mozilla.css";
+@import "resource://devtools/client/shared/components/MdnLink.css";
 
 /* Network panel components & styles */
 @import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
-@import "chrome://devtools/content/netmonitor/src/assets/styles/MdnLink.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/Toolbar.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/StatusBar.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/RequestList.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsPanel.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/StatisticsPanel.css";
 
 /* General */
 
--- a/devtools/client/netmonitor/src/components/HeadersPanel.js
+++ b/devtools/client/netmonitor/src/components/HeadersPanel.js
@@ -25,17 +25,17 @@ const {
   HeaderList,
 } = require("../utils/headers-provider");
 
 // Components
 const PropertiesView = createFactory(require("./PropertiesView"));
 const StatusCode = createFactory(require("./StatusCode"));
 
 loader.lazyGetter(this, "MDNLink", function() {
-  return createFactory(require("./MdnLink"));
+  return createFactory(require("devtools/client/shared/components/MdnLink"));
 });
 loader.lazyGetter(this, "Rep", function() {
   return require("devtools/client/shared/components/reps/reps").REPS.Rep;
 });
 loader.lazyGetter(this, "MODE", function() {
   return require("devtools/client/shared/components/reps/reps").MODE;
 });
 
--- a/devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
+++ b/devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
@@ -9,17 +9,17 @@ const dom = require("devtools/client/sha
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/redux/visibility-handler-connect");
 const Actions = require("../actions/index");
 const { ACTIVITY_TYPE } = require("../constants");
 const { L10N } = require("../utils/l10n");
 const { getPerformanceAnalysisURL } = require("../utils/mdn-utils");
 
 // Components
-const MDNLink = createFactory(require("./MdnLink"));
+const MDNLink = createFactory(require("devtools/client/shared/components/MdnLink"));
 const RequestListHeader = createFactory(require("./RequestListHeader"));
 
 const { button, div, span } = dom;
 
 const RELOAD_NOTICE_1 = L10N.getStr("netmonitor.reloadNotice1");
 const RELOAD_NOTICE_2 = L10N.getStr("netmonitor.reloadNotice2");
 const RELOAD_NOTICE_3 = L10N.getStr("netmonitor.reloadNotice3");
 const PERFORMANCE_NOTICE_1 = L10N.getStr("netmonitor.perfNotice1");
--- a/devtools/client/netmonitor/src/components/StatisticsPanel.js
+++ b/devtools/client/netmonitor/src/components/StatisticsPanel.js
@@ -15,17 +15,17 @@ const { PluralForm } = require("devtools
 const Actions = require("../actions/index");
 const { Filters } = require("../utils/filter-predicates");
 const { getSizeWithDecimals, getTimeWithDecimals } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const { getPerformanceAnalysisURL } = require("../utils/mdn-utils");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
 // Components
-const MDNLink = createFactory(require("./MdnLink"));
+const MDNLink = createFactory(require("devtools/client/shared/components/MdnLink"));
 
 const { button, div } = dom;
 const MediaQueryList = window.matchMedia("(min-width: 700px)");
 
 const NETWORK_ANALYSIS_PIE_CHART_DIAMETER = 200;
 const BACK_BUTTON = L10N.getStr("netmonitor.backButton");
 const CHARTS_CACHE_ENABLED = L10N.getStr("charts.cacheEnabled");
 const CHARTS_CACHE_DISABLED = L10N.getStr("charts.cacheDisabled");
--- a/devtools/client/netmonitor/src/components/TimingsPanel.js
+++ b/devtools/client/netmonitor/src/components/TimingsPanel.js
@@ -8,17 +8,17 @@ const { Component } = require("devtools/
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { L10N } = require("../utils/l10n");
 const { getNetMonitorTimingsURL } = require("../utils/mdn-utils");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 const { TIMING_KEYS } = require("../constants");
 
 // Components
-const MDNLink = require("./MdnLink");
+const MDNLink = require("devtools/client/shared/components/MdnLink");
 
 const { div, span } = dom;
 
 const TIMINGS_END_PADDING = "80px";
 
 /**
  * Timings panel component
  * Display timeline bars that shows the total wait time for various stages
--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -16,27 +16,34 @@ const {
   getDisplayedRequests,
   getRecordingState,
   getTypeFilteredRequests,
 } = require("../selectors/index");
 const { autocompleteProvider } = require("../utils/filter-autocomplete-provider");
 const { L10N } = require("../utils/l10n");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
+// MDN
+const {
+  getFilterBoxURL,
+} = require("../utils/mdn-utils");
+const LEARN_MORE_URL = getFilterBoxURL();
+
 // Components
 const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 
 const { button, div, input, label, span } = dom;
 
 // Localization
 const SEARCH_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.filterFreetext.key");
 const SEARCH_PLACE_HOLDER = L10N.getStr("netmonitor.toolbar.filterFreetext.label");
 const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
 const TOOLBAR_TOGGLE_RECORDING = L10N.getStr("netmonitor.toolbar.toggleRecording");
 const TOOLBAR_HAR_BUTTON = L10N.getStr("netmonitor.label.har");
+const LEARN_MORE_TITLE = L10N.getStr("netmonitor.toolbar.filterFreetext.learnMore");
 
 // Preferences
 const DEVTOOLS_DISABLE_CACHE_PREF = "devtools.cache.disabled";
 const DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF = "devtools.netmonitor.persistlog";
 const TOOLBAR_FILTER_LABELS = FILTER_TAGS.concat("all").reduce((o, tag) =>
   Object.assign(o, { [tag]: L10N.getStr(`netmonitor.toolbar.filter.${tag}`) }), {});
 const ENABLE_PERSISTENT_LOGS_TOOLTIP =
   L10N.getStr("netmonitor.toolbar.enablePersistentLogs.tooltip");
@@ -349,16 +356,18 @@ class Toolbar extends Component {
         keyShortcut: SEARCH_KEY_SHORTCUT,
         placeholder: SEARCH_PLACE_HOLDER,
         plainStyle: true,
         type: "filter",
         ref: "searchbox",
         onChange: setRequestFilterText,
         onFocus: this.onSearchBoxFocus,
         autocompleteProvider: this.autocompleteProvider,
+        learnMoreUrl: LEARN_MORE_URL,
+        learnMoreTitle: LEARN_MORE_TITLE,
       })
     );
   }
 
   render() {
     let {
       toggleRecording,
       clearRequests,
--- a/devtools/client/netmonitor/src/components/moz.build
+++ b/devtools/client/netmonitor/src/components/moz.build
@@ -5,17 +5,16 @@
 DevToolsModules(
     'App.js',
     'CachePanel.js',
     'CookiesPanel.js',
     'CustomRequestPanel.js',
     'DropHarHandler.js',
     'HeadersPanel.js',
     'HtmlPreview.js',
-    'MdnLink.js',
     'MonitorPanel.js',
     'NetworkDetailsPanel.js',
     'ParamsPanel.js',
     'PropertiesView.js',
     'RequestList.js',
     'RequestListColumnCause.js',
     'RequestListColumnContentSize.js',
     'RequestListColumnCookies.js',
--- a/devtools/client/netmonitor/src/utils/mdn-utils.js
+++ b/devtools/client/netmonitor/src/utils/mdn-utils.js
@@ -190,14 +190,24 @@ function getNetMonitorTimingsURL() {
  * Get the MDN URL for Performance Analysis
  *
  * @return {string} The MDN URL for the documentation of Performance Analysis.
  */
 function getPerformanceAnalysisURL() {
   return `${MDN_URL}Tools/Network_Monitor${getGAParams()}#Performance_analysis`;
 }
 
+/**
+ * Get the MDN URL for Filter box
+ *
+ * @return {string} The MDN URL for the documentation of Filter box.
+ */
+function getFilterBoxURL() {
+  return `${MDN_URL}Tools/Network_Monitor${getGAParams()}#Filtering_by_properties`;
+}
+
 module.exports = {
   getHeadersURL,
   getHTTPStatusCodeURL,
   getNetMonitorTimingsURL,
   getPerformanceAnalysisURL,
+  getFilterBoxURL,
 };
rename from devtools/client/netmonitor/src/assets/styles/MdnLink.css
rename to devtools/client/shared/components/MdnLink.css
rename from devtools/client/netmonitor/src/components/MdnLink.js
rename to devtools/client/shared/components/MdnLink.js
--- a/devtools/client/netmonitor/src/components/MdnLink.js
+++ b/devtools/client/shared/components/MdnLink.js
@@ -3,27 +3,24 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const Services = require("Services");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { gDevTools } = require("devtools/client/framework/devtools");
-const { L10N } = require("../utils/l10n");
 
 const { a } = dom;
 
-const LEARN_MORE = L10N.getStr("netmonitor.headers.learnMore");
-
-function MDNLink({ url }) {
+function MDNLink({ url, title }) {
   return (
     a({
       className: "devtools-button learn-more-link",
-      title: LEARN_MORE,
+      title,
       onClick: (e) => onLearnMoreClick(e, url),
     })
   );
 }
 
 MDNLink.displayName = "MDNLink";
 
 MDNLink.propTypes = {
--- a/devtools/client/shared/components/SearchBox.js
+++ b/devtools/client/shared/components/SearchBox.js
@@ -7,29 +7,35 @@
 "use strict";
 
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 const AutocompletePopup = createFactory(require("devtools/client/shared/components/AutoCompletePopup"));
 
+loader.lazyGetter(this, "MDNLink", function() {
+  return createFactory(require("./MdnLink"));
+});
+
 class SearchBox extends Component {
   static get propTypes() {
     return {
       delay: PropTypes.number,
       keyShortcut: PropTypes.string,
       onChange: PropTypes.func,
       onFocus: PropTypes.func,
       onBlur: PropTypes.func,
       onKeyDown: PropTypes.func,
       placeholder: PropTypes.string,
       plainStyle: PropTypes.bool,
       type: PropTypes.string,
       autocompleteProvider: PropTypes.func,
+      learnMoreUrl: PropTypes.string,
+      learnMoreTitle: PropTypes.string,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       value: "",
@@ -157,28 +163,32 @@ class SearchBox extends Component {
   }
 
   render() {
     let {
       type = "search",
       placeholder,
       autocompleteProvider,
       plainStyle,
+      learnMoreUrl,
+      learnMoreTitle,
     } = this.props;
     let { value } = this.state;
     let divClassList = ["devtools-searchbox", "has-clear-btn"];
     let inputClassList = [`devtools-${type}input`];
     if (plainStyle) {
       inputClassList.push("devtools-plaininput");
     }
     let showAutocomplete = autocompleteProvider && this.state.focused && value !== "";
 
     if (value !== "") {
       inputClassList.push("filled");
+      learnMoreUrl = false;
     }
+
     return dom.div(
       { className: divClassList.join(" ") },
       dom.input({
         className: inputClassList.join(" "),
         onChange: this.onChange,
         onFocus: this.onFocus,
         onBlur: this.onBlur,
         onKeyDown: this.onKeyDown,
@@ -186,16 +196,20 @@ class SearchBox extends Component {
         ref: "input",
         value,
       }),
       dom.button({
         className: "devtools-searchinput-clear",
         hidden: value == "",
         onClick: this.onClearButtonClick
       }),
+      learnMoreUrl && MDNLink({
+        url: learnMoreUrl,
+        title: learnMoreTitle,
+      }),
       showAutocomplete && AutocompletePopup({
         autocompleteProvider,
         filter: value,
         ref: "autocomplete",
         onItemSelected: (itemValue) => {
           this.setState({ value: itemValue });
           this.onChange();
         }
--- a/devtools/client/shared/components/moz.build
+++ b/devtools/client/shared/components/moz.build
@@ -11,16 +11,18 @@ DIRS += [
     'throttling',
     'tree',
 ]
 
 DevToolsModules(
     'AutoCompletePopup.js',
     'Frame.js',
     'HSplitBox.js',
+    'MdnLink.css',
+    'MdnLink.js',
     'NotificationBox.css',
     'NotificationBox.js',
     'SearchBox.js',
     'Sidebar.js',
     'SidebarToggle.css',
     'SidebarToggle.js',
     'StackTrace.js',
     'VirtualizedTree.js',
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -531,16 +531,31 @@ checkbox:-moz-focusring {
   top: 100%;
   width: 100%;
   line-height: initial !important;
   /* See bug - 1414609. z-index is greater than 1000 so that searchbox's z-index
   is more than z-index of requests-list-headers-wrapper in netmonitor */
   z-index: 1001;
 }
 
+/* MDN link within the Searchbox */
+.devtools-searchbox .learn-more-link:before {
+  height: 20px;
+}
+
+.devtools-searchbox .learn-more-link {
+  background: transparent !important;
+  cursor: pointer;
+  display: none;
+}
+
+.devtools-searchbox:hover .learn-more-link {
+  display: block;
+}
+
 /* Don't add 'double spacing' for inputs that are at beginning / end
    of a toolbar (since the toolbar has it's own spacing). */
 .devtools-toolbar > .devtools-textinput:first-child,
 .devtools-toolbar > .devtools-searchinput:first-child,
 .devtools-toolbar > .devtools-filterinput:first-child {
   margin-inline-start: 0;
 }
 .devtools-toolbar > .devtools-textinput:last-child,