diff --git a/browser/devtools/styleeditor/StyleEditorChrome.jsm b/browser/devtools/styleeditor/StyleEditorChrome.jsm
index 097fda5746b8..ca57f0208ce0 100644
--- a/browser/devtools/styleeditor/StyleEditorChrome.jsm
+++ b/browser/devtools/styleeditor/StyleEditorChrome.jsm
@@ -402,7 +402,9 @@ StyleEditorChrome.prototype = {
 
     this._view.setItemClassName(summary, aEditor.flags);
 
-    text(summary, ".stylesheet-name", aEditor.getFriendlyName());
+    let label = summary.querySelector(".stylesheet-name > label");
+    label.setAttribute("value", aEditor.getFriendlyName());
+
     text(summary, ".stylesheet-title", aEditor.styleSheet.title || "");
     text(summary, ".stylesheet-rule-count",
       PluralForm.get(ruleCount, _("ruleCount.label")).replace("#1", ruleCount));
diff --git a/browser/devtools/styleeditor/styleeditor.css b/browser/devtools/styleeditor/styleeditor.css
index 64c7ae4b4208..2dc1c7adcec9 100644
--- a/browser/devtools/styleeditor/styleeditor.css
+++ b/browser/devtools/styleeditor/styleeditor.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -64,22 +65,17 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
 }
 
 .stylesheet-name {
-  /* clip the text at the beginning */
-  display: -moz-box;
-  direction: rtl;
-  text-align: left;
-  overflow: hidden;
+  outline: none;
+}
+
+.stylesheet-name > label {
+  cursor: pointer;
 }
 
 .splitview-nav > li > hgroup.stylesheet-info {
   -moz-box-pack: center;
 }
 
-.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
-.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
-  content: "* ";
-}
-
 .stylesheet-enabled {
   display: -moz-box;
 }
diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul
index b29f64d40795..8a6bca42bdfe 100644
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -101,7 +101,7 @@
          title="&visibilityToggle.tooltip;"
          accesskey="&saveButton.accesskey;"></a>
       <hgroup class="stylesheet-info">
-        <h1><a class="stylesheet-name" href="#"></a></h1>
+        <h1><a class="stylesheet-name" href="#"><xul:label crop="start"/></a></h1>
         <div class="stylesheet-more">
           <h3 class="stylesheet-title"></h3>
           <h3 class="stylesheet-rule-count"></h3>
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_init.js b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
index f810b85d6d41..da9c4115a8d6 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_init.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
@@ -85,7 +85,7 @@ function testFirstStyleSheetEditor(aChrome, aEditor)
   ok(!summary.classList.contains("inline"),
      "first stylesheet UI does not have INLINE class");
 
-  let name = summary.querySelector(".stylesheet-name").textContent;
+  let name = summary.querySelector(".stylesheet-name > label").getAttribute("value");
   is(name, "simple.css",
      "first stylesheet's name is `simple.css`");
 
@@ -113,7 +113,7 @@ function testSecondStyleSheetEditor(aChrome, aEditor)
   ok(summary.classList.contains("inline"),
      "second stylesheet UI has INLINE class");
 
-  let name = summary.querySelector(".stylesheet-name").textContent;
+  let name = summary.querySelector(".stylesheet-name > label").getAttribute("value");
   ok(/^<.*>$/.test(name),
      "second stylesheet's name is surrounded by `<>`");