From c7798ee3178b8a04349b0c32f5e89d90bd8546a7 Mon Sep 17 00:00:00 2001 From: Thomas Andersen Date: Fri, 4 Apr 2014 20:24:27 +0200 Subject: [PATCH] Bug 988283 - Show full path to CSS file on link hover. r=bgrins --- browser/devtools/styleinspector/rule-view.js | 31 ++++++++++++------- .../devtools/styleinspector/test/browser.ini | 2 ++ ...wser_ruleview_734259_style_editor_link.css | 3 ++ ...owser_ruleview_734259_style_editor_link.js | 20 +++++++++++- 4 files changed, 44 insertions(+), 12 deletions(-) create mode 100644 browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.css diff --git a/browser/devtools/styleinspector/rule-view.js b/browser/devtools/styleinspector/rule-view.js index 88eea7870bdd..f7e6f9056ba7 100644 --- a/browser/devtools/styleinspector/rule-view.js +++ b/browser/devtools/styleinspector/rule-view.js @@ -488,16 +488,21 @@ Rule.prototype = { * for this rule's style sheet. * * @return {Promise} - * Promise which resolves with location as a string. + * Promise which resolves with location as an object containing + * both the full and short version of the source string. */ - getOriginalSourceString: function() { - if (this._originalSourceString) { - return promise.resolve(this._originalSourceString); + getOriginalSourceStrings: function() { + if (this._originalSourceStrings) { + return promise.resolve(this._originalSourceStrings); } return this.domRule.getOriginalLocation().then(({href, line}) => { - let string = CssLogic.shortSource({href: href}) + ":" + line; - this._originalSourceString = string; - return string; + let sourceStrings = { + full: href + ":" + line, + short: CssLogic.shortSource({href: href}) + ":" + line + }; + + this._originalSourceStrings = sourceStrings; + return sourceStrings; }); }, @@ -1748,13 +1753,17 @@ RuleEditor.prototype = { { let sourceLabel = this.element.querySelector(".source-link-label"); sourceLabel.setAttribute("value", this.rule.title); - sourceLabel.setAttribute("tooltiptext", this.rule.title); + + let sourceHref = (this.rule.sheet && this.rule.sheet.href) ? + this.rule.sheet.href : this.rule.title; + + sourceLabel.setAttribute("tooltiptext", sourceHref); let showOrig = Services.prefs.getBoolPref(PREF_ORIG_SOURCES); if (showOrig && this.rule.domRule.type != ELEMENT_STYLE) { - this.rule.getOriginalSourceString().then((string) => { - sourceLabel.setAttribute("value", string); - sourceLabel.setAttribute("tooltiptext", string); + this.rule.getOriginalSourceStrings().then((strings) => { + sourceLabel.setAttribute("value", strings.short); + sourceLabel.setAttribute("tooltiptext", strings.full); }) } }, diff --git a/browser/devtools/styleinspector/test/browser.ini b/browser/devtools/styleinspector/test/browser.ini index 6f3b927441d6..b18aa29a6e37 100644 --- a/browser/devtools/styleinspector/test/browser.ini +++ b/browser/devtools/styleinspector/test/browser.ini @@ -15,6 +15,8 @@ skip-if = true # awaiting promise-based init [browser_bug_692400_element_style.js] [browser_csslogic_inherited.js] [browser_ruleview_734259_style_editor_link.js] +support-files = + browser_ruleview_734259_style_editor_link.css [browser_ruleview_editor.js] [browser_ruleview_editor_changedvalues.js] [browser_ruleview_copy.js] diff --git a/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.css b/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.css new file mode 100644 index 000000000000..e49e1f587190 --- /dev/null +++ b/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.css @@ -0,0 +1,3 @@ +div { + opacity: 1; +} \ No newline at end of file diff --git a/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js b/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js index 322d71cb4911..df7d14920c1c 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js @@ -17,6 +17,9 @@ const STYLESHEET_URL = "data:text/css,"+encodeURIComponent( "color: blue", "}"].join("\n")); +const EXTERNAL_STYLESHEET_FILE_NAME = "browser_ruleview_734259_style_editor_link.css" +const EXTERNAL_STYLESHEET_URL = TEST_BASE_HTTP + EXTERNAL_STYLESHEET_FILE_NAME; + const DOCUMENT_URL = "data:text/html,"+encodeURIComponent( ['' + '' + @@ -28,6 +31,7 @@ const DOCUMENT_URL = "data:text/html,"+encodeURIComponent( 'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">', '', '', + '', '', '', '

Some header text

', @@ -111,7 +115,7 @@ function testInlineStyleSheet() }); }); - let link = getLinkByIndex(2); + let link = getLinkByIndex(4); link.scrollIntoView(); link.click(); } @@ -127,12 +131,26 @@ function testExternalStyleSheet(toolbox) { }); toolbox.selectTool("inspector").then(function () { + testRuleViewLinkLabel(); let link = getLinkByIndex(1); link.scrollIntoView(); link.click(); }); } +function testRuleViewLinkLabel() +{ + let link = getLinkByIndex(2); + let labelElem = link.querySelector(".source-link-label"); + let value = labelElem.getAttribute("value"); + let tooltipText = labelElem.getAttribute("tooltiptext"); + + is(value, EXTERNAL_STYLESHEET_FILE_NAME + ":1", + "rule view stylesheet display value matches filename and line number"); + is(tooltipText, EXTERNAL_STYLESHEET_URL, + "rule view stylesheet tooltip text matches the full URI path"); +} + function validateStyleEditorSheet(aEditor, aExpectedSheetIndex) { info("validating style editor stylesheet");