DevTools: NetworkPanel: show link where resource timing is explained.

BUG=403508

Review URL: https://codereview.chromium.org/659573005

git-svn-id: svn://svn.chromium.org/blink/trunk@184369 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/audits/AuditFormatters.js

@@ -77,13 +77,7 @@ WebInspector.AuditFormatters.Registry = {
      */
     url: function(url, displayText, allowExternalNavigation)
     {
-        var a = createElement("a");
-        a.href = sanitizeHref(url);
-        a.title = url;
-        a.textContent = displayText || url;
-        if (allowExternalNavigation)
-            a.target = "_blank";
-        return a;
+        return WebInspector.createAnchor(url, displayText, !allowExternalNavigation);
     },
 
     /**

third_party/WebKit/Source/devtools/front_end/components/ShortcutsScreen.js

@@ -75,10 +75,7 @@ WebInspector.ShortcutsScreen.prototype = {
             orderedSections[i].renderSection(container);
 
         var note = scrollPane.createChild("p", "help-footnote");
-        var noteLink = note.createChild("a");
-        noteLink.href = "https://developers.google.com/chrome-developer-tools/docs/shortcuts";
-        noteLink.target = "_blank";
-        noteLink.createTextChild(WebInspector.UIString("Full list of keyboard shortcuts and gestures"));
+        note.appendChild(WebInspector.createDocumentationAnchor("shortcuts", WebInspector.UIString("Full list of keyboard shortcuts and gestures")));
 
         return view;
     }

third_party/WebKit/Source/devtools/front_end/components/helpScreen.css

@@ -16,10 +16,6 @@
     border-radius: 10px;
 }
 
-.help-window-main a {
-    color: rgb(17, 85, 204);
-}
-
 .help-window-caption {
     border-bottom: solid 1px rgb(153, 153, 153);
     margin: 0 8px;
@@ -645,4 +641,4 @@ select.list-column-editor {
 
 .settings-developer-mode .settings-experiment-hidden {
     display: block;
-}
\ No newline at end of file
+}

third_party/WebKit/Source/devtools/front_end/documentation/DocumentationView.js

@@ -253,10 +253,7 @@ WebInspector.DocumentationView.Renderer.prototype = {
             element = createElement("span");
             break;
         case elementTypes.Link:
-            element = createElementWithClass("a", "documentation-link");
-            element.href = article.url();
-            if (!article.children().length)
-                element.textContent = article.url();
+            element = WebInspector.createAnchor(article.url(), article.children().length ? "" : article.url(), true);
             break;
         case elementTypes.Code:
             element = createElementWithClass("span", "documentation-code-tag");
@@ -426,4 +423,4 @@ WebInspector.DocumentationView.ContextMenuProvider.prototype = {
             return token ? line.substring(token.startColumn, token.endColumn) : null;
         }
     }
-}
\ No newline at end of file
+}

third_party/WebKit/Source/devtools/front_end/inspectorStyle.css

@@ -2826,3 +2826,9 @@ body.inactive select.chrome-select,
     white-space: nowrap;
     pointer-events: none;
 }
+
+.link {
+    cursor: pointer;
+    text-decoration: underline;
+    color: rgb(17, 85, 204);
+}

third_party/WebKit/Source/devtools/front_end/main/OverridesView.js

@@ -200,10 +200,7 @@ WebInspector.OverridesView.DeviceTab = function()
     this.element.appendChild(this._createDeviceElement());
 
     var footnote = this.element.createChild("p", "help-footnote");
-    var footnoteLink = footnote.createChild("a");
-    footnoteLink.href = "https://developers.google.com/chrome-developer-tools/docs/mobile-emulation";
-    footnoteLink.target = "_blank";
-    footnoteLink.createTextChild(WebInspector.UIString("More information about screen emulation"));
+    footnote.appendChild(WebInspector.createDocumentationAnchor("device-mode", WebInspector.UIString("More information about screen emulation")));
 }
 
 WebInspector.OverridesView.DeviceTab.prototype = {

third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js

@@ -171,5 +171,9 @@ WebInspector.RequestTimingView.createTimingTable = function(request)
         cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
     }
 
+    var note = tableElement.createChild("tr").createChild("td", "footnote");
+    note.colSpan = 2;
+    note.appendChild(WebInspector.createDocumentationAnchor("network#resource-network-timing", WebInspector.UIString("Explanation of resource timing")));
+
     return tableElement;
 }

third_party/WebKit/Source/devtools/front_end/network/networkPanel.css

@@ -110,6 +110,10 @@
     padding: 2px 0;
 }
 
+.network-timing-table .footnote {
+    border-top: 1px solid #eee;
+}
+
 .network-timing-row {
     position: relative;
     height: 15px;

third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js

@@ -148,7 +148,7 @@ WebInspector.JavaScriptSourceFrame.prototype = {
         infobar.createDetailsRowMessage(WebInspector.UIString("Possible ways to cancel this behavior are:"));
 
         infobar.createDetailsRowMessage(" - ").createTextChild(WebInspector.UIString("Press \"%s\" button in settings", WebInspector.manageBlackboxingButtonLabel()));
-        var unblackboxLink = infobar.createDetailsRowMessage(" - ").createChild("span", "source-frame-infobar-link");
+        var unblackboxLink = infobar.createDetailsRowMessage(" - ").createChild("span", "link");
         unblackboxLink.textContent = WebInspector.UIString("Unblackbox this script");
         unblackboxLink.addEventListener("click", unblackbox, false);
 

third_party/WebKit/Source/devtools/front_end/sources/UISourceCodeFrame.js

@@ -223,7 +223,7 @@ WebInspector.UISourceCodeFrame.Infobar = function(level, message)
     this._mainRow.createChild("span", "source-frame-infobar-icon");
     this._mainRow.createChild("span", "source-frame-infobar-row-message").textContent = message;
 
-    this._toggleElement = this._mainRow.createChild("div", "source-frame-infobar-toggle source-frame-infobar-link");
+    this._toggleElement = this._mainRow.createChild("div", "source-frame-infobar-toggle link");
     this._toggleElement.addEventListener("click", this._onToggleDetails.bind(this), false);
 
     this._closeElement = this._mainRow.createChild("div", "close-button");

third_party/WebKit/Source/devtools/front_end/sources/WorkspaceMappingTip.js

@@ -113,10 +113,9 @@ WebInspector.WorkspaceMappingTip.prototype = {
         var infobar = new WebInspector.UISourceCodeFrame.Infobar(WebInspector.UISourceCodeFrame.Infobar.Level.Info, title);
         infobar.createDetailsRowMessage(WebInspector.UIString("You can map files in your workspace to the ones loaded over the network. As a result, changes made in DevTools will be persisted to disk."));
         infobar.createDetailsRowMessage(WebInspector.UIString("Use context menu to establish the mapping at any time."));
-        var actionLink = infobar.createDetailsRowMessage("").createChild("a");
-        actionLink.href = "";
+        var actionLink = WebInspector.createAnchor("", WebInspector.UIString("Establish the mapping now..."), true);
         actionLink.onclick = this._establishTheMapping.bind(this, uiSourceCode);
-        actionLink.textContent = WebInspector.UIString("Establish the mapping now...");
+        infobar.createDetailsRowMessage("").appendChild(actionLink);
         this._appendInfobar(uiSourceCode, infobar);
     },
 
@@ -143,9 +142,7 @@ WebInspector.WorkspaceMappingTip.prototype = {
 
         infobar.createDetailsRowMessage("").createChild("br");
         var rowElement = infobar.createDetailsRowMessage(WebInspector.UIString("For more information on workspaces, refer to the "));
-        var a = rowElement.createChild("a");
-        a.textContent = "workspaces documentation";
-        a.href = "https://developer.chrome.com/devtools/docs/workspaces";
+        rowElement.appendChild(WebInspector.createDocumentationAnchor("workspaces", WebInspector.UIString("workspaces documentation")));
         rowElement.createTextChild(".");
         uiSourceCode[WebInspector.WorkspaceMappingTip._infobarSymbol] = infobar;
         uiSourceCodeFrame.attachInfobars([infobar]);

third_party/WebKit/Source/devtools/front_end/sources/sourcesView.css

@@ -183,13 +183,6 @@ button.status-bar-item.scripts-navigator-show-hide-button {
     -webkit-user-select: none;
 }
 
-.source-frame-infobar-link {
-    text-decoration: underline;
-    color: rgb(50, 50, 200);
-    cursor: pointer;
-}
-
 .source-frame-infobar-details-url {
     flex: 0 1000 auto;
-    color: rgb(50, 50, 200);
 }

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

@@ -1172,6 +1172,41 @@ WebInspector.LongClickController.prototype = {
     __proto__: WebInspector.Object.prototype
 }
 
+/**
+ * @param {string} url
+ * @param {string=} linkText
+ * @param {boolean=} isInternal
+ * @return {!Element}
+ */
+WebInspector.createAnchor = function(url, linkText, isInternal)
+{
+    var anchor = createElementWithClass("a", "link");
+    var href = sanitizeHref(url);
+
+    if (href)
+        anchor.href = href;
+    anchor.title = url;
+
+    if (!linkText)
+        linkText = url;
+    anchor.textContent = linkText;
+
+    if (!isInternal)
+        anchor.setAttribute("target", "_blank");
+
+    return anchor;
+}
+
+/**
+ * @param {string} article
+ * @param {string} title
+ * @return {!Element}
+ */
+WebInspector.createDocumentationAnchor = function(article, title)
+{
+    return WebInspector.createAnchor("https://developer.chrome.com/devtools/docs/" + article, title);
+}
+
 /**
  * @param {!Window} window
  */