<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[41352] trunk/src: Widgets: Add dirty state tracking for widgets on admin screen.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/41352">41352</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/41352","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>westonruter</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2017-09-08 19:10:59 +0000 (Fri, 08 Sep 2017)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Widgets: Add dirty state tracking for widgets on admin screen.

* Mark a widget as dirty when a field input triggers a `change` or `input` event; clear dirty state when widget is successfully saved.
* Disable Save button and re-label "Saved" when widget not dirty.
* Show AYS dialog when leaving widgets admin screen with unsaved changes.
* When widgets are dirty, expand all unsaved widgets at AYS check and focus on first one.
* Change "Close" link to "Done"; hide link when widget is dirty and reveal when saved.
* The "Done" link persistently appears in the Customizer even after making a change (when the widget is dirty) because changes are autosaved into the changeset.
* Prevent saving widget when form fails `checkValidity`.
* Fix frequency of triggering of `change` event on the rich Text widget's `textarea` limited now to when there are actual changes.
* Add a class of `widget-dirty` to widget containers when the widget has unsaved changes.

Props westonruter, timmydcrawford, melchoyce.
Fixes <a href="https://core.trac.wordpress.org/ticket/41610">#41610</a>, <a href="https://core.trac.wordpress.org/ticket/23120">#23120</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsswidgetscss">trunk/src/wp-admin/css/widgets.css</a></li>
<li><a href="#trunksrcwpadminincludeswidgetsphp">trunk/src/wp-admin/includes/widgets.php</a></li>
<li><a href="#trunksrcwpadminjswidgetstextwidgetsjs">trunk/src/wp-admin/js/widgets/text-widgets.js</a></li>
<li><a href="#trunksrcwpadminjswidgetsjs">trunk/src/wp-admin/js/widgets.js</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsswidgetscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/widgets.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/widgets.css        2017-09-08 18:41:20 UTC (rev 41351)
+++ trunk/src/wp-admin/css/widgets.css  2017-09-08 19:10:59 UTC (rev 41352)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -42,6 +42,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">        line-height: 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.widget.widget-dirty .widget-control-close-wrapper {
+       display: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .in-widget-title,
</span><span class="cx" style="display: block; padding: 0 10px"> #widgets-right a.widget-control-edit,
</span><span class="cx" style="display: block; padding: 0 10px"> #available-widgets .widget-description {
</span></span></pre></div>
<a id="trunksrcwpadminincludeswidgetsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/widgets.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/widgets.php   2017-09-08 18:41:20 UTC (rev 41351)
+++ trunk/src/wp-admin/includes/widgets.php     2017-09-08 19:10:59 UTC (rev 41352)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -253,8 +253,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        <div class="widget-control-actions">
</span><span class="cx" style="display: block; padding: 0 10px">                <div class="alignleft">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        <button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button> |
-                       <button type="button" class="button-link widget-control-close"><?php _e( 'Close' ); ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 <button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button>
+                       <span class="widget-control-close-wrapper">
+                               |
+                               <button type="button" class="button-link widget-control-close"><?php _e( 'Done' ); ?></button>
+                       </span>
</ins><span class="cx" style="display: block; padding: 0 10px">                 </div>
</span><span class="cx" style="display: block; padding: 0 10px">                <div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>">
</span><span class="cx" style="display: block; padding: 0 10px">                        <?php submit_button( __( 'Save' ), 'primary widget-control-save right', 'savewidget', false, array( 'id' => 'widget-' . esc_attr( $id_format ) . '-savewidget' ) ); ?>
</span></span></pre></div>
<a id="trunksrcwpadminjswidgetstextwidgetsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/widgets/text-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/widgets/text-widgets.js     2017-09-08 18:41:20 UTC (rev 41351)
+++ trunk/src/wp-admin/js/widgets/text-widgets.js       2017-09-08 19:10:59 UTC (rev 41352)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -165,9 +165,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @returns {void}
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="cx" style="display: block; padding: 0 10px">                initializeEditor: function initializeEditor() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false, previousValue;
</ins><span class="cx" style="display: block; padding: 0 10px">                         textarea = control.fields.text;
</span><span class="cx" style="display: block; padding: 0 10px">                        id = textarea.attr( 'id' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        previousValue = textarea.val();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        /**
</span><span class="cx" style="display: block; padding: 0 10px">                         * Trigger change if dirty.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -202,10 +203,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        }
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                // Trigger change on textarea when it is dirty for sake of widgets in the Customizer needing to sync form inputs to setting models.
-                               if ( needsTextareaChangeTrigger ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         // Trigger change on textarea when it has changed so the widget can enter a dirty state.
+                               if ( needsTextareaChangeTrigger && previousValue !== textarea.val() ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                         textarea.trigger( 'change' );
</span><span class="cx" style="display: block; padding: 0 10px">                                        needsTextareaChangeTrigger = false;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                        previousValue = textarea.val();
</ins><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><span class="cx" style="display: block; padding: 0 10px">                        };
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="trunksrcwpadminjswidgetsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/widgets.js  2017-09-08 18:41:20 UTC (rev 41351)
+++ trunk/src/wp-admin/js/widgets.js    2017-09-08 19:10:59 UTC (rev 41352)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,10 +7,30 @@
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><span class="cx" style="display: block; padding: 0 10px">         * A closed Sidebar that gets a Widget dragged over it.
</span><span class="cx" style="display: block; padding: 0 10px">         *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * @var element|null
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @var {element|null}
</ins><span class="cx" style="display: block; padding: 0 10px">          */
</span><span class="cx" style="display: block; padding: 0 10px">        hoveredSidebar: null,
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        /**
+        * Translations.
+        *
+        * Exported from PHP in wp_default_scripts().
+        *
+        * @var {object}
+        */
+       l10n: {
+               save: '{save}',
+               saved: '{saved}',
+               saveAlert: '{saveAlert}'
+       },
+
+       /**
+        * Lookup of which widgets have had change events triggered.
+        *
+        * @var {object}
+        */
+       dirtyWidgets: {},
+
</ins><span class="cx" style="display: block; padding: 0 10px">         init : function() {
</span><span class="cx" style="display: block; padding: 0 10px">                var rem, the_id,
</span><span class="cx" style="display: block; padding: 0 10px">                        self = this,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -33,6 +53,39 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        $document.triggerHandler( 'wp-pin-menu' );
</span><span class="cx" style="display: block; padding: 0 10px">                });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                // Show AYS dialog when there are unsaved widget changes.
+               $( window ).on( 'beforeunload.widgets', function( event ) {
+                       var dirtyWidgetIds = [], unsavedWidgetsElements;
+                       $.each( self.dirtyWidgets, function( widgetId, dirty ) {
+                               if ( dirty ) {
+                                       dirtyWidgetIds.push( widgetId );
+                               }
+                       });
+                       if ( 0 !== dirtyWidgetIds.length ) {
+                               unsavedWidgetsElements = $( '#widgets-right' ).find( '.widget' ).filter( function() {
+                                       return -1 !== dirtyWidgetIds.indexOf( $( this ).prop( 'id' ).replace( /^widget-\d+_/, '' ) );
+                               });
+                               unsavedWidgetsElements.each( function() {
+                                       if ( ! $( this ).hasClass( 'open' ) ) {
+                                               $( this ).find( '.widget-title-action:first' ).click();
+                                       }
+                               });
+
+                               // Bring the first unsaved widget into view and focus on the first tabbable field.
+                               unsavedWidgetsElements.first().each( function() {
+                                       if ( this.scrollIntoViewIfNeeded ) {
+                                               this.scrollIntoViewIfNeeded();
+                                       } else {
+                                               this.scrollIntoView();
+                                       }
+                                       $( this ).find( '.widget-inside :tabbable:first' ).focus();
+                               } );
+
+                               event.returnValue = wpWidgets.l10n.saveAlert;
+                               return event.returnValue;
+                       }
+               });
+
</ins><span class="cx" style="display: block; padding: 0 10px">                 $('#widgets-left .sidebar-name').click( function() {
</span><span class="cx" style="display: block; padding: 0 10px">                        $(this).closest('.widgets-holder-wrap').toggleClass('closed');
</span><span class="cx" style="display: block; padding: 0 10px">                        $document.triggerHandler( 'wp-pin-menu' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -41,15 +94,28 @@
</span><span class="cx" style="display: block; padding: 0 10px">                $(document.body).bind('click.widgets-toggle', function(e) {
</span><span class="cx" style="display: block; padding: 0 10px">                        var target = $(e.target),
</span><span class="cx" style="display: block; padding: 0 10px">                                css = { 'z-index': 100 },
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                widget, inside, targetWidth, widgetWidth, margin,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId,
</ins><span class="cx" style="display: block; padding: 0 10px">                                 toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                widget = target.closest('div.widget');
</span><span class="cx" style="display: block; padding: 0 10px">                                inside = widget.children('.widget-inside');
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         targetWidth = parseInt( widget.find('input.widget-width').val(), 10 );
</ins><span class="cx" style="display: block; padding: 0 10px">                                 widgetWidth = widget.parent().width();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                widgetId = inside.find( '.widget-id' ).val();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                // Save button is initially disabled, but is enabled when a field is changed.
+                               if ( ! widget.data( 'dirty-state-initialized' ) ) {
+                                       saveButton = inside.find( '.widget-control-save' );
+                                       saveButton.prop( 'disabled', true ).val( wpWidgets.l10n.saved );
+                                       inside.on( 'input change', function() {
+                                               self.dirtyWidgets[ widgetId ] = true;
+                                               widget.addClass( 'widget-dirty' );
+                                               saveButton.prop( 'disabled', false ).val( wpWidgets.l10n.save );
+                                       });
+                                       widget.data( 'dirty-state-initialized', true );
+                               }
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                 if ( inside.is(':hidden') ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                                if ( widget.closest('div.widget-liquid-right').length ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -410,9 +476,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">        },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        save : function( widget, del, animate, order ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                var sidebarId = widget.closest('div.widgets-sortables').attr('id'),
-                       data = widget.find('form').serialize(), a;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         var self = this, data, a,
+                       sidebarId = widget.closest( 'div.widgets-sortables' ).attr( 'id' ),
+                       form = widget.find( 'form' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                if ( form.prop( 'checkValidity' ) && ! form[0].checkValidity() ) {
+                       return;
+               }
+
+               data = form.serialize();
+
</ins><span class="cx" style="display: block; padding: 0 10px">                 widget = $(widget);
</span><span class="cx" style="display: block; padding: 0 10px">                $( '.spinner', widget ).addClass( 'is-active' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -429,11 +502,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">                data += '&' + $.param(a);
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                $.post( ajaxurl, data, function(r) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var id;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var id = $('input.widget-id', widget).val();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( del ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                if ( ! $('input.widget_number', widget).val() ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        id = $('input.widget-id', widget).val();
</del><span class="cx" style="display: block; padding: 0 10px">                                         $('#available-widgets').find('input.widget-id').each(function(){
</span><span class="cx" style="display: block; padding: 0 10px">                                                if ( $(this).val() === id ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                                        $(this).closest('div.widget').show();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -459,6 +531,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                if ( r && r.length > 2 ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        $( 'div.widget-content', widget ).html( r );
</span><span class="cx" style="display: block; padding: 0 10px">                                        wpWidgets.appendTitle( widget );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                                       // Re-disable the save button.
+                                       widget.find( '.widget-control-save' ).prop( 'disabled', true ).val( wpWidgets.l10n.saved );
+
+                                       widget.removeClass( 'widget-dirty' );
+
+                                       // Clear the dirty flag from the widget.
+                                       delete self.dirtyWidgets[ id ];
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                         $document.trigger( 'widget-updated', [ widget ] );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                                        if ( sidebarId === 'wp_inactive_widgets' ) {
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php   2017-09-08 18:41:20 UTC (rev 41351)
+++ trunk/src/wp-includes/script-loader.php     2017-09-08 19:10:59 UTC (rev 41352)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -672,6 +672,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                $scripts->add( 'admin-gallery', "/wp-admin/js/gallery$suffix.js", array( 'jquery-ui-sortable' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                $scripts->add_inline_script( 'admin-widgets', sprintf( 'wpWidgets.l10n = %s;', wp_json_encode( array(
+                       'save' => __( 'Save' ),
+                       'saved' => __( 'Saved' ),
+                       'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
+               ) ) ) );
+
</ins><span class="cx" style="display: block; padding: 0 10px">                 $scripts->add( 'media-widgets', "/wp-admin/js/widgets/media-widgets$suffix.js", array( 'jquery', 'media-models', 'media-views', 'wp-api-request' ) );
</span><span class="cx" style="display: block; padding: 0 10px">                $scripts->add_inline_script( 'media-widgets', 'wp.mediaWidgets.init();', 'after' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre>
</div>
</div>

</body>
</html>