Revert "Remove editor state tracking"

This reverts commit a3e022a0d7.

src/gui/html/elements/loot-plugin-item.html

@@ -12,9 +12,28 @@
   <template>
     <style>
       /* Flip effect for user metadata / editor open icons. */
-      #hasUserEdits {
+      #flipper {
+        transform-style: preserve-3d;
+        transition: 0.6s;
+        overflow: visible;
+      }
+      #flipper.flipped {
+        transform: rotateY(180deg);
+      }
+      #hasUserEdits,
+      #editorIsOpen {
         display: block;
         margin-right: 0;
+        backface-visibility: hidden;
+      }
+      #hasUserEdits {
+        transform: translateZ(1px);
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      #editorIsOpen {
+        transform: rotateY(180deg) translateZ(-1px);
       }
 
       /* paper-item (two-line) */
@@ -85,8 +104,12 @@
           <span id="priority" hidden$="[[!priority]]">[[priority]]</span>
         </div>
       </paper-item-body>
-      <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
+      <paper-tooltip for="editorIsOpen" position="left">Editor Is Open</paper-tooltip>
       <paper-tooltip for="hasUserEdits" position="left">Has User Metadata</paper-tooltip>
+      <div id="flipper" class$="[[computeFlipperClass(isEditorOpen)]]">
+        <iron-icon id="editorIsOpen" icon="create"></iron-icon>
+        <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
+      </div>
     </paper-item>
   </template>
   <script>
@@ -102,12 +125,23 @@
           type: Boolean,
           value: false,
         },
+        isEditorOpen: {
+          type: Boolean,
+          value: false,
+        },
         hasUserEdits: {
           type: Boolean,
           value: false,
         },
       },
 
+      computeFlipperClass(isEditorOpen) {
+        if (isEditorOpen) {
+          return 'flipped';
+        }
+        return '';
+      },
+
       getName() {
         return this.textContent.trim();
       },
@@ -121,6 +155,7 @@
       updateStyling(pluginData) {
         this.priority = pluginData.priority;
         this.isPriorityGlobal = pluginData.isPriorityGlobal;
+        this.isEditorOpen = pluginData.isEditorOpen;
         this.hasUserEdits = pluginData.hasUserEdits;
       },
     });

src/gui/html/index.html

@@ -171,6 +171,7 @@
                               data-index$="[[index]]"
                               priority="[[item.priority]]"
                               is-priority-global="[[item.isPriorityGlobal]]"
+                              is-editor-open="[[item.isEditorOpen]]"
                               has-user-edits="[[item.hasUserEdits]]">[[item.name]]</loot-plugin-item>
           </template>
           <!-- Generated <loot-plugin-item> elements go here. -->

src/gui/html/js/l10n.js

@@ -84,6 +84,7 @@
 
     pluginItem.querySelector('paper-tooltip[for=globalPriorityIcon]').textContent = l10n.translate('Global Priority');
     pluginItem.querySelector('paper-tooltip[for=hasUserEdits]').textContent = l10n.translate('Has User Metadata');
+    pluginItem.querySelector('paper-tooltip[for=editorIsOpen]').textContent = l10n.translate('Editor Is Open');
   }
 
   function translateMessageDialogTemplate(l10n) {

src/gui/html/js/plugin.js

@@ -186,6 +186,7 @@
 
       /* UI state variables */
       this.id = this.name.replace(/\s+/g, '');
+      this._isEditorOpen = false;
       this.isConflictFilterChecked = false;
       this._isSearchResult = false;
     }
@@ -251,6 +252,7 @@
           pluginId: this.id,
           priority: this.priority,
           isPriorityGlobal: this.isPriorityGlobal,
+          isEditorOpen: this.isEditorOpen,
           hasUserEdits: this.hasUserEdits,
         },
       }));
@@ -389,6 +391,18 @@
       }
     }
 
+    get isEditorOpen() {
+      return this._isEditorOpen;
+    }
+
+    set isEditorOpen(isEditorOpen) {
+      if (this._isEditorOpen !== isEditorOpen) {
+        this._isEditorOpen = isEditorOpen;
+
+        this._dispatchItemContentChangeEvent();
+      }
+    }
+
     get isSearchResult() {
       return this._isSearchResult;
     }

src/tests/gui/html/js/test_plugin.js

@@ -256,6 +256,12 @@ describe('Plugin', () => {
       plugin.id.should.equal('testpluginname');
     });
 
+    it('should set isEditorOpen to false', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isEditorOpen.should.be.false();
+    });
+
     it('should set isConflictFilterChecked to false', () => {
       const plugin = new loot.Plugin({ name: 'test' });
 
@@ -685,6 +691,7 @@ describe('Plugin', () => {
         evt.detail.pluginId.should.equal(plugin.id);
         evt.detail.priority.should.equal(plugin.priority);
         evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
+        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
         evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
         done();
       };
@@ -746,6 +753,7 @@ describe('Plugin', () => {
         evt.detail.pluginId.should.equal(plugin.id);
         evt.detail.priority.should.equal(plugin.priority);
         evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
+        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
         evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
         done();
       };
@@ -807,6 +815,7 @@ describe('Plugin', () => {
         evt.detail.pluginId.should.equal(plugin.id);
         evt.detail.priority.should.equal(plugin.priority);
         evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
+        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
         evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
         done();
       };
@@ -817,6 +826,59 @@ describe('Plugin', () => {
     });
   });
 
+  describe('#isEditorOpen', () => {
+    let handleEvent;
+
+    afterEach(() => {
+      document.removeEventListener('loot-plugin-item-content-change', handleEvent);
+    });
+
+    it('getting value should return false if it has not been set in the constructor', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isEditorOpen.should.be.false();
+    });
+
+    it('setting value should store set value', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isEditorOpen = true;
+
+      plugin.isEditorOpen.should.be.true();
+    });
+
+    it('setting value to the current value should not fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = () => {
+        done(new Error('Should not have fired an event'));
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.isEditorOpen = plugin.isEditorOpen;
+
+      setTimeout(done, 100);
+    });
+
+    it('setting value not equal to the current value should fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
+        evt.detail.priority.should.equal(plugin.priority);
+        evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
+        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
+        evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
+        done();
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.isEditorOpen = true;
+    });
+  });
+
   describe('#isSearchResult', () => {
     let handleEvent;