Backed out changeset 3433056bbedb (bug 1371586) for ESLint failures. FENNEC_55_0b5_BUILD1 FENNEC_55_0b5_RELEASE FIREFOX_55_0b5_BUILD1 FIREFOX_55_0b5_RELEASE
authorRyan VanderMeulen <ryanvm@gmail.com>
Mon, 26 Jun 2017 19:52:01 -0400
changeset 603663 af94af58d1f315f475fbe831bb48aecbeb9a0c61
parent 603662 7bda5dde85650defd4ad714ba9c869e09f0d183d
child 603664 c836770a64c15192c42d33340abf861a1d201723
push id66829
push userbmo:m_kato@ga2.so-net.ne.jp
push dateTue, 04 Jul 2017 09:55:15 +0000
bugs1371586
milestone55.0
backs out3433056bbedb6eb9995c9052df0d83f3d604b3d8
Backed out changeset 3433056bbedb (bug 1371586) for ESLint failures.
devtools/client/styleeditor/StyleEditorUI.jsm
--- a/devtools/client/styleeditor/StyleEditorUI.jsm
+++ b/devtools/client/styleeditor/StyleEditorUI.jsm
@@ -890,24 +890,29 @@ StyleEditorUI.prototype = {
         inSource = true;
 
         let div = this._panelDoc.createElement("div");
         div.className = "media-rule-label";
         div.addEventListener("click",
                              this._jumpToLocation.bind(this, location));
 
         let cond = this._panelDoc.createElement("div");
+        cond.textContent = rule.conditionText;
         cond.className = "media-rule-condition";
         if (!rule.matches) {
           cond.classList.add("media-condition-unmatched");
         }
         if (this._target.tab.tagName == "tab") {
-          this._setConditionContents(cond, rule.conditionText);
-        } else {
-          cond.textContent = rule.conditionText;
+          const minMaxPattern = /(min\-|max\-)(width|height):\s\d+(px)/ig;
+          const replacement =
+                "<a href='#' class='media-responsive-mode-toggle'>$&</a>";
+
+          cond.innerHTML = cond.textContent.replace(minMaxPattern, replacement);
+          cond.addEventListener("click",
+                                this._onMediaConditionClick.bind(this));
         }
         div.appendChild(cond);
 
         let link = this._panelDoc.createElement("div");
         link.className = "media-rule-line theme-link";
         if (location.line != -1) {
           link.textContent = ":" + location.line;
         }
@@ -918,56 +923,26 @@ StyleEditorUI.prototype = {
 
       sidebar.hidden = !showSidebar || !inSource;
 
       this.emit("media-list-changed", editor);
     }.bind(this)).then(null, e => console.error(e));
   },
 
   /**
-   * Used to safely inject media query links
-   *
-   * @param {HTMLElement} element
-   *        The element corresponding to the media sidebar condition
-   * @param {String} text
-   *        The raw condition text to parse
-   */
-  _setConditionContents(element, text) {
-    const minMaxPattern = /(min\-|max\-)(width|height):\s\d+(px)/ig;
-
-    let match = minMaxPattern.exec(text);
-    let lastParsed = 0;
-    while (match && match.index != minMaxPattern.lastIndex) {
-      let matchEnd = match.index + match[0].length;
-      let node = this._panelDoc.createTextNode(text.substring(lastParsed, match.index));
-      element.appendChild(node);
-
-      let link = this._panelDoc.createElement("a");
-      link.href = "#";
-      link.className = "media-responsive-mode-toggle";
-      link.textContent = text.substring(match.index, matchEnd);
-      link.addEventListener("click", this._onMediaConditionClick.bind(this));
-      element.appendChild(link);
-
-      match = minMaxPattern.exec(text);
-      lastParsed = matchEnd;
+    * Called when a media condition is clicked
+    * If a responsive mode link is clicked, it will launch it.
+    *
+    * @param {object} e
+    *        Event object
+    */
+  _onMediaConditionClick: function (e) {
+    if (!e.target.matches(".media-responsive-mode-toggle")) {
+      return;
     }
-
-    let node = this._panelDoc.createTextNode(text.substring(lastParsed, text.length));
-    element.appendChild(node);
-  },
-
-  /**
-   * Called when a media condition is clicked
-   * If a responsive mode link is clicked, it will launch it.
-   *
-   * @param {object} e
-   *        Event object
-   */
-  _onMediaConditionClick: function (e) {
     let conditionText = e.target.textContent;
     let isWidthCond = conditionText.toLowerCase().indexOf("width") > -1;
     let mediaVal = parseInt(/\d+/.exec(conditionText), 10);
 
     let options = isWidthCond ? {width: mediaVal} : {height: mediaVal};
     this._launchResponsiveMode(options);
     e.preventDefault();
     e.stopPropagation();