* SUMMARY It would be helpful to copy an entire CSS rule from the sidebar. Currently each Rule's Selector and Properties are separate fields, it would be nice to be able to copy/paste the entire rule (Selector, Properties, and optionally surrounding @media rules block) from the Styles sidebar. * TEST: <style> @media (min-width:600px) { body { color: red; } } </style> <body>Test</body> * STEPS TO REPRODUCE 1. Inspect <body> on test page 2. Show Styles sidebar => Should be able to copy the body styles from the sidebar somehow * NOTES - Would be nice to copy with and without the @media. - Perhaps right clicking anywhere in the selector/property editors?
<rdar://problem/19009055>
Maybe if the entire selection range of the rule is copied, include the selector too?
Created attachment 254272 [details] Patch
Comment on attachment 254272 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=254272&action=review I think a context menu on the rule section would be best. > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css:70 > + cursor: pointer; Not sure pointer is the right cursor. This might be best as a context menu item. Click to Copy isn't a typical user action in most places. > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:110 > + (function(thisObject) { > + thisObject._iconElement.addEventListener("click", function() { You should use .bind(this) on the event listener function instead. No need for a closure.
Comment on attachment 254272 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=254272&action=review > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:119 > + styleText += "@media" + thisObject._style.ownerRule.mediaList[0].text + " {\n "; Seems weird that this would always be mediaList[0]. Does that make sense?
Created attachment 254299 [details] Patch
Comment on attachment 254299 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=254299&action=review > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:108 > + this._headerElement.addEventListener("contextmenu", function(event) { Style: We would probably have a _handleContextMenuEvent method down below and here we would just have: this._headerElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this)); > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:110 > + if (window.getSelection().toString().length) > + return; What is this bail for? > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:115 > + InspectorFrontendHost.copyText(this._generateCSSRuleString.call(this)); Nit: this.foo.call(this) is no different than this.foo(); > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:293 > + _generateCSSRuleString: function() { Style: Brace on new line. > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:301 > + function repeatText(text, numRepeats) { > + var output = ""; > + > + for (var i = 0; i < numRepeats; ++i) > + output += text; > + > + return output; > + } Actually, we support String.prototype.repeat. So you could just do: "test".repeat(3) And get: "testtesttest" > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:312 > + for (var i = numMediaQueries - 1; i >= 0; --i) > + styleText += repeatText(" ", numMediaQueries - i - 1) + "@media " + mediaList[i].text + " {\n"; I wonder if this would be a good place to adopt template strings: styleText += `${" ".repeat(numMediaQueries - i - 1)} @media ${mediaList[i].text} {\n` But maybe I'm just getting too excited. Stick with just strings for now. > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:325 > + if (styleText.slice(-1) !== ";") > + styleText += ";"; I think: !styleText.endsWith(";") is more expressive.
Comment on attachment 254299 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=254299&action=review >> Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js:110 >> + return; > > What is this bail for? If part of the selector text is highlighted, don't replace the context menu as someone may want to just copy/paste a selector.
Created attachment 254311 [details] Patch
Comment on attachment 254311 [details] Patch Clearing flags on attachment: 254311 Committed r185720: <http://trac.webkit.org/changeset/185720>
All reviewed patches have been landed. Closing bug.