Issue 5873 - Show original subscription title in languages table

desktop-options.html

Index: desktop-options.html
===================================================================
--- a/desktop-options.html
+++ b/desktop-options.html
@@ -86,7 +86,7 @@
           <ul class="list" id="recommend-protection-list-table">
             <template>
               <button data-action="toggle-remove-subscription" role="checkbox" class="control icon"></button>
-              <label class="display"></label>
+              <label data-display="title"></label>
               <span data-tooltip="options_protection_%value%_tooltip"></span>
             </template>
           </ul>
@@ -134,7 +134,10 @@
           <div id="blocking-languages">
             <ul id="blocking-languages-table" class="table list bottom-control">
               <template>
-                <label class="display"></label>
+                <label>

[ire, 2018/01/04 08:32:52]

Using the <label> element here (and below) may not be appropriate. The <label>
element should have a control associated with it, either through the `for`
attribute or the control nested within it.

[saroyanm, 2018/01/04 21:28:52]

Agree, done.

+                  <span data-display="title"></span>
+                  <em>(<span data-display="originalTitle"></span>)</em>
+                </label>
                 <button data-single="hidden" data-action="remove-subscription" class="icon delete control" title="options_control_remove_title"></button>
                 <button data-single="visible" data-action="open-dialog" data-dialog="language-change" class="i18n_options_language_change link"></button>
               </template>
@@ -151,7 +154,7 @@
           <div>
             <ul id="more-list-table" class="table list">
               <template>
-                <label class="display"></label>
+                <label data-display="title"></label>
                 <button data-action="remove-subscription" class="i18n_options_control_remove_title link control" title="options_control_remove_title"></button>
               </template>
             </ul>
@@ -179,7 +182,7 @@
         </form>
         <ul id="whitelisting-table" class="table list">
           <template>
-            <label class="display"></label>
+            <label data-display="title"></label>
             <button data-action="remove-filter" class="icon delete control" 
                     title="options_control_remove_title">
             </button>
@@ -199,17 +202,17 @@
           <ul id="customize" class="list">
             <li data-pref="shouldShowBlockElementMenu">
               <button class="icon" role="checkbox" data-action="toggle-pref"></button>
-              <span class="i18n_options_customize_blockElement display"></span>
+              <label class="i18n_options_customize_blockElement" data-display="title"></label>
               <span data-tooltip="options_customize_blockElement_tooltip"></span>
             </li>
             <li data-pref="show_devtools_panel">
               <button class="icon" role="checkbox" data-action="toggle-pref"></button>
-              <span class="i18n_options_customize_showDevToolsPanel display"></span>
+              <span class="i18n_options_customize_showDevToolsPanel" data-display="title"></span>
               <span data-tooltip="options_customize_showDevToolsPanel_tooltip"></span>
             </li>
             <li data-pref="notifications_ignoredcategories">
               <button class="icon" role="checkbox" data-action="toggle-pref"></button>
-              <span class="i18n_options_customize_showNotifications display"></span>
+              <span class="i18n_options_customize_showNotifications" data-display="title"></span>
               <span data-tooltip="options_customize_showNotifications_tooltip"></span>
             </li>
           </ul>
@@ -242,7 +245,7 @@
                 </div>
               </div>
               <div class="col5">
-                <label class="display"></label>
+                <label data-display="originalTitle"></label>
               </div>
               <div class="col5">
                 <span class="last-update"></span>
@@ -371,10 +374,16 @@
           <ul id="all-lang-table-add" class="table list default-focus">
             <template>
               <button data-action="add-language-subscription,close-dialog" class="control icon add" role="checkbox">
-                <label class="display"></label>
+                <label>

[ire, 2018/01/04 08:32:52]

As I mentioned above the <label> here isn't appropriate because it's nested the
wrong way around. In this case I think a simple <span> will work since the label
is already the content of the <button>

[saroyanm, 2018/01/04 21:28:52]

Agree, done.

+                  <span data-display="title"></span>
+                  <em>(<span data-display="originalTitle"></span>)</em>

[ire, 2018/01/04 08:32:52]

Should this be an `<em>` element? In the spec screenshots it doesn't appear
italic

[saroyanm, 2018/01/04 21:28:52]

Initially I though we would like to <em> as stress emphasis, but I don't have
strong opinion regarding that, though I can style it non Italic, anyway having
span should also be fine for now. I'll go for that.
Done.

+                </label>
               </button>
               <button data-action="change-language-subscription,close-dialog" class="control icon change" role="checkbox">
-                <label class="display"></label>
+                <label>
+                  <span data-display="title"></span>
+                  <em>(<span data-display="originalTitle"></span>)</em>
+                </label>
               </button>
             </template>
           </ul>