Bug 1429296 - Show MDN link of filter properties when hover the filterbox; r=davidwalsh
authorJan Odvarko <odvarko@gmail.com>
Mon, 30 Apr 2018 14:58:26 +0200
changeset 472841 42347190c35aafe874207a55e05ab14cb6f73ddd
parent 472840 5969ba522eddc5eeed633ae7f367241f0a503b9d
child 472842 d1a03dc50fba506983a294d4a74cee495ff07a73
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdavidwalsh
bugs1429296
milestone61.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 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
@@ -535,16 +535,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,