DevTools: [SSP] implement "add rule to end" of arbitrary style sheet.

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 31 matching lines @@
     this._elementStateButton.title = WebInspector.UIString("Toggle Element State");
     this._elementStateButton.addEventListener("click", this._toggleElementStatePane.bind(this), false);
     this.titleElement.appendChild(this._elementStateButton);
 
     var addButton = document.createElement("button");
     addButton.className = "pane-title-button add";
     addButton.id = "add-style-button-test-id";
     addButton.title = WebInspector.UIString("New Style Rule");
     addButton.addEventListener("click", this._createNewRuleInViaInspectorStyleSheet.bind(this), false);
     this.titleElement.appendChild(addButton);
+    addButton.createChild("div", "long-click-glyph fill");
+
+    this._addButtonLongClickController = new WebInspector.LongClickController(addButton);
+    this._addButtonLongClickController.addEventListener(WebInspector.LongClickController.Events.LongClick, this._onAddButtonLongClick.bind(this));
+    this._addButtonLongClickController.enable();
 
     this._computedStylePane = computedStylePane;
     computedStylePane.setHostingPane(this);
     this._setPseudoClassCallback = setPseudoClassCallback;
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
     WebInspector.settings.showUserAgentStyles.addChangeListener(this._showUserAgentStylesSettingChanged.bind(this));
 
     this._createElementStatePane();
     this.bodyElement.appendChild(this._elementStatePane);
@@ skipping 95 matching lines @@
     if (value.endsWith("\9"))
         return true;
     if (hasUnknownVendorPrefix(value))
         return true;
 
     return false;
 }
 
 WebInspector.StylesSidebarPane.prototype = {
     /**
+     * @param {!WebInspector.Event} event
+     */
+    _onAddButtonLongClick: function(event)
+    {
+        this._addButtonLongClickController.reset();
+        var cssModel = this._target.cssModel;
+        var headers = cssModel.styleSheetHeaders().filter(styleSheetResourceHeader);
+
+        /** @type {!Array.<{text: string, handler: function()}>} */
+        var contextMenuDescriptors = [];
+        for (var i = 0; i < headers.length; ++i) {
+            var header = headers[i];
+            var handler = this._createNewRuleInStyleSheet.bind(this, header);
+            contextMenuDescriptors.push({
+                text: WebInspector.displayNameForURL(header.resourceURL()),
+                handler: handler
+            });
+        }
+
+        contextMenuDescriptors.sort(compareDescriptors);
+
+        var contextMenu = new WebInspector.ContextMenu(/** @type {!Event} */(event.data));
+        for (var i = 0; i < contextMenuDescriptors.length; ++i) {
+            var descriptor = contextMenuDescriptors[i];
+            contextMenu.appendItem(descriptor.text, descriptor.handler);
+        }
+        if (!contextMenu.isEmpty())
+            contextMenu.appendSeparator();
+        contextMenu.appendItem("inspector-stylesheet", this._createNewRuleInViaInspectorStyleSheet.bind(this));
+        contextMenu.show();
+
+        /**
+         * @param {!{text: string, handler: function()}} descriptor1
+         * @param {!{text: string, handler: function()}} descriptor2
+         * @return {number}
+         */
+        function compareDescriptors(descriptor1, descriptor2)
+        {
+            return String.naturalOrderComparator(descriptor1.text, descriptor2.text);
+        }
+
+        /**
+         * @param {!WebInspector.CSSStyleSheetHeader} header
+         */
+        function styleSheetResourceHeader(header)
+        {
+            return !header.isViaInspector() && !header.isInline && header.resourceURL();
+        }
+    },
+
+    /**
      * @param {!WebInspector.DOMNode} node
      */
     updateEditingSelectorForNode: function(node)
     {
         var selectorText = WebInspector.DOMPresentationUtils.simpleSelector(node);
         if (!selectorText)
             return;
         this._editingSelectorSection.setSelectorText(selectorText);
     },
 
@@ skipping 646 matching lines @@
             for (var i = 0; i < sections.length; ++i)
                 sections[i].update(true);
         }
     },
 
     /**
      * @param {?Event} event
      */
     _createNewRuleInViaInspectorStyleSheet: function(event)
     {
-        event.consume();
         var cssModel = this._target.cssModel;
-        cssModel.requestViaInspectorStylesheet(this._node, viaInspectorCallback.bind(this));
+        cssModel.requestViaInspectorStylesheet(this._node, this._createNewRuleInStyleSheet.bind(this));
+    },
 
-        /**
-         * @param {?WebInspector.CSSStyleSheetHeader} styleSheetHeader
-         * @this {WebInspector.StylesSidebarPane}
-         */
-        function viaInspectorCallback(styleSheetHeader)
-        {
-            if (!styleSheetHeader)
-                return;
-            styleSheetHeader.requestContent(onViaInspectorContent.bind(this, styleSheetHeader.id));
-        }
+    /**
+     * @param {?WebInspector.CSSStyleSheetHeader} styleSheetHeader
+     */
+    _createNewRuleInStyleSheet: function(styleSheetHeader)
+    {
+        if (!styleSheetHeader)
+            return;
+        styleSheetHeader.requestContent(onStyleSheetContent.bind(this, styleSheetHeader.id));
 
         /**
          * @param {string} styleSheetId
          * @param {string} text
          * @this {WebInspector.StylesSidebarPane}
          */
-        function onViaInspectorContent(styleSheetId, text)
+        function onStyleSheetContent(styleSheetId, text)
         {
             var lines = text.split("\n");
             var range = WebInspector.TextRange.createFromLocation(lines.length - 1, lines[lines.length - 1].length);
             this._addBlankSection(this.sections[0][1], styleSheetId, range);
         }
     },
 
     /**
      * @param {!WebInspector.StylePropertiesSection} insertAfterSection
      * @param {string} styleSheetId
@@ skipping 370 matching lines @@
     {
         if (!this.rule || !this.rule.styleSheetId)
             return;
         if (this.rule !== editedRule)
             this.rule.sourceStyleSheetEdited(editedRule.styleSheetId, oldRange, newRange);
         this._updateMediaList();
         this._updateRuleOrigin();
     },
 
     /**
-     * @param {!Object} styleRule
+     * @param {?Array.<!WebInspector.CSSMedia>} mediaRules
      */
-    _createMediaList: function(styleRule)
+    _createMediaList: function(mediaRules)
     {
-        if (!styleRule.media)
+        if (!mediaRules)
             return;
-        for (var i = styleRule.media.length - 1; i >= 0; --i) {
-            var media = styleRule.media[i];
+        for (var i = mediaRules.length - 1; i >= 0; --i) {
+            var media = mediaRules[i];
             var mediaDataElement = this._mediaListElement.createChild("div", "media");
             var mediaText;
             switch (media.source) {
             case WebInspector.CSSMedia.Source.LINKED_SHEET:
             case WebInspector.CSSMedia.Source.INLINE_SHEET:
                 mediaText = "media=\"" + media.text + "\"";
                 break;
             case WebInspector.CSSMedia.Source.MEDIA_RULE:
                 mediaText = "@media " + media.text;
                 break;
@@ skipping 11 matching lines @@
 
             var mediaTextElement = mediaDataElement.createChild("span");
             mediaTextElement.textContent = mediaText;
             mediaTextElement.title = media.text;
         }
     },
 
     _updateMediaList: function()
     {
         this._mediaListElement.removeChildren();
-        this._createMediaList(this.styleRule);
+        this._createMediaList(this.styleRule.media);
     },
 
     collapse: function()
     {
         // Overriding with empty body.
     },
 
     handleClick: function()
     {
         // Avoid consuming events.
@@ skipping 272 matching lines @@
         return item;
     },
 
     /**
      * @param {?WebInspector.CSSRule} rule
      * @param {!WebInspector.TextRange=} ruleLocation
      * @return {!Node}
      */
     _createRuleOriginNode: function(rule, ruleLocation)
     {
-        /**
-         * @param {string} url
-         * @param {number} line
-         */
-        function linkifyUncopyable(url, line)
-        {
-            var link = WebInspector.linkifyResourceAsNode(url, line, "", url + ":" + (line + 1));
-            link.classList.add("webkit-html-resource-link");
-            link.setAttribute("data-uncopyable", link.textContent);
-            link.textContent = "";
-            return link;
-        }
-
         if (!rule)
             return document.createTextNode("");
 
         if (!ruleLocation) {
             var firstMatchingIndex = rule.matchingSelectors && rule.matchingSelectors.length ? rule.matchingSelectors[0] : 0;
             ruleLocation = rule.selectors[firstMatchingIndex].range;
         }
 
-        var sourceURL = rule.resourceURL();
-        if (sourceURL && ruleLocation && rule.styleSheetId) {
-            var styleSheetHeader = this._parentPane._target.cssModel.styleSheetHeaderForId(rule.styleSheetId);
-            var lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine);
-            var columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startLine, ruleLocation.startColumn);
-            var matchingSelectorLocation = new WebInspector.CSSLocation(this._parentPane._target, rule.styleSheetId, sourceURL, lineNumber, columnNumber);
-            return this._parentPane._linkifier.linkifyCSSLocation(matchingSelectorLocation) || linkifyUncopyable(sourceURL, 0);
-        }
+        if (ruleLocation && rule.styleSheetId)
+            return this._linkifyRuleLocation(rule.styleSheetId, ruleLocation);

[vsevik, 2014/09/05 06:39:24]

Why did you remove rule.resourceURL() check?

[lushnikov, 2014/09/05 08:17:52]

Because having resourceURL of the rule is equal styleSheet sourceURL, which, in
turn, happens to exist iff there's a rule styleSheetId

 
         if (rule.isUserAgent)
             return document.createTextNode(WebInspector.UIString("user agent stylesheet"));
         if (rule.isUser)
             return document.createTextNode(WebInspector.UIString("user stylesheet"));
-        if (rule.isViaInspector)
-            return this._createRuleViaInspectorOriginNode();
         return document.createTextNode("");
     },
 
     /**
+     * @param {string} styleSheetId
+     * @param {!WebInspector.TextRange} ruleLocation
      * @return {!Node}
      */
-    _createRuleViaInspectorOriginNode: function()
+    _linkifyRuleLocation: function(styleSheetId, ruleLocation)
     {
-        return document.createTextNode(WebInspector.UIString("via inspector"));
+        /**
+         * @param {string} url
+         * @param {number} line
+         */
+        function linkifyUncopyable(url, line)

[vsevik, 2014/09/05 06:39:24]

I know it was like that before, but user agent stylesheet should actually be
uncopyable as well.

[lushnikov, 2014/09/05 08:18:46]

Lets have this in a follow-up

+        {
+            var link = WebInspector.linkifyResourceAsNode(url, line, "", url + ":" + (line + 1));
+            link.classList.add("webkit-html-resource-link");
+            link.setAttribute("data-uncopyable", link.textContent);
+            link.textContent = "";
+            return link;
+        }
+
+        var styleSheetHeader = this._parentPane._target.cssModel.styleSheetHeaderForId(styleSheetId);
+        if (styleSheetHeader.isViaInspector())
+            return document.createTextNode(WebInspector.UIString("via inspector"));
+        var sourceURL = styleSheetHeader.resourceURL();
+        var lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine);
+        var columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startLine, ruleLocation.startColumn);
+        var matchingSelectorLocation = new WebInspector.CSSLocation(this._parentPane._target, styleSheetId, sourceURL, lineNumber, columnNumber);
+        return this._parentPane._linkifier.linkifyCSSLocation(matchingSelectorLocation) || linkifyUncopyable(sourceURL, 0);
     },
 
     _handleEmptySpaceMouseDown: function()
     {
         this._willCauseCancelEditing = this._parentPane._isEditingStyle;
     },
 
     _handleEmptySpaceClick: function(event)
     {
         if (!this.editable)
@@ skipping 341 matching lines @@
  * @param {!WebInspector.TextRange} ruleLocation
  * @param {!WebInspector.CSSRule=} insertAfterRule
  */
 WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText, styleSheetId, ruleLocation, insertAfterRule)
 {
     var styleSheetHeader = WebInspector.cssModel.styleSheetHeaderForId(styleSheetId);
     WebInspector.StylePropertiesSection.call(this, stylesPane, { selectorText: defaultSelectorText }, true, false);
     this._ruleLocation = ruleLocation;
     this._styleSheetId = styleSheetId;
     this._selectorRefElement.removeChildren();
-    if (insertAfterRule) {
-        this._selectorRefElement.appendChild(this._createRuleOriginNode(insertAfterRule, this._actualRuleLocation()));
-        this._createMediaList(insertAfterRule);
-    } else {
-        this._selectorRefElement.appendChild(this._createRuleViaInspectorOriginNode());
-    }
+    this._selectorRefElement.appendChild(this._linkifyRuleLocation(styleSheetId, this._actualRuleLocation()));
+    if (insertAfterRule)
+        this._createMediaList(insertAfterRule.media);
     this.element.classList.add("blank-section");
 }
 
 WebInspector.BlankStylePropertiesSection.prototype = {
     /**
      * @return {!WebInspector.TextRange}
      */
     _actualRuleLocation: function()
     {
         var prefix = this._rulePrefix();
@@ skipping 1467 matching lines @@
         if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
             for (var i = 0; i < results.length; ++i)
                 results[i] = results[i].toUpperCase();
         }
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }